Advanced widget commands

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 article will outline every available method and use cases for each.

Accessing widget methods

You can access advanced JS methods via the browser by invoking ReChargeWidget. You can access this namespace via client-side code, or in the browser console.

Creating new widget

createWidget(config) - Creates and returns a new widget instance.

Example for creating widgets with various 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'] } });

Creating multiple widgets

createWidgets(configs) - Creates multiple widgets. Returns an array.

Example
window.ReChargeWidget.createWidget([{ productId: 123 }, { productId: 12456 }]);

Return all widgets

getWidgets - Returns all instances of widgets.

Example
window.ReChargeWidget.getWidgets();

Return a single widget

getWidgetByProductId - Returns a single widget by product ID.

Example
window.ReChargeWidget.getWidgetByProductId(123);

Delete widgets

destroyWidgets - Destroys all widgets

Example
window.ReChargeWidget.destroyWidgets();

Return current variant ID

currentVariantId- Returns the current variant ID used.

Example
window.ReChargeWidget.currentVariantId;

Preview widget

enablePreviewMode - Allows you to preview the widget mimicking a live widget; will show whether widget is published or not.

Example
window.ReChargeWidget.enablePreviewMode();

API

The following reference outlines client-side calls you can make to our 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 });