add Looking Similar Widget

Author: damcou

Block/Configuration.php

@@ -222,6 +222,7 @@ public function getConfiguration()
                 'enabledRelated' => $config->isRecommendRelatedProductsEnabled(),
                 'enabledFBTInCart' => $config->isRecommendFrequentlyBroughtTogetherEnabledOnCartPage(),
                 'enabledRelatedInCart' => $config->isRecommendRelatedProductsEnabledOnCartPage(),
+                'enabledLookingSimilar' => $config->isRecommendLookingSimilarEnabled(),
                 'limitFBTProducts' => $config->getNumberOfFrequentlyBoughtTogetherProducts(),
                 'limitRelatedProducts' => $config->getNumberOfRelatedProducts(),
                 'limitTrendingItems' => $config->getNumberOfTrendingItems(),

Block/Widget/LookingSimilar.php

@@ -0,0 +1,56 @@
+<?php
+
+namespace Algolia\AlgoliaSearch\Block\Widget;
+
+use Magento\Framework\Math\Random;
+use Magento\Framework\View\Element\Template;
+use Magento\Framework\View\Element\Template\Context;
+use Magento\Widget\Block\BlockInterface;
+use Algolia\AlgoliaSearch\Helper\ConfigHelper;
+
+class LookingSimilar extends Template implements BlockInterface
+{
+    /**
+     * @var ConfigHelper
+     */
+    protected $configHelper;
+
+    protected $_template = 'recommend/widget/looking-similar.phtml';
+
+    /**
+     * @param Context $context
+     * @param ConfigHelper $configHelper
+     * @param Random $mathRandom
+     * @param array $data
+     */
+    public function __construct(
+        Context $context,
+        ConfigHelper $configHelper,
+        Random $mathRandom,
+        array $data = []
+    ) {
+        $this->mathRandom = $mathRandom;
+        $this->configHelper = $configHelper;
+        parent::__construct(
+            $context,
+            $data
+        );
+    }
+
+    /**
+     * @return string
+     * @throws \Magento\Framework\Exception\LocalizedException
+     */
+    public function generateUniqueToken()
+    {
+        return $this->mathRandom->getRandomString(5);
+    }
+
+    /**
+     * @return int
+     */
+    public function isLookingSimilarEnabled()
+    {
+        return $this->configHelper->isRecommendLookingSimilarEnabled();
+    }
+}

Helper/ConfigHelper.php

@@ -127,6 +127,7 @@ class ConfigHelper
     protected const IS_REMOVE_RELATED_PRODUCTS_BLOCK = 'algoliasearch_recommend/recommend/related_product/is_remove_core_related_products_block';
     protected const IS_REMOVE_UPSELL_PRODUCTS_BLOCK = 'algoliasearch_recommend/recommend/frequently_bought_together/is_remove_core_upsell_products_block';
     protected const IS_RECOMMEND_TRENDING_ITEMS_ENABLED = 'algoliasearch_recommend/recommend/trends_item/is_trending_items_enabled';
+    protected const IS_RECOMMEND_LOOKING_SIMILAR_ENABLED = 'algoliasearch_recommend/recommend/looking_similar/is_looking_similar_enabled';
     protected const NUM_OF_LOOKING_SIMILAR = 'algoliasearch_recommend/recommend/looking_similar/num_of_products';
     protected const NUM_OF_TRENDING_ITEMS = 'algoliasearch_recommend/recommend/trends_item/num_of_trending_items';
     protected const TREND_ITEMS_FACET_NAME = 'algoliasearch_recommend/recommend/trends_item/facet_name';
@@ -851,6 +852,21 @@ public function getTrendingItemsFacetValue($storeId = null)
         );
     }
 
