Updated position in recommend

Author: mohitalgolia

view/frontend/web/internals/template/recommend/products.js

@@ -1,15 +1,14 @@
 define([], function () {
     return {
-        getItemHtml: function (item, html, addTocart) {
+        getItemHtml: function (item, html, addTocart, index) {
             let correctFKey = getCookie('form_key');
             let action = algoliaConfig.recommend.addToCartParams.action + 'product/' + item.objectID + '/';
             if(correctFKey != "" && algoliaConfig.recommend.addToCartParams.formKey != correctFKey) {
-                config.recommend.addToCartParams.formKey = correctFKey;
+                algoliaConfig.recommend.addToCartParams.formKey = correctFKey;
             }
-            this.config = algoliaConfig;
             this.defaultIndexName = algoliaConfig.indexName + '_products';
             return  html`<div class="product-details">
-                <a class="recommend-item product-url" href="${item.url}" data-objectid=${item.objectID}  data-index=${this.defaultIndexName}>
+                <a class="recommend-item product-url" href="${item.url}" data-objectid=${item.objectID} data-position=${item.position}  data-index=${this.defaultIndexName}>
                     <img class="product-img" src="${item.image_url}" alt="${item.name}"/>
                     <p class="product-name">${item.name}</p>
                     ${addTocart && html`

view/frontend/web/recommend.js

@@ -10,7 +10,7 @@ define([
     if (typeof algoliaConfig === 'undefined') {
         return;
     }
-    
+
     return function (config, element) {
         algoliaBundle.$(function ($) {
             this.defaultIndexName = algoliaConfig.indexName + '_products';
@@ -27,6 +27,12 @@ define([
                         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);
                         },
@@ -42,6 +48,12 @@ define([
                         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);
                         },
@@ -60,6 +72,12 @@ define([
                     recommendClient,
                     indexName,
                     maxRecommendations: algoliaConfig.recommend.limitTrendingItems,
+                    transformItems:function (items) {
+                        return items.map((item, index) => ({
+                            ...item,
+                            position: index + 1,
+                        }));
+                    },
                     headerComponent({html}) {
                         return recommendProductsHtml.getHeaderHtml(html,algoliaConfig.recommend.trendingItemsTitle);
                     },
@@ -76,6 +94,12 @@ define([
                     recommendClient,
                     indexName,
                     maxRecommendations: config.numOfTrendsItem ? parseInt(config.numOfTrendsItem) : algoliaConfig.recommend.limitTrendingItems,
+                    transformItems:function (items) {
+                        return items.map((item, index) => ({
+                            ...item,
+                            position: index + 1,
+                        }));
+                    },
                     headerComponent({html}) {
                         return recommendProductsHtml.getHeaderHtml(html,algoliaConfig.recommend.trendingItemsTitle);
                     },