Insights and Recommend custom hooks

Custom hooks that change the behavior of recommendations and the Insights integration for sending events.

Insights hooks

The following hooks change aspects of the Insights integration for sending click and conversion events.

beforeAlgoliaAnalyticsOptions

Changes options for the Insights library.

Parameters

options · object

Insights options.

Returns

options · object

Modified Insights options.

Examples

Opt out of Insights events

Set userHasOptedOut to true to prevent the integration from sending Insights events.

JavaScript

document.addEventListener("algolia.hooks.initialize", () => {
	algoliaShopify.hooks.registerHook(
		"beforeAlgoliaAnalyticsOptions",
		(options) => {
			return {
				...options,
				userHasOptedOut: true,
			};
		},
	);
});

beforeAddToCartSelector

Changes the CSS selector for the add-to-cart button.

Parameters

selector · string

Default CSS selector for the add-to-cart button: '[name="add"]'.

Returns

selector · string

Modified CSS selector.

Examples

Use a custom add-to-cart selector

Return a custom selector if your theme uses a different add-to-cart button.

JavaScript

document.addEventListener("algolia.hooks.initialize", () => {
	algoliaShopify.hooks.registerHook("beforeAddToCartSelector", (selector) => {
		return "#add-to-cart";
	});
});

Recommend hook

This hook changes the behavior of recommendations from Algolia Recommend.

beforeRecommendHitTemplate

Customize the HTML template that renders the recommendations panel.

Parameters

_defaultTemplate

Default template.

html

Tagged template function for rendering HTML.

item · object

Recommendation item.

Returns

template

Template to render.

Examples

Customize the recommendation item template

Return a custom HTML template to match your theme’s recommendation card layout.

JavaScript

document.addEventListener("algolia.hooks.initialize", () => {
	algoliaShopify.hooks.registerHook(
		"beforeRecommendHitTemplate",
		(_defaultTemplate, html, item) => {
			return html`
        <div
          id="${item.objectID}"
          class="card-wrapper product-card-wrapper underline-links-hover"
        >
          <div class="card card--standard card--media" style="--ratio-percent: 100%;">
            <div
              id="Card--${item.objectID}"
              class="card__inner gradient ratio"
              style="--ratio-percent: 100%;"
            >
              <div class="card__content">
                <div class="card__information">
                  <h3 class="card__heading">
                    <a
                      id="StandardCardNoMediaLink--${item.objectID}"
                      class="full-unstyled-link"
                      aria-labelledby="StandardCardNoMediaLink--${item.objectID} NoMediaStandardBadge--${item.objectID}"
                    >
                      ${item.title}
                    </a>
                  </h3>
                </div>
                <div class="card__badge bottom left"></div>
              </div>
            </div>
          </div>
        </div>
      `;
		},
	);
});

beforeAddToCartSelectorString (deprecated)

This hook is deprecated. Use beforeAddToCartSelector instead.

Changes the CSS selector for the add-to-cart button.

Parameters

_selector · string · default: "'[name=\"add\"]'"

CSS selector.

Returns

selector · string

CSS selector.

See also

• Add custom hooks
• Autocomplete hooks
• InstantSearch hooks