+    /**
+     * Determines whether Looking Similar enabled (for widgets))
+     *
+     * @param $storeId
+     * @return int
+     */
+    public function isRecommendLookingSimilarEnabled($storeId = null)
+    {
+        return (int)$this->configInterface->getValue(
+            self::IS_RECOMMEND_LOOKING_SIMILAR_ENABLED,
+            ScopeInterface::SCOPE_STORE,
+            $storeId
+        );
+    }
+
     /**
      * Determines whether Looking Similar enabled on PDP
      *

ViewModel/Recommend/ProductView.php

@@ -67,7 +67,8 @@ public function getAlgoliaRecommendConfiguration()
         return [
             'enabledFBT' => $this->configHelper->isRecommendFrequentlyBroughtTogetherEnabled(),
             'enabledRelated' => $this->configHelper->isRecommendRelatedProductsEnabled(),
-            'isTrendItemsEnabledInPDP' => $this->configHelper->isTrendItemsEnabledInPDP()
+            'isTrendItemsEnabledInPDP' => $this->configHelper->isTrendItemsEnabledInPDP(),
+            'isLookingSimilarEnabledInPDP' => $this->configHelper->isLookingSimilarEnabledOnPDP()
         ];
     }
 }

etc/widget.xml

@@ -19,4 +19,15 @@
             </parameter>
         </parameters>
     </widget>
+    <widget class="Algolia\AlgoliaSearch\Block\Widget\LookingSimilar" id="algoliasearch_looking_similar_item">
+        <label>Algolia Looking Similar Items</label>
+        <description>You can allow Algolia Looking Similar items to appear anywhere you want</description>
+        <parameters>
+            <parameter name="numOfLookingSimilarItem" sort_order="10" visible="true" xsi:type="text">
+                <label>Number Of Looking Similar Items</label>
+                <description>How many products do you want to display in the Looking Similar Items?.</description>
+                <value>6</value>
+            </parameter>
+        </parameters>
+    </widget>
 </widgets>

view/frontend/templates/recommend/products.phtml

@@ -12,7 +12,7 @@ $recommendConfig = $viewModel->getAlgoliaRecommendConfiguration();
 if (!empty($recommendConfig['enabledFBT'])
     || !empty($recommendConfig['enabledRelated'])
     || !empty($recommendConfig['isTrendItemsEnabledInPDP'])
-    || !empty($recommendConfig['isLookingSimilarEnabledOnPDP'])):
+    || !empty($recommendConfig['isLookingSimilarEnabledInPDP'])):
     $product = $viewModel->getProduct(); ?>
     <div id="frequentlyBoughtTogether" class="recommend-component"></div>
     <div id="relatedProducts" class="recommend-component"></div>

view/frontend/templates/recommend/widget/looking-similar.phtml

@@ -0,0 +1,24 @@
+<?php
+/** @var \Algolia\AlgoliaSearch\Block\Widget\LookingSimilar $block */
+$isEnabled = $block->isLookingSimilarEnabled();
+if ($isEnabled):
+    $lsContainer =  'lsItems' . $block->generateUniqueToken(); ?>
+    <div id="<?= $lsContainer ?>" class="lsItem recommend-component"></div>
+    <script type="text/x-magento-init">
+        {
+            "*": {
+                "Algolia_AlgoliaSearch/recommend" : {
+                    "recommendLSContainer" : "<?= $lsContainer ?>",
+                    "numOfLookingSimilarItem" : "<?= $block->getData('numOfLookingSimilarItem') ?>",
+                }
+            }
+        }
+    </script>
+    <script type="text/x-magento-init">
+        {
+            "[data-role=tocart-form]": {
+                "catalogAddToCart": {}
+            }
+        }
+    </script>
+<?php endif; ?>

view/frontend/web/recommend.js

@@ -197,6 +197,38 @@ define([
                         );
                     }
                 });
+            } else if (
+                algoliaConfig.recommend.enabledLookingSimilar &&
+                typeof config.recommendLSContainer !== 'undefined'
+            ){
+                let containerValue = '#' + config.recommendLSContainer;
+                recommendJs.lookingSimilar({
+                    container: containerValue,
+                    recommendClient,
+                    indexName,
+                    maxRecommendations: config.numOfLookingSimilarItem
+                        ? parseInt(config.numOfLookingSimilarItem)
+                        : algoliaConfig.recommend.limitLookingSimilar,
+                    transformItems    : function (items) {
+                        return items.map((item, index) => ({
+                            ...item,
+                            position: index + 1,
+                        }));
+                    },
+                    headerComponent({html}) {
+                        return recommendProductsHtml.getHeaderHtml(
+                            html,
+                            algoliaConfig.recommend.lookingSimilarTitle
+                        );
+                    },
+                    itemComponent({item, html}) {
+                        return recommendProductsHtml.getItemHtml(
+                            item,
+                            html,
+                            algoliaConfig.recommend.isAddToCartEnabledInLookingSimilar
+                        );
+                    },
+                });
             }
         });
     };