lookingSimilar styling issue resolved

Author: mrahman3177

Block/Configuration.php

@@ -225,6 +225,7 @@ public function getConfiguration()
                 'limitFBTProducts' => $config->getNumberOfFrequentlyBoughtTogetherProducts(),
                 'limitRelatedProducts' => $config->getNumberOfRelatedProducts(),
                 'limitTrendingItems' => $config->getNumberOfTrendingItems(),
+                'limitLookingSimilar' => $config->getNumberOfLookingSimilar(),
                 'enabledTrendItems' => $config->isRecommendTrendingItemsEnabled(),
                 'trendItemFacetName' => $config->getTrendingItemsFacetName(),
                 'trendItemFacetValue' => $config->getTrendingItemsFacetValue(),

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 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';
     protected const TREND_ITEMS_FACET_VALUE = 'algoliasearch_recommend/recommend/trends_item/facet_value';
@@ -809,6 +810,21 @@ public function getNumberOfTrendingItems($storeId = null)
         );
     }
 
+    /**
+     * Returns number of looking similar products to display
+     *
+     * @param $storeId
+     * @return int
+     */
+    public function getNumberOfLookingSimilar($storeId = null)
+    {
+        return (int)$this->configInterface->getValue(
+            self::NUM_OF_LOOKING_SIMILAR,
+            ScopeInterface::SCOPE_STORE,
+            $storeId
+        );
+    }
+
     /**
      * @param $storeId
      * @return mixed

view/frontend/templates/recommend/products.phtml

@@ -17,7 +17,7 @@ if (!empty($recommendConfig['enabledFBT'])
     <div id="frequentlyBoughtTogether" class="recommend-component"></div>
     <div id="relatedProducts" class="recommend-component"></div>
     <div id="trendItems" class="trendsItem recommend-component"></div>
-    <div id="looking-similar" class="looking-similar recommend-component"></div>
+    <div id="lookingSimilar" class="lookingSimilar recommend-component"></div>
     <script type="text/x-magento-init">
         {
             "*": {

view/frontend/templates/recommend/products/frequently-bought-together.phtml

@@ -14,20 +14,29 @@
 .recommend-component {
     margin-bottom: 80px;
 }
-#relatedProducts .auc-Recommend-list, #frequentlyBoughtTogether .auc-Recommend-list, .trendsItem  .auc-Recommend-list{
+
+#relatedProducts .auc-Recommend-list,
+#frequentlyBoughtTogether .auc-Recommend-list,
+#lookingSimilar .auc-Recommend-list,
+.trendsItem .auc-Recommend-list {
     flex-wrap: wrap;
     justify-content: flex-start;
 }
-#relatedProducts li, #frequentlyBoughtTogether li, .trendsItem li {
+#relatedProducts li, #frequentlyBoughtTogether li, #lookingSimilar li, .trendsItem li {
     display: flex;
     justify-content: center;
     width: 16.66666667%;
 }
-#relatedProducts li a, #frequentlyBoughtTogether li a, .trendsItem li a {
+#relatedProducts li a, #frequentlyBoughtTogether li a, #lookingSimilar li a, .trendsItem li a {
     color: inherit;
     display: block;
 }
-#relatedProducts .product-name, #frequentlyBoughtTogether .product-name, #trendItems .product-name, .trendsItem .product-name{
+
+#relatedProducts .product-name,
+#frequentlyBoughtTogether .product-name,
+#trendItems .product-name,
+#lookingSimilar .product-name,
+.trendsItem .product-name {
     text-align: center;
     width: 150px;
     text-overflow: ellipsis;
@@ -61,12 +70,12 @@
     color: #FFFFFF;
 }
 @media (min-width: 768px) and (max-width: 1023px) {
-    #relatedProducts li, #frequentlyBoughtTogether li, #trendItems li {
+    #relatedProducts li, #frequentlyBoughtTogether li, #trendItems li, #lookingSimilar li {
         width: 33.33333333%;
     }
 }
 @media (max-width: 767px) {
-    #relatedProducts li, #frequentlyBoughtTogether li, #trendItems li {
+    #relatedProducts li, #frequentlyBoughtTogether li, #trendItems li, #lookingSimilar li {
         width: 50%;
     }
 }

view/frontend/templates/recommend/products/related-products.phtml

@@ -171,13 +171,12 @@ define([
                 (algoliaConfig.recommend.isLookingSimilarEnabledOnCartPage &&
                     $('body').hasClass('checkout-cart-index'))
             ) {
-                console.log(recommendClient);
-                console.log(indexName);
                 recommendJs.lookingSimilar({
-                    container: '#looking-similar',
+                    container: '#lookingSimilar',
                     recommendClient,
                     indexName,
-                    maxRecommendations: 6,
+                    objectIDs: config.algoliObjectId,
+                    maxRecommendations: algoliaConfig.recommend.limitLookingSimilar,
                     transformItems: function (items) {
                         return items.map((item, index) => ({
                             ...item,