Event Listeners

These events fire during the Smart Collections lifecycle. Use them to track user interactions, integrate with analytics, or customize collection behavior.

Init¶

Triggers when the Smart Collections module initializes.

document.addEventListener('rebuy:smartcollections.init', (event) => {
  const { smartCollections } = event.detail;
  // Your logic here
});

Payload¶

Before Ready¶

Triggers just before Smart Collections becomes ready. Use this to set up any configuration before the collection renders.

document.addEventListener('rebuy:smartcollections.beforeReady', () => {
  // Your logic here
});

Payload¶

This event does not include a payload.

Ready¶

Triggers when Smart Collections is fully initialized and ready for interaction.

document.addEventListener('rebuy:smartcollections.ready', (event) => {
  const { smartCollections } = event.detail;
  // Your logic here
});

Payload¶

Use Cases¶

• Initialize third-party integrations after Smart Collections is ready
• Track page view analytics for collection pages

Before Add¶

Triggers just before a product is added to the cart from Smart Collections. Use this to modify the add behavior or show confirmation dialogs.

document.addEventListener('rebuy:smartcollections.beforeAdd', (event) => {
  const { product, smartCollections } = event.detail;
  // Your logic here
});

Payload¶

Add¶

Triggers when a product is added to the cart from Smart Collections.

document.addEventListener('rebuy:smartcollections.add', (event) => {
  const { product, smartCollections } = event.detail;
  // Your logic here
});

Payload¶

Use Cases¶

• Track add-to-cart analytics for products added via Smart Collections
• Show confirmation messages after cart additions
• Trigger upsell modals based on added products

View¶

Triggers when a product is viewed within Smart Collections.

document.addEventListener('rebuy:smartcollections.view', (event) => {
  const { product, smartCollections } = event.detail;
  // Your logic here
});

Payload¶

Use Cases¶

• Track product impressions for analytics
• Implement lazy loading of product details

Before Products Change¶

Triggers just before the products in the collection are updated (e.g., from filtering or sorting).

document.addEventListener('rebuy:smartcollections.beforeProductsChange', (event) => {
  const { products, smartCollections } = event.detail;
  // Your logic here
});

Payload¶

Products Change¶

Triggers when the products displayed in the collection change (e.g., after filtering, sorting, or pagination).

document.addEventListener('rebuy:smartcollections.productsChange', (event) => {
  const { products, smartCollections } = event.detail;
  // Your logic here
});

Payload¶

Use Cases¶

• Update analytics when filter or sort changes
• Re-initialize third-party tools that depend on product DOM elements
• Track collection interaction patterns

Event Timing¶

Related¶

• Smart Collections Overview
• Custom Templates
• Active Settings
• Product List