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.
This guide describes the legacy Recharge JavaScript subscription widget, which is no longer officially supported or under active development. It remains available for merchants who continue to use the legacy widget. Recharge recommends using the current Recharge subscription widget for new implementations. Recharge Support may have limited ability to troubleshoot issues related to the legacy widget.
The article provides advanced customization options for the Legacy Javascript Widget, including modifying widget behavior, styling, and functionality to enhance the customer experience.
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 about 2 hours ago