Algolia Recommend for Magento

​

Before you begin

• Algolia extension for Magento Open Source and Adobe Commerce version 3.8 or later.
• You’re sending click and conversion events. Algolia Recommend relies on click and conversion events to keep improving its recommendations. You can also upload events from a CSV file.
• You have trained Recommend models. You can check the status of your models on the Algolia Recommend page in the dashboard, in the Existing models section.

• Set up Algolia Recommend
• Algolia Recommend for Adobe Commerce (blog)

​

Configure Algolia Recommend for Magento

• Frequently bought together
• Related items
• Trending items and Trending facets value
• Looking similar

​

Frequently bought together

• Set Enable on PDP to Yes to show recommendations from this model on product detail pages below the main product information. If you use recommendations from Algolia’s Frequently bought together model, remove the default upsell products from the interface.
• Set Enable on Cart Page to Yes to show Frequently bought together recommendations on the shopping cart page below the More choices section.

​

Remove the Magento upsell products block

​

Related items

• Set Enable on PDP to Yes to show recommendations from this model on product detail pages. The recommendations appear below the main product information after the Frequently bought together recommendations (if active). If you use recommendations from Algolia’s Related items model, remove the default related items from the interface.
• Set Enable on Cart Page to Yes to show Related items recommendations on the shopping cart page.

​

Remove the Magento related items block

​

Trending items

• Set Enable on PDP to Yes to show the recommendations from the Trending items model on product detail pages. The recommendations appear below the main product information after the Frequently bought together and Related items recommendations (if active).
• Set Enable On Cart Page to Yes to show the Trending items recommendations on the shopping cart page.
• Set Enable Trending Items Widgets to Yes to show the Trending items recommendations on CMS pages that have the Trending items widget.

​

Configure the Trending items widget

• Number of Trending Items. Select the number of recommendations you want to show in the widget.
• Facet name. Select a facet for filtering the recommendations. For example, color.
• Facet value. Select a value that matches the facet name. For example, if you select color as the facet name, selecting blue shows only blue products in your recommendations.

​

Looking similar

• Set Enable on PDP to Yes to show similar-looking items at the bottom of the product detail page.
• Set Enable On Cart Page to Yes to show similar-looking items on the cart page.
• Set Enable Looking Similar Widgets to Yes to show similar-looking items on the CMS or other pages that support widgets.

​

Configure Looking similar widgets

• Number of Looking Similar Items. Select the number of similar-looking items you want to show in the widget. Default is 6.
• Product IDs (required). Enter product IDs (separated by commas).

​

Change the layout of Algolia Recommend models

​

Frequently bought together, Related items and Trending items

​

Add fallback recommendation

• Related items
• Trending items

recommendJs.relatedProducts({
  container: "#relatedProducts",
  recommendClient,
  indexName,
  objectIDs: currentObjectID,
  maxRecommendations: this.config.recommend.limitRelatedProducts,
  fallbackParameters: {
    numericFilters: ["ordered_qty > 2"],
  },
  itemComponent({ item, createElement, Fragment }) {
    if (config.recommend.isAddToCartEnabledInRelatedProduct) {
      return renderRecommendDataWithAddToCart(item, createElement);
    } else {
      return renderRecommendData(item, createElement);
    }
  },
});

• Frequently bought together

recommendJs.frequentlyBoughtTogether({
  container: "#frequentlyBoughtTogether",
  recommendClient,
  indexName,
  objectIDs: config.algoliObjectId,
  maxRecommendations: algoliaConfig.recommend.limitFBTProducts,
  transformItems: function (items) {
    return items.map((item, index) => ({
      ...item,
      position: index + 1,
    }));
  },
  headerComponent({ html }) {
    return recommendProductsHtml.getHeaderHtml(
      html,
      algoliaConfig.recommend.FBTTitle,
    );
  },
  itemComponent({ item, html }) {
    return recommendProductsHtml.getItemHtml(
      item,
      html,
      algoliaConfig.recommend.isAddToCartEnabledInFBT,
    );
  },
  fallbackComponent() {
    recommendJs.relatedProducts({
      container: "#frequentlyBoughtTogether",
      recommendClient,
      indexName,
      objectIDs: config.algoliObjectId,
      maxRecommendations: algoliaConfig.recommend.limitRelatedProducts,
      transformItems: function (items) {
        return items.map((item, index) => ({
          ...item,
          position: index + 1,
        }));
      },
      headerComponent({ html }) {
        return recommendProductsHtml.getHeaderHtml(
          html,
          algoliaConfig.recommend.relatedProductsTitle,
        );
      },
      itemComponent({ item, html }) {
        return recommendProductsHtml.getItemHtml(
          item,
          html,
          algoliaConfig.recommend.isAddToCartEnabledInRelatedProduct,
        );
      },
    });
  },
});

​

Customize styles