Skip to main content

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​

  1. Register an event listener using a script tag located in the <head>
  2. 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​

Event NameDescriptionEvent Data
"fs-custom-events-product-added-to-cart"Event is fired each time product added to the cartproductData: 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 elementproductData: 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}
"fs-custom-events-product-clicked"Event is fired on product clickproductData: 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 optionproductData: 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}

type references: Typescript Types