Skip to main content

Configuring JS layout

Fast Simon Upsell & Cross-sell 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​

Upsell & Cross-sell hook Flow​

  1. Register a hook using a script tag located in the <head>
  2. Upsell & Cross-sell 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.FastRecommendationWidget.registerHook('{{ customization_hook_name_1 }}', ({data, element}) => {
        // logic here
    });

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

// execution here
if (window.FastRecommendationWidget) {
    hooks();
} else {
    window.addEventListener('fast-upsell-cross-sell-ready', function () {
        hooks();
    });
}
</script>

Available Hooks​

Event NameDescriptionHook ParamsReturn Params
"upsell-cross-sell-products"Life cycle hook: every widget updateobject: {products: [Products], element: [HTMLElement]}void
"format-serp-size-variant-selector-options"Format size selector options (display text only)StringString
"serp-product-swatches"Life cycle hook: every upsell & cross-sell product swatches updatevoidvoid

type references: Typescript Types