Guides
API ReferenceTheme Engine ReferenceJavaScript SDK ReferenceRecharge Help Center

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:

MethodDescriptionExample
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 }]);
getWidgetsReturns all instances of widgets.window.ReChargeWidget.getWidgets();
getWidgetByProductIdReturns a single widget by product ID.window.ReChargeWidget.getWidgetByProductId(123);
destroyWidgetsDestroys all widgets.window.ReChargeWidget.destroyWidgets();
currentVariantIdReturns the current variant ID used.window.ReChargeWidget.currentVariantId;
enablePreviewModeAllows you to preview the widget mimicking a live widget and will show whether a widget is published or not.window.ReChargeWidget.enablePreviewMode();
useVariantIdElementAllows 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 1 month ago

Need Help? Contact Us