Search & Merchandising JS supports a couple of events to hook into the specific moments.
Search Lifecycle events
General
For full API response, see Search API structure.
twn.request.started
Request to fetch search results started.
twn.request.success
Request to fetch search results succeeded.
interface RequestSuccessEvent {
// see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
data: IApiNavigation;
}
window["twn-starter-config"].on = {
// ...
'twn.request.success': function (event: RequestSuccessEvent) {
// do something
}
});
Examples:
twn.request.failed
Request to fetch search results failed.
twn.request.completed
Request to fetch search results completed. This executes for both success and failed requests.
twn.container.open
Search results container is opened.
twn.container.close
Search results container is closed.
Navigation Lifecycle events
Note: these event only works with window["twn-starter-config"].auto = true;
twn.request.navigation.started
Request to fetch navigation results started.
interface NavigationRequestSuccessEvent {
// see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
data: IApiNavigation;
}
window["twn-starter-config"].on = {
// ...
'twn.request.navigation.success': function (event: NavigationRequestSuccessEvent) {
const products = event.data.items.map(o => o.itemno);
fetch('http://api.yourshop.com/pricing/', { method: 'POST', body: JSON.stringify(products)
}).then(function(result: { itemno: string; price: number; }[]){
result.forEach(function(item){
var element = document.querySelector('.twn-starter__products-item [data-item-id="' + itemno + '"] [data-property="price"]');
element.innerHTML = price;
});
});
}
});
twn.request.navigation.success
Request to fetch navigation results succeeded.
twn.request.navigation.failed
Request to fetch navigation results failed.
twn.request.navigation.completed
Request to fetch navigation results completed. This executes for both success and failed requests.
twn.container.navigation.open
Navigation results container is opened.
twn.container.navigation.close
Navigationresults container is closed.
Functional events
twn.selection.change
Selection in search hash changed.
For example when a filter is added, removed or changed.
twn.selection.navigation.change
Selection in navigation hash changed.
For example when a filter is added, removed or changed.
Product specific events
After default results are displayed, these regular product events can be used.
Detailed examples:
- Push a product to Google Tag Manager when it is visible.
- Push a product to Google Tag Manager when it is clicked
twn.product.visible
Product tile is visible on the screen (at least 50%).
type ProductVisibleEvent {
// see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
data: IApiProduct;
}
window["twn-starter-config"].on = {
// ...
'twn.product.visible': function (event: ProductVisibleEvent) {
const item = event.data;
// do something
}
});
For a detailed example, see Push a product to Google Tag Manager when it is visible.
twn.product.click
A link on a product tile has been hit.
type ProductClickEvent {
// see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
data: IApiProduct;
}
window["twn-starter-config"].on = {
// ...
'twn.product.click': function (event: ProductClickEvent) {
const item = event.data;
// do something
}
});
For a detailed example, see Push a product to Google Tag Manager when it is clicked
twn.add-to-cart
Add to cart button is clicked.
type AddToCartEvent {
// see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
data: IApiProduct;
quantity: number;
}
window["twn-starter-config"].on = {
// ...
'twn.add-to-cart': function (event: AddToCartEvent) {
const item = event.data;
// add item to cart
}
});
For detailed example, see Add to cart.
twn.add-to-favorites
Add to favorites button is clicked.
type AddToFavoritesEvent {
// see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
data: IApiProduct;
}
window["twn-starter-config"].on = {
// ...
'twn.add-to-favorites': function (event: AddToFavoritesEvent) {
const item = event.data;
// add item to favorites/wishlist
}
});
For detailed example, see Add to favorites.