[Magento] How can I add Looking Similar to my Magento store? – Algolia

You can upgrade your the integration to the latest version (or at least 3.14.0) to easily enable and implement this recommendation model from your Magento dashboard navigating to Stores > Configuration > Algolia Search > Recommend Products Settings.

Whilst upgrading is always the recommended action to make sure your application is secure and you take advantage of all of the available features, if you cannot update you would need to implement the "Looking Similar" model via a custom Magento module that extends our own.

Please note that you will need to train the model on the index for which you wish to feature the "Looking Similar" results. You should train the model based on the image attribute image-url that our extension uses to store the primary image data for both simple and configurable products:

As our extension currently ships with 1.8.0 of recommend-js and you will need at minimum 1.9.0 of recommend-js to use Looking Similar components, the newer versions will need to be included as overrides in the custom module.

As per our implementation guide, you can pull these from jsDelivr:

curl -o  ./view/frontend/web/internals/recommend-js.min.js https://cdn.jsdelivr.net/npm/@algolia/recommend-js
curl -o  ./view/frontend/web/internals/recommend.min.js https://cdn.jsdelivr.net/npm/@algolia/recommend

***

For a basic proof-of-concept implementation without CSS styling, you can refer to the steps below. You can also reference the recommendProductsHTML JS template in our extension. Please note that this customization is out-of-scope for our Support team.

1. Add a DOM container for the Looking Similar widget inside your view/frontend/templates/recommend/products.phtml

<div id="lookingSimilar" class="recommend-component"></div>

2. If you choose to override view/frontend/web/recommend.js you will need to duplicate the code that is there. Since our script returns a function, you might consider writing a mixin. Regardless, you will need something similar to the following:

// get the recommend client
const appId = algoliaConfig.applicationId;
const apiKey = algoliaConfig.apiKey;
const recommendClient = recommend(appId, apiKey);

// load the related products
console.log("Loading looking similar...");
recommendJs.lookingSimilar({
    container: '#lookingSimilar',
    objectIDs: config.algoliObjectId,
    recommendClient,
    indexName: algoliaConfig.indexName + '_products',
    headerComponent({html}) {
        return html`<h1>Looking similar</h1>`;
    },
    itemComponent({ html, item }) {
      return html`
        <pre>
          <code>${JSON.stringify(item)}</code>
        </pre>`
      ;
    },
});

Here is the sample output:

Related articles