Skip to main content

Configuring JS layout

Fast Simon PLP uses advanced view rendering to bring the most optimized user experience. To adjust elements or logic we provide unique hooks you can use to edit the elements we generate.

Getting Started​

PLP hook Flow​

  1. Register a hook using a script tag located in the <head>
  2. PLP will pickup the hook and will execute any code you write there
  3. Hook will run again on every life cycle update

Rules​

  1. Registering a hook with the same event name will override the previous one and will update layout automatically.
  2. You can only manipulate the dom element provided by the hook.
  3. We only update the dom nodes that changed in each life cycle change, so make sure your code doesn't add the same elements twice (see examples)
  4. hook runs per item, data will contain the specific identifier

Register a new hook & execute it​

<script>
function hooks() {
    window.SerpOptions.registerHook('{{ customization_hook_name_1 }}', ({data, element}) => {
        // logic here
    });

    window.SerpOptions.registerHook('{{ customization_hook_name_2 }}', ({data, element}) => {
        // logic here
    });
}

// execution here
if (window.SerpOptions) {
    hooks();
} else {
    window.addEventListener('fast-serp-ready', function () {
        hooks();
    });
}
</script>

Available Hooks​

Event NameDescriptionHook ParamsReturn Params
"serp-product-grid"Life cycle hook: every plp product grid updateobject: {products: Products, element: HTMLElement}void
"serp-filters"Life cycle hook: every plp filters updateobject: {facets: Facet[], element: HTMLElement}void
"serp-quick-view"Life cycle hook: every plp quick view pop up createdobject: {product: Product, index: number, onClose: (reason: CloseQuickViewReason, event: [Event]) => void, mode: [Device], element: HTMLElement}void
"format-serp-size-variant-selector-options"Format size selector options (display text only)stringstring
"serp-fixed-narrow"Life cycle hook: add a fixed narrowvoidHookNarrow
"serp-product-swatches"Life cycle hook: every plp product swatches updateobject: {colors: [colors[]], swatchClick: [Event], showMoreClick: boolean, element: HTMLElement}void
"serp-removable-tags"Life cycle hook: every plp removable tag filter updateobject: {tags: [RemovableTags], element: HTMLElement}void
"serp-top-page"Life cycle hook: every plp top page updatevoidvoid
"serp-main-block"Life cycle hook: every plp main block updatevoidvoid

type references: Typescript Types

HookNarrow.ts
interface HookNarrow{
    [FilterName: string]:  FilterValues[]
}

type FilterValues = string