TURBO for Developers

To customize JavaScript events, edit the assets/customization.js file. This file allows you to register custom functions for various events and extend or modify their behavior.

Register the Custom Function

Use the boostWidgetIntegration.regisCustomization function to register the custom function. Type definition:

// Function signature
type regisCustomization = (fc: () => void, scope?: string) => void;

The second argument is the scope, indicating when the function should be executed. If the scope is omitted, the function applies to all scopes.

// Register the custom function with the scope 'filter'
boostWidgetIntegration.regisCustomization(afterRender, 'filter');

// Register the custom function to apply to all scopes
boostWidgetIntegration.regisCustomization(afterRender);

Supported scopes

const supportedScopes = ['filter', 'instantSearch', 'recommendation'];

Function naming convention

beforeRender: Executes before the entire UI feature renders.
afterRender: Executes after the entire UI feature renders.
Custom Event Functions: To customize specific event functions provided by the frontend library that support customization, you can: - Add the keyword before or after followed by the event function name in camel case. For example, beforeOnFilterSelect or afterOnFilterSelect.
Register a function with the exact name of the event function to override it.
Additionally, you can write custom functions for adding new events or handling JavaScript logic without following the custom JS function naming rules.

Function Parameters for `before` and `after`

before functions: The first parameter is the context of the block. Subsequent parameters are inherited from the parameters of the event function being handled.
after functions: The first parameter is the context of the block, and the second parameter is the result returned from the event function being handled (if any).

For example:

function afterGetFilterApi(context, data) {
  // In this example, `data` is the result returned from the `getFilterApi` event.
  console.log('custom afterGetFilterApi', context, data);
}
boostWidgetIntegration.regisCustomization(afterGetFilterApi);

Overriding Event Functions

When overriding an event function, the custom event inherits all parameters of the original event.

function getFilterApi(filterUrl, id, addition) {
  // Custom logic here
  console.log('custom getFilterApi', filterUrl, id, addition);
}
boostWidgetIntegration.regisCustomization(getFilterApi);

In this example above, filterUrl, id and addition are the original parameters passed to the original event getFilterApi event.

Example of Registering Custom Events

Create a Custom Function:

Define a function to be executed before or after the rendering of a feature, or customize specific events.

function afterRender() {
  console.log('after render');
  function shake(element, times, distance) {
    for (let i = 0; i < times; i++) {
      setTimeout(() => {
        element.style.transform = `translate(${distance}px, 0)`;
      }, i * 100);

      setTimeout(
        () => {
          element.style.transform = 'translate(0, 0)';
        },
        i * 100 + 50,
      );
    }
  }

  const productItems = document.querySelectorAll('.boost-sd__product-item');
  productItems.forEach((productItem) => {
    shake(productItem, 10, 30);
  });
}
// Register the custom function with the scope 'filter'
boostWidgetIntegration.regisCustomization(afterRender, 'filter');
// Register the custom function to apply to all scopes
boostWidgetIntegration.regisCustomization(afterRender);

To retrieve and check customer login status, use the following function:

function getCustomerId() {
  return (
    window?.__st?.cid ||
    window?.meta?.page?.customerId ||
    window?.ShopifyAnalytics?.meta?.page?.customerId ||
    window?.ShopifyAnalytics?.lib?.user()
  );
}

Custom Parameters for API Requests

To add custom parameters to API requests, edit the theme to include the following script:

<script>
  window.boostSdCustomParams = {
    h_options: 'VN',
    custom: 'custom1',
  };
</script>

The window.boostSdCustomParams object will be automatically added to the parameters of each API request. The keys will be used as request parameters, and the values of the object will be the values of the request parameters.

Others Custom window variables

window.boostSdDisableISWArrow: Disable events arrow keyboard on ISW, default value = false
window.boostSdDisableISWKeyDown: Disable all events keydown on ISW, default value = false
window.boostSDKeepVariantOnHoverOutside: Keep variant on hover, default value = false
window.boostSDKeepVariantOnClickOutside: Keep variant on click, default value = false
window.boostSdDisableScrollToTop: Disable scroll to top, default value = false
window.boostSdDisableScrollToTopAfterFiltered: Only disable scroll to top aftern filtered, default value = false

Customizing Javascript