Event Listeners
These events trigger within the Smart Search lifecycle for both Quick View (instant search overlay) and Results Page (dedicated search results page).
Quick View
Events for the instant search overlay that appears as users type.
Init
Triggers when Smart Search Quick View settings are found and initialization begins.
document.addEventListener('rebuy:smartsearch.quickview.init', (event) => {
const { smartSearch } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
smartSearch |
object |
The Smart Search instance |
Before Ready
Triggers just before Smart Search Quick View becomes ready.
document.addEventListener('rebuy:smartsearch.quickview.beforeReady', () => {
// Your logic here
});
Payload
This event does not include a payload.
Ready
Triggers when Smart Search Quick View is fully initialized and ready.
document.addEventListener('rebuy:smartsearch.quickview.ready', (event) => {
const { smartSearchQuickView, view } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
smartSearchQuickView |
object |
The Quick View instance |
view |
object |
The Vue view instance |
Open
Triggers when the Quick View search overlay opens.
document.addEventListener('rebuy:smartsearch.quickview.open', (event) => {
const { smartSearchQuickView } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
smartSearchQuickView |
object |
The Quick View instance |
Close
Triggers when the Quick View search overlay closes.
document.addEventListener('rebuy:smartsearch.quickview.close', (event) => {
const { smartSearchQuickView } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
smartSearchQuickView |
object |
The Quick View instance |
Before Add
Triggers before a product is added to the cart from Quick View.
document.addEventListener('rebuy:smartsearch.quickview.beforeAdd', (event) => {
const { product, smartSearchQuickView } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
product |
object |
The product being added |
smartSearchQuickView |
object |
The Quick View instance |
Add
Triggers when a product is added to the cart from Quick View.
document.addEventListener('rebuy:smartsearch.quickview.add', (event) => {
const { product, smartSearchQuickView } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
product |
object |
The product that was added |
smartSearchQuickView |
object |
The Quick View instance |
View
Triggers when a user clicks on a product from Quick View (image, title, or learn more link).
document.addEventListener('rebuy:smartsearch.quickview.view', (event) => {
const { product, smartSearchQuickView } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
product |
object |
The product being viewed |
smartSearchQuickView |
object |
The Quick View instance |
Before Products Change
Triggers before search results are updated based on the search term.
document.addEventListener('rebuy:smartsearch.quickview.beforeProductsChange', (event) => {
const { products, smartSearchQuickView } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
products |
array |
The current products before the change |
smartSearchQuickView |
object |
The Quick View instance |
Products Change
Triggers when new search results are returned.
document.addEventListener('rebuy:smartsearch.quickview.productsChange', (event) => {
const { products, smartSearchQuickView } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
products |
array |
The new array of products |
smartSearchQuickView |
object |
The Quick View instance |
Results Page
Events for the dedicated search results page.
Init
Triggers when Smart Search Results Page settings are found and initialization begins.
document.addEventListener('rebuy:smartsearch.resultsPage.init', (event) => {
const { smartSearchResultsPage } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
smartSearchResultsPage |
object |
The Results Page instance |
Before Ready
Triggers just before Smart Search Results Page becomes ready.
document.addEventListener('rebuy:smartsearch.resultsPage.beforeReady', () => {
// Your logic here
});
Payload
This event does not include a payload.
Ready
Triggers when Smart Search Results Page is fully initialized and ready.
document.addEventListener('rebuy:smartsearch.resultsPage.ready', (event) => {
const { smartSearchResultsPage } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
smartSearchResultsPage |
object |
The Results Page instance |
Before Add
Triggers before a product is added to the cart from the Results Page.
document.addEventListener('rebuy:smartsearch.resultsPage.beforeAdd', (event) => {
const { product, smartSearchResultsPage } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
product |
object |
The product being added |
smartSearchResultsPage |
object |
The Results Page instance |
Add
Triggers when a product is added to the cart from the Results Page.
document.addEventListener('rebuy:smartsearch.resultsPage.add', (event) => {
const { product, smartSearchResultsPage } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
product |
object |
The product that was added |
smartSearchResultsPage |
object |
The Results Page instance |
View
Triggers when a user clicks on a product from the Results Page (image, title, or learn more link).
document.addEventListener('rebuy:smartsearch.resultsPage.view', (event) => {
const { product, smartSearchResultsPage } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
product |
object |
The product being viewed |
smartSearchResultsPage |
object |
The Results Page instance |
Before Products Change
Triggers before search results are updated based on the search term.
document.addEventListener('rebuy:smartsearch.resultsPage.beforeProductsChange', (event) => {
const { products, smartSearchResultsPage } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
products |
array |
The current products before the change |
smartSearchResultsPage |
object |
The Results Page instance |
Products Change
Triggers when new search results are returned.
document.addEventListener('rebuy:smartsearch.resultsPage.productsChange', (event) => {
const { products, smartSearchResultsPage } = event.detail;
// Your logic here
});
Payload
| Property |
Type |
Description |
products |
array |
The new array of products |
smartSearchResultsPage |
object |
The Results Page instance |
---
title: Event Listeners
excerpt: Handle Quick View and Results Page search events
deprecated: false
hidden: false
metadata:
title: ''
description: ''
robots: index
next:
description: ''
---
These events trigger within the Smart Search lifecycle for both Quick View (instant search overlay) and Results Page (dedicated search results page).
## Quick View
Events for the instant search overlay that appears as users type.
### Init
Triggers when Smart Search Quick View settings are found and initialization begins.
```javascript
document.addEventListener('rebuy:smartsearch.quickview.init', (event) => {
const { smartSearch } = event.detail;
// Your logic here
});
```
#### Payload
| Property | Type | Description |
|----------|------|-------------|
| `smartSearch` | object | The Smart Search instance |
### Before Ready
Triggers just before Smart Search Quick View becomes ready.
```javascript
document.addEventListener('rebuy:smartsearch.quickview.beforeReady', () => {
// Your logic here
});
```
#### Payload
This event does not include a payload.
### Ready
Triggers when Smart Search Quick View is fully initialized and ready.
```javascript
document.addEventListener('rebuy:smartsearch.quickview.ready', (event) => {
const { smartSearchQuickView, view } = event.detail;
// Your logic here
});
```
#### Payload
| Property | Type | Description |
|----------|------|-------------|
| `smartSearchQuickView` | object | The Quick View instance |
| `view` | object | The Vue view instance |
### Open
Triggers when the Quick View search overlay opens.
```javascript
document.addEventListener('rebuy:smartsearch.quickview.open', (event) => {
const { smartSearchQuickView } = event.detail;
// Your logic here
});
```
#### Payload
| Property | Type | Description |
|----------|------|-------------|
| `smartSearchQuickView` | object | The Quick View instance |
### Close
Triggers when the Quick View search overlay closes.
```javascript
document.addEventListener('rebuy:smartsearch.quickview.close', (event) => {
const { smartSearchQuickView } = event.detail;
// Your logic here
});
```
#### Payload
| Property | Type | Description |
|----------|------|-------------|
| `smartSearchQuickView` | object | The Quick View instance |
### Before Add
Triggers before a product is added to the cart from Quick View.
```javascript
document.addEventListener('rebuy:smartsearch.quickview.beforeAdd', (event) => {
const { product, smartSearchQuickView } = event.detail;
// Your logic here
});
```
#### Payload
| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product being added |
| `smartSearchQuickView` | object | The Quick View instance |
### Add
Triggers when a product is added to the cart from Quick View.
```javascript
document.addEventListener('rebuy:smartsearch.quickview.add', (event) => {
const { product, smartSearchQuickView } = event.detail;
// Your logic here
});
```
#### Payload
| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product that was added |
| `smartSearchQuickView` | object | The Quick View instance |
### View
Triggers when a user clicks on a product from Quick View (image, title, or learn more link).
```javascript
document.addEventListener('rebuy:smartsearch.quickview.view', (event) => {
const { product, smartSearchQuickView } = event.detail;
// Your logic here
});
```
#### Payload
| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product being viewed |
| `smartSearchQuickView` | object | The Quick View instance |
### Before Products Change
Triggers before search results are updated based on the search term.
```javascript
document.addEventListener('rebuy:smartsearch.quickview.beforeProductsChange', (event) => {
const { products, smartSearchQuickView } = event.detail;
// Your logic here
});
```
#### Payload
| Property | Type | Description |
|----------|------|-------------|
| `products` | array | The current products before the change |
| `smartSearchQuickView` | object | The Quick View instance |
### Products Change
Triggers when new search results are returned.
```javascript
document.addEventListener('rebuy:smartsearch.quickview.productsChange', (event) => {
const { products, smartSearchQuickView } = event.detail;
// Your logic here
});
```
#### Payload
| Property | Type | Description |
|----------|------|-------------|
| `products` | array | The new array of products |
| `smartSearchQuickView` | object | The Quick View instance |
---
## Results Page
Events for the dedicated search results page.
### Init
Triggers when Smart Search Results Page settings are found and initialization begins.
```javascript
document.addEventListener('rebuy:smartsearch.resultsPage.init', (event) => {
const { smartSearchResultsPage } = event.detail;
// Your logic here
});
```
#### Payload
| Property | Type | Description |
|----------|------|-------------|
| `smartSearchResultsPage` | object | The Results Page instance |
### Before Ready
Triggers just before Smart Search Results Page becomes ready.
```javascript
document.addEventListener('rebuy:smartsearch.resultsPage.beforeReady', () => {
// Your logic here
});
```
#### Payload
This event does not include a payload.
### Ready
Triggers when Smart Search Results Page is fully initialized and ready.
```javascript
document.addEventListener('rebuy:smartsearch.resultsPage.ready', (event) => {
const { smartSearchResultsPage } = event.detail;
// Your logic here
});
```
#### Payload
| Property | Type | Description |
|----------|------|-------------|
| `smartSearchResultsPage` | object | The Results Page instance |
### Before Add
Triggers before a product is added to the cart from the Results Page.
```javascript
document.addEventListener('rebuy:smartsearch.resultsPage.beforeAdd', (event) => {
const { product, smartSearchResultsPage } = event.detail;
// Your logic here
});
```
#### Payload
| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product being added |
| `smartSearchResultsPage` | object | The Results Page instance |
### Add
Triggers when a product is added to the cart from the Results Page.
```javascript
document.addEventListener('rebuy:smartsearch.resultsPage.add', (event) => {
const { product, smartSearchResultsPage } = event.detail;
// Your logic here
});
```
#### Payload
| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product that was added |
| `smartSearchResultsPage` | object | The Results Page instance |
### View
Triggers when a user clicks on a product from the Results Page (image, title, or learn more link).
```javascript
document.addEventListener('rebuy:smartsearch.resultsPage.view', (event) => {
const { product, smartSearchResultsPage } = event.detail;
// Your logic here
});
```
#### Payload
| Property | Type | Description |
|----------|------|-------------|
| `product` | object | The product being viewed |
| `smartSearchResultsPage` | object | The Results Page instance |
### Before Products Change
Triggers before search results are updated based on the search term.
```javascript
document.addEventListener('rebuy:smartsearch.resultsPage.beforeProductsChange', (event) => {
const { products, smartSearchResultsPage } = event.detail;
// Your logic here
});
```
#### Payload
| Property | Type | Description |
|----------|------|-------------|
| `products` | array | The current products before the change |
| `smartSearchResultsPage` | object | The Results Page instance |
### Products Change
Triggers when new search results are returned.
```javascript
document.addEventListener('rebuy:smartsearch.resultsPage.productsChange', (event) => {
const { products, smartSearchResultsPage } = event.detail;
// Your logic here
});
```
#### Payload
| Property | Type | Description |
|----------|------|-------------|
| `products` | array | The new array of products |
| `smartSearchResultsPage` | object | The Results Page instance |
## Related
- [Widget Event Listeners](widget-event-listeners.md) - Events for recommendation widgets
- [Cart Event Listeners](cart-event-listeners.md) - Events for the cart object