Event Listeners
These events trigger during the widget lifecycle. Use them to track user interactions, integrate with analytics, or customize widget behavior.
Init
Triggers on widget initialization.
document.addEventListener('rebuy.init', (event) => {
const { widget } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
widget |
object |
The widget instance |
Before Ready
Triggers before the widget is ready.
document.addEventListener('rebuy.beforeReady', (event) => {
const { widget } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
widget |
object |
The widget instance |
Ready
Triggers when the widget is ready for interaction.
document.addEventListener('rebuy.ready', (event) => {
const { widget } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
widget |
object |
The widget instance |
Before Add
Triggers before a product is added from a widget.
document.addEventListener('rebuy.beforeAdd', (event) => {
const { product, widget } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
product |
object |
The product being added |
widget |
object |
The widget instance |
Add
Triggers once a product is added from a widget.
document.addEventListener('rebuy.add', (event) => {
const { product, widget } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
product |
object |
The product that was added |
widget |
object |
The widget instance |
Before Remove
Triggers before a Gift With Purchase widget removes an item from the cart (when the rule is no longer valid), or when a customer removes a product from checkout.
document.addEventListener('rebuy.beforeRemove', (event) => {
const { product, widget } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
product |
object |
The product being removed |
widget |
object |
The widget instance |
Remove
Triggers once a Gift With Purchase widget has removed an item from the cart (when the rule is no longer valid), or when a customer removes a product from checkout.
document.addEventListener('rebuy.remove', (event) => {
const { product, widget } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
product |
object |
The product that was removed |
widget |
object |
The widget instance |
Before Change
Triggered before a widget makes a /change request to the Shopify cart.
document.addEventListener('rebuy.beforeChange', (event) => {
const { item, widget } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
item |
object |
The cart item being changed |
widget |
object |
The widget instance |
Change
Triggered when a widget runs a /change request to the Shopify cart. For example, when a Gift With Purchase widget changes an item to align with updated rules.
document.addEventListener('rebuy.change', (event) => {
const { item, widget } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
item |
object |
The cart item that was changed |
widget |
object |
The widget instance |
Before Decline
Triggers before declining an up-sell or cross-sell offering.
document.addEventListener('rebuy.beforeDecline', (event) => {
const { product, widget } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
product |
object |
The product being declined |
widget |
object |
The widget instance |
Decline
Triggers once an up-sell or cross-sell offering is declined.
document.addEventListener('rebuy.decline', (event) => {
const { product, widget } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
product |
object |
The product that was declined |
widget |
object |
The widget instance |
View
Triggers when a user clicks on a product or "Learn More" link from the widget (product image, title, or learn more button).
document.addEventListener('rebuy.view', (event) => {
const { product, widget } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
product |
object |
The product being viewed |
widget |
object |
The widget instance |
Before Products Change
Triggers before the products being offered change. This happens in cart-based widgets when a customer adds an item, and also on initialization when the widget goes from zero products to having products.
document.addEventListener('rebuy.beforeProductsChange', (event) => {
const { products, widget } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
products |
array |
The current products before the change |
widget |
object |
The widget instance |
Products Change
Triggers once the products being offered change. This happens in cart-based widgets when a customer adds an item, and also on initialization when the widget goes from zero products to having products.
document.addEventListener('rebuy.productsChange', (event) => {
const { products, widget } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
products |
array |
The new array of products |
widget |
object |
The widget instance |
Refresh
Triggers whenever a widget refreshes.
document.addEventListener('rebuy.refresh', (event) => {
const { widget } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
widget |
object |
The widget instance |
Before Show
Triggers before a popup widget displays itself.
document.addEventListener('rebuy.beforeShow', (event) => {
const { widget } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
widget |
object |
The widget instance |
Show
Triggers once a popup widget displays itself.
document.addEventListener('rebuy.show', (event) => {
const { widget } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
widget |
object |
The widget instance |
Before Hide
Triggers before a popup widget hides itself.
document.addEventListener('rebuy.beforeHide', (event) => {
const { widget } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
widget |
object |
The widget instance |
Hide
Triggers once a popup widget hides itself.
document.addEventListener('rebuy.hide', (event) => {
const { widget } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
widget |
object |
The widget instance |
---
title: Event Listeners
excerpt: Handle widget lifecycle events for custom functionality
deprecated: false
hidden: false
metadata:
title: ''
description: ''
robots: index
next:
description: ''
---
These events trigger during the widget lifecycle. Use them to track user interactions, integrate with analytics, or customize widget behavior.
## Init
Triggers on widget initialization.
```javascript
document.addEventListener('rebuy.init', (event) => {
const { widget } = event.detail;
// Your logic here
});
```
### Payload
| Property | Type | Description |
|----------|------|-------------|
| `widget` | object | The widget instance |
## Before Ready
Triggers before the widget is ready.
```javascript
document.addEventListener('rebuy.beforeReady', (event) => {
const { widget } = event.detail;
// Your logic here
});
```
### Payload
| Property | Type | Description |
|----------|------|-------------|
| `widget` | object | The widget instance |
## Ready
Triggers when the widget is ready for interaction.
```javascript
document.addEventListener('rebuy.ready', (event) => {
const { widget } = event.detail;
// Your logic here
});
```
### Payload
| Property | Type | Description |
|----------|------|-------------|
| `widget` | object | The widget instance |
## Before Add
Triggers before a product is added from a widget.
```javascript
document.addEventListener('rebuy.beforeAdd', (event) => {
const { product, widget } = event.detail;
// Your logic here
});
```
### Payload
| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product being added |
| `widget` | object | The widget instance |
## Add
Triggers once a product is added from a widget.
```javascript
document.addEventListener('rebuy.add', (event) => {
const { product, widget } = event.detail;
// Your logic here
});
```
### Payload
| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product that was added |
| `widget` | object | The widget instance |
## Before Remove
Triggers before a Gift With Purchase widget removes an item from the cart (when the rule is no longer valid), or when a customer removes a product from checkout.
```javascript
document.addEventListener('rebuy.beforeRemove', (event) => {
const { product, widget } = event.detail;
// Your logic here
});
```
### Payload
| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product being removed |
| `widget` | object | The widget instance |
## Remove
Triggers once a Gift With Purchase widget has removed an item from the cart (when the rule is no longer valid), or when a customer removes a product from checkout.
```javascript
document.addEventListener('rebuy.remove', (event) => {
const { product, widget } = event.detail;
// Your logic here
});
```
### Payload
| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product that was removed |
| `widget` | object | The widget instance |
## Before Change
Triggered before a widget makes a **/change** request to the Shopify cart.
```javascript
document.addEventListener('rebuy.beforeChange', (event) => {
const { item, widget } = event.detail;
// Your logic here
});
```
### Payload
| Property | Type | Description |
|----------|------|-------------|
| `item` | object | The cart item being changed |
| `widget` | object | The widget instance |
## Change
Triggered when a widget runs a **/change** request to the Shopify cart. For example, when a Gift With Purchase widget changes an item to align with updated rules.
```javascript
document.addEventListener('rebuy.change', (event) => {
const { item, widget } = event.detail;
// Your logic here
});
```
### Payload
| Property | Type | Description |
|----------|------|-------------|
| `item` | object | The cart item that was changed |
| `widget` | object | The widget instance |
## Before Decline
Triggers before declining an up-sell or cross-sell offering.
```javascript
document.addEventListener('rebuy.beforeDecline', (event) => {
const { product, widget } = event.detail;
// Your logic here
});
```
### Payload
| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product being declined |
| `widget` | object | The widget instance |
## Decline
Triggers once an up-sell or cross-sell offering is declined.
```javascript
document.addEventListener('rebuy.decline', (event) => {
const { product, widget } = event.detail;
// Your logic here
});
```
### Payload
| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product that was declined |
| `widget` | object | The widget instance |
## View
Triggers when a user clicks on a product or "Learn More" link from the widget (product image, title, or learn more button).
```javascript
document.addEventListener('rebuy.view', (event) => {
const { product, widget } = event.detail;
// Your logic here
});
```
### Payload
| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product being viewed |
| `widget` | object | The widget instance |
## Before Products Change
Triggers before the products being offered change. This happens in cart-based widgets when a customer adds an item, and also on initialization when the widget goes from zero products to having products.
```javascript
document.addEventListener('rebuy.beforeProductsChange', (event) => {
const { products, widget } = event.detail;
// Your logic here
});
```
### Payload
| Property | Type | Description |
|----------|------|-------------|
| `products` | array | The current products before the change |
| `widget` | object | The widget instance |
## Products Change
Triggers once the products being offered change. This happens in cart-based widgets when a customer adds an item, and also on initialization when the widget goes from zero products to having products.
```javascript
document.addEventListener('rebuy.productsChange', (event) => {
const { products, widget } = event.detail;
// Your logic here
});
```
### Payload
| Property | Type | Description |
|----------|------|-------------|
| `products` | array | The new array of products |
| `widget` | object | The widget instance |
## Refresh
Triggers whenever a widget refreshes.
```javascript
document.addEventListener('rebuy.refresh', (event) => {
const { widget } = event.detail;
// Your logic here
});
```
### Payload
| Property | Type | Description |
|----------|------|-------------|
| `widget` | object | The widget instance |
## Before Show
Triggers before a popup widget displays itself.
```javascript
document.addEventListener('rebuy.beforeShow', (event) => {
const { widget } = event.detail;
// Your logic here
});
```
### Payload
| Property | Type | Description |
|----------|------|-------------|
| `widget` | object | The widget instance |
## Show
Triggers once a popup widget displays itself.
```javascript
document.addEventListener('rebuy.show', (event) => {
const { widget } = event.detail;
// Your logic here
});
```
### Payload
| Property | Type | Description |
|----------|------|-------------|
| `widget` | object | The widget instance |
## Before Hide
Triggers before a popup widget hides itself.
```javascript
document.addEventListener('rebuy.beforeHide', (event) => {
const { widget } = event.detail;
// Your logic here
});
```
### Payload
| Property | Type | Description |
|----------|------|-------------|
| `widget` | object | The widget instance |
## Hide
Triggers once a popup widget hides itself.
```javascript
document.addEventListener('rebuy.hide', (event) => {
const { widget } = event.detail;
// Your logic here
});
```
### Payload
| Property | Type | Description |
|----------|------|-------------|
| `widget` | object | The widget instance |
## Related
- [Cart Event Listeners](cart-event-listeners.md) - Events for the cart object
- [Smart Cart Event Listeners](smart-cart-event-listeners.md) - Events for the Smart Cart UI