Advanced widget commands for the Legacy Javascript Widget
You can access additional advanced widget functionality like creating a widget on any page. This is done by accessing the widget's built-in functions.
The article provides advanced customization options for the Legacy Javascript Widget, including modifying widget behavior, styling, and functionality to enhance the customer experience.
Platform:
- Shopify Checkout Integration
- Migrated Shopify Checkout Integration
Before you start
- You must use a Shopify 1.0 theme to use the Legacy Javascript Widget. Recharge does not support widget customizations with 2.0 themes.
- You can build your a custom widget that works on any page and with both Shopify's 1.0 and 2.0 themes. Building a custom widget allows you to make more in-depth customizations.
- Use the Subscription Widget if you use a 2.0 theme.
- This feature is not supported by Recharge as per the design and integration policy since it requires custom coding on your end. This documentation is meant to be used as a reference in order for you, your team, or a recommended third-party developer to carry out.
Creating widgets with various configurations
Access advanced JavaScript methods via the browser by invoking ReChargeWidget
. You can access this namespace through client-side code, or in the browser console. The following code demonstrates how you can create widgets with different configurations.
const config = {
productId: 123, // Required
injectionParent: 'form[action*="cart/add"]', // The node that will have the widget injected in
injectionMethod: 'prepend', // How will the widget be injected
injectFn: (node, target) => {}, // Runs a custom injection function
selectors: {
price: ['.my-price-selector'], // the selectors that will be updated based on subscription
variant: ['.variant-selector'] // The variants to watch for to update the subscription prices
}
};
window.ReChargeWidget.createWidget(config);
// Example of rendering a specific product to a page that doesn't provide the productId in the DOM
window.ReChargeWidget.createWidget({ productId: 123 });
// Example of rendering a specific product to a page that has a custom injection point
window.ReChargeWidget.createWidget({ productId: 123, injectionParent: '.rc-custom-injection-point' });
// Example of rendering a specific product to a page that has a special price selector
window.ReChargeWidget.createWidget({ productId: 123, selectors: { price: ['.my-price'] } });
Widget methods
The following table outlines widget methods and example code:
Method | Description | Example |
---|---|---|
createWidget(config) | Creates and returns a new widget instance. | window.ReChargeWidget.createWidget([{ productId: 123 }]); |
createWidgets(configs) | Creates multiple widgets. Returns an array. | window.ReChargeWidget.createWidget([{ productId: 123 }, { productId: 12456 }]); |
getWidgets | Returns all instances of widgets. | window.ReChargeWidget.getWidgets(); |
getWidgetByProductId | Returns a single widget by product ID. | window.ReChargeWidget.getWidgetByProductId(123); |
destroyWidgets | Destroys all widgets. | window.ReChargeWidget.destroyWidgets(); |
currentVariantId | Returns the current variant ID used. | window.ReChargeWidget.currentVariantId; |
enablePreviewMode | Allows you to preview the widget mimicking a live widget and will show whether a widget is published or not. | window.ReChargeWidget.enablePreviewMode(); |
useVariantIdElement | Allows the JS widget to map variant selector elements when it doesn’t work out of the box. | window.ReChargeWidget.useVariantIdElement; |
Additionally, you can listen to events such ReChargeWidget-loaded
and widget:build
to wait for the ReChargeWidget
object to be ready.
API
The following reference outlines client-side calls you can make to the Recharge API for returning information about the widget and product.
// Fetch an individual product
window.ReChargeWidget.api.fetchProduct(id);
// Fetches the store settings
window.ReChargeWidget.api.fetchStoreSettings();
// Fetches the widget settings
window.ReChargeWidget.api.fetchWidgetSettings();
// Fetches all widget data. This includes store settings, widget settings, and products
window.ReChargeWidget.api.fetchWidgetData();
// Fetches all products
window.ReChargeWidget.api.fetchProducts();
// Gets the cart
window.ReChargeWidget.api.getCart();
// Posts items to cart
window.ReChargeWidget.api.postToCart({ id, sellingPlanId, sellingPlanGroupId, isSubscription });
Updated 3 days ago