Event Listeners

Every event below is dispatched on document and is also available as an instance callback under Advanced → Callbacks in the widget editor, where the same arguments arrive as function parameters. Tabs are identified by their position in the widget's tabs list (tab_index, 0-based); a reordered or removed tab changes the positions after it.

Init¶

Triggers on Tabbed Widget initialization, before any tab has loaded, and passes the Widget instance into the event details.

document.addEventListener('rebuy.init', function(event){
    console.log('rebuy.init event', event.detail);
});

Before Ready¶

Triggers before the Tabbed Widget renders and passes the Widget instance into the event details.

document.addEventListener('rebuy.beforeReady', function(event){
    console.log('rebuy.beforeReady event', event.detail);
});

Ready¶

Triggers when the Tabbed Widget is mounted. The widget renders as soon as the first tab with products has loaded, so other tabs may still be loading at this point; use Products Ready to wait for all of them.

document.addEventListener('rebuy.ready', function(event){
    console.log('rebuy.ready event', event.detail);
});

Before Products Change¶

Triggers for each tab just before its products are set, and passes the raw products response along with the Widget instance into the event details. Fires once per tab on page load and again for every tab when the cart changes.

document.addEventListener('rebuy.beforeProductsChange', function(event){
    console.log('rebuy.beforeProductsChange event', event.detail);
});

Products Change¶

Triggers for each tab once its products are set, and passes that tab's products along with the Widget instance into the event details.

document.addEventListener('rebuy.productsChange', function(event){
    console.log('rebuy.productsChange event', event.detail);
});

Products Ready¶

Triggers once every tab has finished loading, on page load and again after each cart-change refetch. Passes the full tabs list (each tab carries its products) along with the Widget instance into the event details, under steps for parity with the Bundle Builder event of the same name.

document.addEventListener('rebuy.productsReady', function(event){
    var tabs = event.detail.steps;
    console.log('rebuy.productsReady event', tabs.map(function(tab){ return tab.title + ': ' + tab.products.length; }));
});

Tab Change¶

Triggers when the active tab changes, whether by click, keyboard navigation, or the widget moving off a tab that emptied after a cart change. It does not fire for the initial selection on page load. Passes the newly active tab, its index, the previous index and the Widget instance into the event details.

document.addEventListener('rebuy.tabChange', function(event){
    var detail = event.detail;
    console.log('rebuy.tabChange event', detail.tab.title, detail.tab_index, 'from', detail.previous_tab_index);
});

Payload¶

The same value is written to line items added from that tab as the _r_tab_index property, alongside _r_tab_title (the tab's title with any markup removed).

Before Add¶

Triggers before a product is added to the cart from any tab and passes the product along with the Widget instance into the event details.

document.addEventListener('rebuy.beforeAdd', function(event){
    console.log('rebuy.beforeAdd event', event.detail);
});

Add¶

Triggers once a product has been added to the cart from any tab and passes the product along with the Widget instance into the event details.

document.addEventListener('rebuy.add', function(event){
    console.log('rebuy.add event', event.detail);
});

View¶

Triggers when a shopper clicks through to a product from a tab (title or image) and passes the product along with the Widget instance into the event details.

document.addEventListener('rebuy.view', function(event){
    console.log('rebuy.view event', event.detail);
});

Selected Variant Change¶

Triggers when the selected variant of a product in a tab changes and passes the variant, the product and the Widget instance into the event details.

document.addEventListener('rebuy.selectedVariantChange', function(event){
    console.log('rebuy.selectedVariantChange event', event.detail);
});