[Shopify Hooks] How can I add compare at price on the Autocomplete menu?

Although the compare_at_price value is already indexed to Algolia, at the moment our Autocomplete menu integration doesn't provide the necessary UI for this implementation.  Adding this value to your Autocomplete menu would require to customize the product template.

For this purpose, you can use the beforeAutocompleteProductTemplate hook.

You can learn about how to set up custom hooks in the following article: [Shopify] How to set up Custom Hooks?

To add compare at price to your Autocomplete product template, you can add the following snippet:

  ${!item._distinct &&
  html`
    <span class="aa-ItemPriceStriked" style="margin-left: 4px; color: red; text-decoration: line-through; font-weight:500;"
      ><span
        >${algoliaShopify.helpers.displayStrikedPrice(
          item.price,
          item.compare_at_price
        )}</span
      ></span
    >
  `}

You can refer to the following example for the full product template:

document.addEventListener("algolia.hooks.initialize", function () {
  algoliaShopify.hooks.registerHook(
    "beforeAutocompleteProductTemplate",
    function (_defaultTemplate, templateOptions, distinct, itemLink, trackSearchAttribution) {
      // Modify default options, then return them
      const { html, item, components } = templateOptions;
      return html`
    <a
      href="${itemLink}"
      class="aa-ItemLink aa-ProductItem"
      onClick="${() => trackSearchAttribution(item)}"
    >
      <div class="aa-ItemContent">
        <div class="aa-ItemPicture aa-ItemPicture--loaded">
          <img
            src="${algoliaShopify.helpers.renderImage(item, 125).src}"
            srcset="${algoliaShopify.helpers.renderImage(item, 125).srcset}"
            sizes="${algoliaShopify.helpers.renderImage(item, 125).sizes}"
            alt="${item.title}"
          />
        </div>
        <div class="aa-ItemContentBody">
          <div class="aa-ItemContentBrand">
            ${
              item.product_type &&
              components.Highlight({ hit: item, attribute: "product_type" })
            }
            ${item.vendor &&
              html`
                <span> by </span>
              `
            }
            ${item.vendor &&
              components.Highlight({ hit: item, attribute: 'vendor' })
            }
          </div>
          <div class="aa-ItemContentTitleWrapper">
            <div class="aa-ItemContentTitle">
              ${components.Highlight({ hit: item, attribute: "title" })}
              <span class="algolia-variant">
                ${algoliaShopify.helpers.variantTitleAddition(item, distinct)}
              </span>
            </div>
          </div>
          <div class="aa-ItemContentPrice">
            <div class="aa-ItemContentPriceCurrent">
              ${algoliaShopify.helpers.displayPrice(item, distinct)}
              ${!item._distinct &&
              html`
                <span class="aa-ItemPriceStriked" style="margin-left: 4px; color: red; text-decoration: line-through; font-weight:500;"
                  ><span
                    >${algoliaShopify.helpers.displayStrikedPrice(
                      item.price,
                      item.compare_at_price
                    )}</span
                  ></span
                >
              `}
            </div>
          </div>
        </div>
      </div>
    </a>
  `;
    }
  );
});