Release/3.13.5 (#1570)

* Bugfix/MAGE-948: DOM selector check (#1550) * MAGE-3 Checking on exists element fix (#1516) Co-authored-by: andreishichko <[email protected]> * MAGE-948: use if statement over ternary * MAGE-948: remove optional chaining --------- Co-authored-by: sgeleon <[email protected]> Co-authored-by: andreishichko <[email protected]> * MAGE-947: restrict recommend CSS to algolia managed blocks (#1553) * MAGE-947: restrict recommend CSS to algolia managed blocks * MAGE-947: add css identifer to all rules * MAGE-949: add fallback for secureRenderer (#1556) * Removed polyfill.io from csp_whitelist, was forgotten in MAGE-822 * MAGE-901: showing title for empty recommendation issue addressed * MAGE-901: code updated as per code review suggestions * MAGE-958: release number increased and change log updated * MAGE-958: change log updated. --------- Co-authored-by: Damien Couchez <[email protected]> Co-authored-by: sgeleon <[email protected]> Co-authored-by: andreishichko <[email protected]> Co-authored-by: Pieter Hoste <[email protected]> Co-authored-by: Eric Wright <[email protected]>
algolia · Jul 12, 2024 · 72622b6 · 72622b6 · abdulrafaywaqar · Jul 14, 2024
1 parent 1a26fce
commit 72622b6
Show file tree

Hide file tree

Showing 13 changed files with 120 additions and 62 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # CHANGE LOG
 
+## 3.13.5
+
+### Updates
+- Polyfill.io removed from CSP whitelist - Thank you @hostep
+- Hide Recommend Titles when not in use
+- Incorporate community fix for higher specificity CSS selectors on Recommend - Thank you @sgeleon
+
+### Bug Fixes
+- Incorporate community fix for missing DOM element selector - Thank you @sgeleon
+
 ## 3.13.4
 
 ### Bug Fixes

diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 Algolia Search & Discovery extension for Magento 2
 ==================================================
 
-![Latest version](https://img.shields.io/badge/latest-3.13.4-green)
+![Latest version](https://img.shields.io/badge/latest-3.13.5-green)
 ![Magento 2](https://img.shields.io/badge/Magento-2.4.x-orange)
 
 ![PHP](https://img.shields.io/badge/PHP-8.2%2C8.1%2C7.4-blue)

diff --git a/composer.json b/composer.json
@@ -3,7 +3,7 @@
   "description": "Algolia Search & Discovery extension for Magento 2",
   "type": "magento2-module",
   "license": ["MIT"],
-  "version": "3.13.4",
+  "version": "3.13.5",
   "require": {
     "magento/framework": "~102.0|~103.0",
     "algolia/algoliasearch-client-php": "3.3.2",

diff --git a/etc/csp_whitelist.xml b/etc/csp_whitelist.xml
@@ -2,11 +2,6 @@
 <csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">
     <policies>
-        <policy id="script-src">
-            <values>
-                <value id="polyfill" type="host">polyfill.io</value>
-            </values>
-        </policy>
         <policy id="connect-src">
             <values>
                 <value id="algolia-api" type="host">*.algolia.net</value>

diff --git a/etc/module.xml b/etc/module.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
-    <module name="Algolia_AlgoliaSearch" setup_version="3.13.4">
+    <module name="Algolia_AlgoliaSearch" setup_version="3.13.5">
         <sequence>
             <module name="Magento_Theme"/>
             <module name="Magento_Backend"/>

diff --git a/view/frontend/templates/internals/configuration.phtml b/view/frontend/templates/internals/configuration.phtml
@@ -1,18 +1,31 @@
 <?php
 
 /** @var \Algolia\AlgoliaSearch\Block\Configuration $block */
-/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
 
 $configuration = $block->getConfiguration();
 
-?>
+if (class_exists('\Magento\Framework\View\Helper\SecureHtmlRenderer')) : ?>
+    <?php
+        /** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
+        if ($configuration['instant']['enabled'] === true && $configuration['isSearchPage'] === true)  {
+            $css = /* @noEscape */ $secureRenderer->renderTag('style', [],  $configuration['instant']['selector'] . ' {display:none}', false);
+            /* @noEscape */ echo $secureRenderer->renderTag('script', [], 'document.write(\'' . $css . '\');' , false);
+        }
+    ?>
 
-<?php
-if ($configuration['instant']['enabled'] === true && $configuration['isSearchPage'] === true)  {
-    $css = /* @noEscape */ $secureRenderer->renderTag('style', [],  $configuration['instant']['selector'] . ' {display:none}', false);
-    /* @noEscape */ echo $secureRenderer->renderTag('script', [], 'document.write(\'' . $css . '\');' , false);
-}
-?>
-
-<?= /* @noEscape */ $secureRenderer->renderTag('script', [], "window.algoliaConfig = " . json_encode($configuration) . ';' , false); ?>
+    <?= /* @noEscape */ $secureRenderer->renderTag('script', [], "window.algoliaConfig = " . json_encode($configuration) . ';' , false); ?>
+<?php else: ?>
+    <script>
+        <?php
+        if ($configuration['instant']['enabled'] === true && $configuration['isSearchPage'] === true) :
+        $css = '<style type="text/css">' . $configuration['instant']['selector'] . ' {display:none}</style>';
+        ?>
+        // Hide the instant-search selector ASAP to remove flickering. Will be re-displayed later with JS.
+        document.write('<?php /* @noEscape */ echo $css; ?>');
+        <?php
+        endif;
+        ?>
 
+        window.algoliaConfig = <?php /* @noEscape */ echo json_encode($configuration); ?>;
+    </script>
+<?php endif; ?>
diff --git a/view/frontend/templates/layer/view.phtml b/view/frontend/templates/layer/view.phtml
@@ -1,7 +1,3 @@
-<?php
-/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
-?>
-
 <?php if ($block->canShowBlock()) : ?>
     <div class="block filter algolia-filter-list" id="layered-filter-block" data-mage-init='{"collapsible":{"openedState": "active", "collapsible": true, "active": false, "collateral": { "openedState": "filter-active", "element": "body" } }}'>
         <?php $filtered = count($block->getLayer()->getState()->getFilters()) ?>
@@ -34,15 +30,25 @@
             <?php if ($wrapOptions) : ?>
                 </div>
             <?php else : ?>
-                <?php $scriptString = <<<script
-                require([
-                    'jquery'
-                ], function ($) {
-                    $('#layered-filter-block').addClass('filter-no-options');
-                });
-    script;
-                ?>
-                <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false); ?>
+                <?php if (class_exists('\Magento\Framework\View\Helper\SecureHtmlRenderer')) : ?>
+                    <?php
+                    /** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
+                    $scriptString = "require([
+                            'jquery'
+                        ], function ($) {
+                            $('#layered-filter-block').addClass('filter-no-options');
+                        });";
+
+                    /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false); ?>
+                <?php else : ?>
+                    <script>
+                        require([
+                            'jquery'
+                        ], function ($) {
+                            $('#layered-filter-block').addClass('filter-no-options');
+                        });
+                    </script>
+                <?php endif; ?>
             <?php endif; ?>
         </div>
     </div>

diff --git a/view/frontend/templates/recommend/cart/recommend_items.phtml b/view/frontend/templates/recommend/cart/recommend_items.phtml
@@ -5,9 +5,11 @@ $recommendConfig = $viewModel->getAlgoliaRecommendConfiguration();
 if (!empty($recommendConfig['enabledRelatedInCart']) || !empty($recommendConfig['enabledFBTInCart']) || !empty($recommendConfig['isTrendItemsEnabledInCartPage'])):
     $cartItems = $viewModel->getAllCartItems();
     ?>
-    <div id="frequentlyBoughtTogether" class="recommend-component"></div>
-    <div id="relatedProducts" class="recommend-component"></div>
-    <div id="trendItems" class="trendsItem recommend-component"></div>
+    <div id="algoliaRecommend">
+        <div id="frequentlyBoughtTogether" class="recommend-component"></div>
+        <div id="relatedProducts" class="recommend-component"></div>
+        <div id="trendItems" class="trendsItem recommend-component"></div>
+    </div>
     <script type="text/x-magento-init">
         {
             "*": {

diff --git a/view/frontend/templates/recommend/products.phtml b/view/frontend/templates/recommend/products.phtml
@@ -5,9 +5,11 @@ $recommendConfig =  $viewModel->getAlgoliaRecommendConfiguration();
 
 if (!empty($recommendConfig['enabledFBT']) || !empty($recommendConfig['enabledRelated']) || !empty($recommendConfig['isTrendItemsEnabledInPDP'])):
     $product = $viewModel->getProduct(); ?>
-    <div id="frequentlyBoughtTogether" class="recommend-component"></div>
-    <div id="relatedProducts" class="recommend-component"></div>
-    <div id="trendItems" class="trendsItem recommend-component"></div>
+    <div id="algoliaRecommend">
+        <div id="frequentlyBoughtTogether" class="recommend-component"></div>
+        <div id="relatedProducts" class="recommend-component"></div>
+        <div id="trendItems" class="trendsItem recommend-component"></div>
+    </div>
     <script type="text/x-magento-init">
         {
             "*": {

diff --git a/view/frontend/templates/recommend/widget/trends-item.phtml b/view/frontend/templates/recommend/widget/trends-item.phtml
@@ -3,7 +3,9 @@
 $isEnabled = $block->isTrendingItemEnabled();
 if ($isEnabled):
     $trendConstainer =  'trendItems' . $block->generateUniqueToken(); ?>
-    <div id="<?= $trendConstainer ?>" class="trendsItem recommend-component"></div>
+    <div id="algoliaRecommend">
+        <div id="<?= $trendConstainer ?>" class="trendsItem recommend-component"></div>
+    </div>
     <script type="text/x-magento-init">
         {
             "*": {
@@ -23,4 +25,4 @@ if ($isEnabled):
             }
         }
     </script>
-<?php endif; ?>
+<?php endif; ?>
diff --git a/view/frontend/web/internals/common.js b/view/frontend/web/internals/common.js
@@ -14,7 +14,7 @@ define(['jquery', 'algoliaBundle'], function ($, algoliaBundle) {
         return acc;
     }, {});
 
-    window.algolia = {  
+    window.algolia = {
         deprecatedHooks: [
             'beforeAutocompleteProductSourceOptions',
             'beforeAutocompleteSources'
@@ -85,7 +85,7 @@ define(['jquery', 'algoliaBundle'], function ($, algoliaBundle) {
         htmlspecialcharsEncode: string => {
             const regex = new RegExp(`[${Object.keys(SPECIAL_CHAR_ENCODE_MAP).join('')}]`, 'g');
             return string.replace(regex, (m) => SPECIAL_CHAR_ENCODE_MAP[m]);
-        } 
+        }
     };
 
     window.isMobile = function () {
@@ -629,7 +629,9 @@ define(['jquery', 'algoliaBundle'], function ($, algoliaBundle) {
             var input = $(this).closest('#algolia-searchbox').find('input');
 
             input.val('');
-            input.get(0).dispatchEvent(new Event('input'));
+            if (input.length) {
+                input.get(0).dispatchEvent(new Event('input'));
+            }
 
             handleInputCrossAutocomplete(input);
         });

diff --git a/view/frontend/web/internals/recommend.css b/view/frontend/web/internals/recommend.css
@@ -1,33 +1,42 @@
-.recommend-item .product-img {
+#algoliaRecommend .recommend-item .product-img {
     width: 180px;
 }
-.auc-Recommend-list {
+#algoliaRecommend .auc-Recommend-list {
     display: flex;
     justify-content: space-evenly;
     list-style: none;
 }
-.recommend-item .product-name {
+#algoliaRecommend .recommend-item .product-name {
     height: 50px;
     width: 110px;
     margin: 0 auto;
 }
-.recommend-component {
+#algoliaRecommend .recommend-component {
     margin-bottom: 80px;
 }
-#relatedProducts .auc-Recommend-list, #frequentlyBoughtTogether .auc-Recommend-list, .trendsItem  .auc-Recommend-list{
+#algoliaRecommend #relatedProducts .auc-Recommend-list,
+#algoliaRecommend #frequentlyBoughtTogether .auc-Recommend-list,
+#algoliaRecommend .trendsItem  .auc-Recommend-list {
     flex-wrap: wrap;
     justify-content: flex-start;
 }
-#relatedProducts li, #frequentlyBoughtTogether li, .trendsItem li {
+#algoliaRecommend #relatedProducts li,
+#algoliaRecommend #frequentlyBoughtTogether li,
+#algoliaRecommend .trendsItem li {
     display: flex;
     justify-content: center;
     width: 16.66666667%;
 }
-#relatedProducts li a, #frequentlyBoughtTogether li a, .trendsItem li a {
+#algoliaRecommend #relatedProducts li a,
+#algoliaRecommend #frequentlyBoughtTogether li a,
+#algoliaRecommend .trendsItem li a {
     color: inherit;
     display: block;
 }
-#relatedProducts .product-name, #frequentlyBoughtTogether .product-name, #trendItems .product-name, .trendsItem .product-name{
+#algoliaRecommend #relatedProducts .product-name,
+#algoliaRecommend #frequentlyBoughtTogether .product-name,
+#algoliaRecommend #trendItems .product-name,
+#algoliaRecommend .trendsItem .product-name{
     text-align: center;
     width: 150px;
     text-overflow: ellipsis;
@@ -40,37 +49,45 @@
     -webkit-box-orient: vertical;
     display: -webkit-box;
 }
-#trendItems a, #trendItems a:hover, .trendsItem a, .trendsItem a:hover{
+#algoliaRecommend #trendItems a,
+#algoliaRecommend #trendItems a:hover,
+#algoliaRecommend .trendsItem a,
+#algoliaRecommend .trendsItem a:hover{
     color:#333;
 }
-.auc-Recommend-item .product-details {
+#algoliaRecommend .auc-Recommend-item .product-details {
     text-align: center;
 }
-#trendItems .auc-Recommend-list{
+#algoliaRecommend #trendItems .auc-Recommend-list{
     flex-wrap: wrap;
     justify-content: flex-start;
 }
-.product-details .recommend-item .action.primary, .action-primary{
+#algoliaRecommend .product-details .recommend-item .action.primary,
+#algoliaRecommend .action-primary{
     background: #f4f4f4;
     border: 1px solid #f4f4f4;
     color: #666666;
 }
-.product-details .recommend-item .action.primary:hover, .action-primary:hover {
+#algoliaRecommend .product-details .recommend-item .action.primary:hover,
+#algoliaRecommend .action-primary:hover {
     border-color: #1979c3;
     background: #1979c3;
     color: #FFFFFF;
 }
 @media (min-width: 768px) and (max-width: 1023px) {
-    #relatedProducts li, #frequentlyBoughtTogether li, #trendItems li {
+    #algoliaRecommend #relatedProducts li,
+    #algoliaRecommend #frequentlyBoughtTogether li,
+    #algoliaRecommend #trendItems li {
         width: 33.33333333%;
     }
 }
 @media (max-width: 767px) {
-    #relatedProducts li, #frequentlyBoughtTogether li, #trendItems li {
+    #algoliaRecommend #relatedProducts li,
+    #algoliaRecommend #frequentlyBoughtTogether li,
+    #algoliaRecommend #trendItems li {
         width: 50%;
     }
 }
-h3.auc-Recommend-title {
-    padding: 20p;
+#algoliaRecommend h3.auc-Recommend-title {
     padding-bottom: 20px;
 }
diff --git a/view/frontend/web/recommend.js b/view/frontend/web/recommend.js
@@ -34,7 +34,10 @@ define([
                                 position: index + 1,
                             }));
                         },
-                        headerComponent({html}) {
+                        headerComponent({html, recommendations}) {
+                            if (!recommendations.length) {
+                                return '';
+                            }
                             return recommendProductsHtml.getHeaderHtml(html,algoliaConfig.recommend.FBTTitle);
                         },
                         itemComponent({item, html}) {
@@ -55,7 +58,10 @@ define([
                                 position: index + 1,
                             }));
                         },
-                        headerComponent({html}) {
+                        headerComponent({html, recommendations}) {
+                            if (!recommendations.length) {
+                                return '';
+                            }
                             return recommendProductsHtml.getHeaderHtml(html,algoliaConfig.recommend.relatedProductsTitle);
                         },
                         itemComponent({item, html}) {
@@ -79,7 +85,10 @@ define([
                             position: index + 1,
                         }));
                     },
-                    headerComponent({html}) {
+                    headerComponent({html, recommendations}) {
+                        if (!recommendations.length) {
+                            return '';
+                        }
                         return recommendProductsHtml.getHeaderHtml(html,algoliaConfig.recommend.trendingItemsTitle);
                     },
                     itemComponent({item, html}) {