Custom Events
Fast Simon PLP dispatching custom events for any use like analytics and more. This way you are able to targeting important events in the moment they fired.
Getting Started
PLP custom events
- Register an event listener using a script tag located in the
<head> - Each time an event is fired within the PLP, we will dispatch the custom event including all the relevant data.
Register a new custom event listener & run a callback once fired
<script>
function productAddedToCartCallback(productData) {
// ...code here
}
window.addEventListener('fs-custom-events-product-added-to-cart', (e) => {
productAddedToCartCallback(e.detail);
});
</script>
Available Events To Register
| Event Name | Description | Event Data |
|---|---|---|
| "fs-custom-events-product-added-to-cart" | Event is fired each time product added to the cart | productData: Product |
| "fs-custom-events-pagination-change" | Event is fired on each pagination change | {prevPage: number , currentPage: number} |
| "fs-custom-events-filter-clicked" | Event is fired on each filter click | {filterName: string , value: {min: number, max: number} } OR {filterName: string , value: string} |
| "fs-custom-events-product-on-hover" | Event is fired when hovering a product element | productData: Product |
| "fs-custom-events-product-swatch-on-hover" | Event is fired when hovering a swatch element | {alt: AlternativeProduct[], image: string, sku: string, redirectURL: string, title: string, swatchElement: Element, variants: Variants } |
| "fs-custom-events-product-clicked" | Event is fired on product click | productData: Product |
| "fs-custom-events-add-to-cart-response" | Event is fired when getting Shopify AddToCart response | {cart: AddToCartResponse} |
| "fs-custom-events-quick-view-btn-clicked" | Event is fired when clicking on quickview button | {productId: string, productURL: string } |
| "fs-custom-events-product-quick-add-clicked" | Event is fired when clicking on variant elemnt option | productData: Product |
| "fs-custom-events-product-swatch-on-click" | Event is fired when clicking on color swatch option button | {alt: AlternativeProduct[], image: string, sku: string, redirectURL: string, title: string} |
| "fs-custom-events-filter-search-box-changed" | Event is fired when search term in filter search box changed | {query: string} |
Fired Registered Event
<script>
window.dispatchEvent(new CustomEvent('change-number-of-products-per-row', {
detail: {
numberOfColumns: 4
}
}))
document.dispatchEvent(new CustomEvent('send-fast-simon-params', {
detail: {
narrow: {"Tag": new Set(chooseTagArray),"Price_from_to":new Set(PriceRange)}
}
}));
</script>
Register Events On App Level
| Event Name | Description | Event Data |
|---|---|---|
| "change-number-of-products-per-row" | Event to change grid number of products per row | detail : {numberOfColumns: int} |
| "send-fast-simon-params" | Narrow Events | detail : {filterName: Set(Facets)} |
type references: Typescript Types