Methods
The widget methods are scoped to each widget specifically. The widgets are placed in an array nested within the global Rebuy object so when using methods for a specific widget you can use the Array.find() function (example below) or any other array function that you prefer.
This is not a complete list of the globally available function but the ones that we find most helpful.
All methods below are as if there is a reference to a specific widget such as the snippet below or if the code snippet is in one of the widget callbacks from the widget settings page under the Advanced settings such as the image below.
addSelectedProductsToCart¶
This function is used with the Product Add-Ons widget. This adds the items that are selected from the widget to the cart.
addToCart¶
Makes a post request to Shopify API to add an item to the cart. The first argument expects a product object.
addToReChargeCheckout¶
Used by the Recharge Checkout widget to add the item object passed in as the first argument and will update the checkout UI.
cartItemIsWidgetItem¶
Returns a boolean (true) if the item passed in as an argument has been added by the specified widget that is calling the method.
checkout¶
When this function is called, the customer will be redirected to the checkout page.
compareAtSubtotal¶
Used by the Dynamic Bundle and Product Addons widgets to generate a compare at price if there is a discount for any of the applicable products
declineOffer¶
Used by the Upsell, Thanks You Page and Switch to Subscription popup type widgets when the customer does not want to accept the offer from presented.
destroy¶
This function will destroy and remove the widget, including the root div, at the given index. This function calls hide, detachWidget and unbindEvents.
detachWidget¶
This function removes the widget from the DOM as well as removes it from the array of widget from window.Rebuy.widgets.
getCartProductIDs¶
Returns an array of numbers which are the product ID's of the products in the cart.
getCartVariantIDs¶
Returns an array of numbers which are the variant ID's of the products in the cart.
getVariantIDs¶
Returns an array of numbers which are the variant ID's of the items in the cart. Take an optional boolean (join) as an argument and when true will join as a comma separated string instead of an array of numbers.
getWidgetProducts¶
This method will force the widget to fetch new products via the API, and accepts an optional callback function. This is useful if you'd like to update product or variant IDs associated with the widget and then fetch a new API response. In practice, you could update the variant ID based on a customer's interaction with the product page form and fetch variant-specific recommendations.
// Set Shopify variant IDs
widget.data.shopify_variant_ids = [1234567890];
// Fetch new data with the updated variant IDs
widget.getWidgetProducts(()=>{
console.log("New products fetched!");
});
hasQuantityInputEnabled¶
Returns a boolean (true) when the widgets quantity input setting is enabled.
hasTimer¶
Returns a boolean (true) when the widgets timer setting is enabled.
hide¶
Used by Popup type widgets and will close the widget when this method is called.
isCartBasedWidget¶
Returns a boolean (true) when the widget is a cart based widget as opposed to a product page widget.
productIsSelected¶
Used by the Dynamic Bundle and Product Addons widgets. Returns a boolean (true) when the checkbox is selected.
removeFromCart¶
Original use case: Used by the Shopify checkout and Recharge checkout widget to remove an item from the cart that has been added by the widget. When in checkout, if an item is added by a Rebuy checkout widget then the item will have a (remove) button below it. This way, if the item was added accidentally the customer does not need to navigate back to the cart page to adjust the item that was added.
render¶
When this method is called and the widget should display based off the connected rules then it will render by creating a new Vue instance for the widget.
selectedProductCount¶
Used by the Product Addon and Dynamic bundle widget. Returns a number which is the amount of products that are currently selected.
shouldDisplay¶
Returns a boolean (true) if the widget should display according to the connected data source.
show¶
This method will make a popup type widget display when it is called. The popup widget can be set to trigger manually via the widgets settings object and then could be triggered to display according to custom logic as needed.
--- title: Methods excerpt: JavaScript methods for controlling widget display and cart interactions deprecated: false hidden: false metadata: title: '' description: '' robots: index next: description: '' --- The widget methods are scoped to each widget specifically. The widgets are placed in an array nested within the global Rebuy object so when using methods for a specific widget you can use the Array.find() function (example below) or any other array function that you prefer. This is not a complete list of the globally available function but the ones that we find most helpful. ```javascript title="Find widget" const widget = window.Rebuy.widgets.find(widget => widget.id === "1234"); ``` All methods below are as if there is a reference to a specific widget such as the snippet below or if the code snippet is in one of the widget callbacks from the widget settings page under the Advanced settings such as the image below. ```javascript title="Widget reference" const widget = window.Rebuy.widgets[0]; ```  ## addSelectedProductsToCart This function is used with the Product Add-Ons widget. This adds the items that are selected from the widget to the cart. ```javascript widget.addSelectedProductsToCart(data, callback); ``` ## addToCart Makes a post request to Shopify API to add an item to the cart. The first argument expects a product object. ```javascript widget.addToCart(product, callback); ``` ## addToReChargeCheckout Used by the Recharge Checkout widget to add the item object passed in as the first argument and will update the checkout UI. ```javascript widget.addToReChargeCheckout(product, callback); ``` ## cartItemIsWidgetItem Returns a boolean (true) if the item passed in as an argument has been added by the specified widget that is calling the method. ```javascript widget.cartItemIsWidgetItem(item); ``` ## checkout When this function is called, the customer will be redirected to the checkout page. ```javascript widget.checkout(); ``` ## compareAtSubtotal Used by the **Dynamic Bundle** and **Product Addons** widgets to generate a compare at price if there is a discount for any of the applicable products ```javascript widget.compareAtSubtotal(); ``` ## declineOffer Used by the **Upsell**, **Thanks You Page** and **Switch to Subscription** popup type widgets when the customer does not want to accept the offer from presented. ```javascript widget.declineOffer(product, callback); ``` ## destroy This function will destroy and remove the widget, including the root div, at the given index. This function calls hide, detachWidget and unbindEvents. ```javascript widget.destroy(callback); ``` ## detachWidget This function removes the widget from the DOM as well as removes it from the array of widget from window\.Rebuy.widgets. ```javascript widget.detachWidget(); ``` ## getCartProductIDs Returns an array of numbers which are the product ID's of the products in the cart. ```javascript widget.getCartProductIDs(); ``` ## getCartVariantIDs Returns an array of numbers which are the variant ID's of the products in the cart. ```javascript widget.getCartVariantIDs(); ``` ## getVariantIDs Returns an array of numbers which are the variant ID's of the items in the cart. Take an optional boolean (join) as an argument and when true will join as a comma separated string instead of an array of numbers. ```javascript widget.getVariantIDs(join); ``` ## getWidgetProducts This method will force the widget to fetch new products via the API, and accepts an optional callback function. This is useful if you'd like to update product or variant IDs associated with the widget and then fetch a new API response. In practice, you could update the variant ID based on a customer's interaction with the product page form and fetch variant-specific recommendations. ```coffeescript title="JavaScript" widget.getWidgetProducts(callback): ``` ```coffeescript title="Examples" // Set Shopify variant IDs widget.data.shopify_variant_ids = [1234567890]; // Fetch new data with the updated variant IDs widget.getWidgetProducts(()=>{ console.log("New products fetched!"); }); ``` ## hasQuantityInputEnabled Returns a boolean (true) when the widgets quantity input setting is enabled. ```javascript widget.hasQuantityInputEnabled(); ``` ## hasTimer Returns a boolean (true) when the widgets timer setting is enabled. ```javascript widget.hasTimer(); ``` ## hide Used by **Popup** type widgets and will close the widget when this method is called. ```javascript widget.hide(); ``` ## isCartBasedWidget Returns a boolean (true) when the widget is a cart based widget as opposed to a product page widget. ```javascript widget.isCartBasedWidget(); ``` ## productIsSelected Used by the Dynamic Bundle and Product Addons widgets. Returns a boolean (true) when the checkbox is selected. ```javascript widget.productIsSelected(product); ``` ## removeFromCart Original use case: Used by the Shopify checkout and Recharge checkout widget to remove an item from the cart that has been added by the widget. When in checkout, if an item is added by a Rebuy checkout widget then the item will have a (remove) button below it. This way, if the item was added accidentally the customer does not need to navigate back to the cart page to adjust the item that was added. ```javascript widget.removeFromCart(product, callback); ``` ## render When this method is called and the widget should display based off the connected rules then it will render by creating a new Vue instance for the widget. ```javascript widget.render(); ``` ## selectedProductCount Used by the Product Addon and Dynamic bundle widget. Returns a number which is the amount of products that are currently selected. ```javascript widget.selectedProductCount(); ``` ## shouldDisplay Returns a boolean (true) if the widget should display according to the connected data source. ```javascript widget.shouldDisplay(); ``` ## show This method will make a **popup** type widget display when it is called. The **popup** widget can be set to trigger manually via the widgets settings object and then could be triggered to display according to custom logic as needed. ```javascript widget.show(); ``` ```javascript title="Example" widget.data.pop_up_trigger = "manual"; if ("some custom logic") { widget.show(); } ```