Merge pull request #1678 from algolia/epic/MAGE-997

MAGE-1004 Rebased epic for algoliaBundle removal
algolia · Jan 17, 2025 · aeac517 · aeac517
2 parents 9394804 + fe25502
commit aeac517
Show file tree

Hide file tree

Showing 25 changed files with 2,159 additions and 1,856 deletions.
diff --git a/Block/Configuration.php b/Block/Configuration.php
@@ -13,7 +13,7 @@ class Configuration extends Algolia implements CollectionDataSourceInterface
     //Placeholder for future implementation (requires custom renderer for hierarchicalMenu widget)
     private const IS_CATEGORY_NAVIGATION_ENABLED = false;
 
-    public function isSearchPage()
+    public function isSearchPage(): bool
     {
         if ($this->getConfigHelper()->isInstantEnabled()) {
             /** @var Http $request */
@@ -80,8 +80,6 @@ public function getConfiguration()
 
         $suggestionHelper = $this->getSuggestionHelper();
 
-        $productHelper = $this->getProductHelper();
-
         $algoliaHelper = $this->getAlgoliaHelper();
 
         $persoHelper = $this->getPersonalizationHelper();
@@ -255,7 +253,7 @@ public function getConfiguration()
             'attributeFilter' => $attributesToFilter,
             'facets' => $facets,
             'areCategoriesInFacets' => $areCategoriesInFacets,
-            'hitsPerPage' => (int) $config->getNumberOfProductResults(),
+            'hitsPerPage' => $config->getNumberOfProductResults(),
             'sortingIndices' => array_values($this->sortingTransformer->getSortingIndices(
                 $this->getStoreId(),
                 $customerGroupId
@@ -422,7 +420,7 @@ protected function getOrderedProductIds(ConfigHelper $configHelper, Http $reques
         return $ids;
     }
 
-    protected function isLandingPage()
+    protected function isLandingPage(): bool
     {
         return $this->getRequest()->getFullActionName() === 'algolia_landingpage_view';
     }
@@ -441,4 +439,15 @@ protected function getLandingPageConfiguration()
     {
         return $this->isLandingPage() ? $this->getCurrentLandingPage()->getConfiguration() : json_encode([]);
     }
+
+    public function canLoadInstantSearch(): bool
+    {
+        return $this->getConfigHelper()->isInstantEnabled()
+            && $this->isProductListingPage();
+    }
+
+    protected function isProductListingPage(): bool
+    {
+        return $this->isSearchPage() || $this->isLandingPage();
+    }
 }
diff --git a/view/adminhtml/web/css/landing-page.css b/view/adminhtml/web/css/landing-page.css
@@ -1069,53 +1069,6 @@ a.ais-current-refined-values--link:hover {
     margin-bottom: 20px;
 }
 
-/** Search Box */
-
-#algolia-searchbox {
-    position: relative;
-}
-
-#algolia-searchbox .clear-cross, #algolia_instant_selector .clear-cross {
-    position: absolute;
-    display: none;
-    cursor: pointer;
-    width: 16px;
-    height: 16px;
-}
-
-#algolia-searchbox .clear-query-autocomplete {
-    bottom: 22px;
-    right: 9px;
-}
-
-#algolia_instant_selector .cross-wrapper .clear-refinement {
-    display: block;
-    position: relative;
-    top: 5px;
-    left: 5px;
-}
-
-#algolia-searchbox .magnifying-glass {
-    position: absolute;
-    bottom: 21px;
-    right: 7px;
-    width: 20px;
-    height: 20px;
-    display: block;
-}
-
-@media (min-width: 768px) {
-    #algolia-searchbox .magnifying-glass {
-        bottom: 6px;
-    }
-}
-
-@media (min-width: 768px) {
-    #algolia-searchbox .clear-query-autocomplete {
-        bottom: 8px;
-    }
-}
-
 /** PAGINATION */
 
 #instant-search-pagination-container {
@@ -1157,21 +1110,6 @@ a.ais-current-refined-values--link:hover {
     color: #606060;
 }
 
-
-#algolia-searchbox .algolia-search-input:focus:not([value=""]) {
-    background: transparent;
-}
-
-#algolia-searchbox .algolia-search-input {
-    position: static !important;
-}
-
-#algolia-searchbox .algolia-search-input:focus {
-    outline: 0;
-    box-shadow: none;
-    border: solid 1px #54A5CD;
-}
-
 #algolia_instant_selector .ais-current-refined-values.facet .ais-current-refined-values--body {
     padding-left: 8px;
 }

diff --git a/view/frontend/requirejs-config.js b/view/frontend/requirejs-config.js
@@ -1,5 +1,5 @@
-var config = {
-    map   : {
+const config = {
+    map: {
         '*': {
             // Magento FE libs
             'algoliaCommon'       : 'Algolia_AlgoliaSearch/js/internals/common',
@@ -8,26 +8,59 @@ var config = {
             'algoliaInsights'     : 'Algolia_AlgoliaSearch/js/insights',
             'algoliaHooks'        : 'Algolia_AlgoliaSearch/js/hooks',
 
-            // Autocomplete templates
-            'productsHtml'   : 'Algolia_AlgoliaSearch/js/template/autocomplete/products',
-            'pagesHtml'      : 'Algolia_AlgoliaSearch/js/template/autocomplete/pages',
-            'categoriesHtml' : 'Algolia_AlgoliaSearch/js/template/autocomplete/categories',
-            'suggestionsHtml': 'Algolia_AlgoliaSearch/js/template/autocomplete/suggestions',
-            'additionalHtml' : 'Algolia_AlgoliaSearch/js/template/autocomplete/additional-section',
+            // Unbundled template processor
+            'algoliaTemplateEngine': 'Algolia_AlgoliaSearch/js/internals/template-engine',
 
-            // Recommend templates
-            'recommendProductsHtml': 'Algolia_AlgoliaSearch/js/template/recommend/products'
+            // DEPRECATED - migrated to new paths - these will be removed in a future release
+            'algoliaAnalytics'     : 'algoliaAnalyticsLib',
+            'recommend'            : 'algoliaRecommendLib',
+            'recommendJs'          : 'algoliaRecommendJsLib',
+            'productsHtml'         : 'algoliaAutocompleteProductsHtml',
+            'pagesHtml'            : 'algoliaAutocompletePagesHtml',
+            'categoriesHtml'       : 'algoliaAutocompleteCategoriesHtml',
+            'suggestionsHtml'      : 'algoliaAutocompleteSuggestionsHtml',
+            'additionalHtml'       : 'algoliaAutocompleteAdditionalHtml',
+            'recommendProductsHtml': 'algoliaRecommendProductsHtml'
         }
     },
-    paths : {
-        'algoliaBundle'   : 'Algolia_AlgoliaSearch/js/internals/algoliaBundle.min',
-        'algoliaAnalytics': 'Algolia_AlgoliaSearch/js/internals/search-insights',
-        'recommend'       : 'Algolia_AlgoliaSearch/js/internals/recommend.min',
-        'recommendJs'     : 'Algolia_AlgoliaSearch/js/internals/recommend-js.min',
-        'rangeSlider'     : 'Algolia_AlgoliaSearch/js/navigation/range-slider-widget',
+    paths: {
+        // Core Search UI libs
+        'algoliaSearchLib'       : 'Algolia_AlgoliaSearch/js/lib/algolia-search.min',
+        'algoliaSearchHelperLib' : 'Algolia_AlgoliaSearch/js/lib/algolia-search-helper.min',
+        'algoliaInstantSearchLib': 'Algolia_AlgoliaSearch/js/lib/algolia-instantsearch.min',
+        'algoliaAutocompleteLib' : 'Algolia_AlgoliaSearch/js/lib/algolia-autocomplete.min',
+        'algoliaAnalyticsLib'    : 'Algolia_AlgoliaSearch/js/lib/search-insights.min',
+        'algoliaRecommendLib'    : 'Algolia_AlgoliaSearch/js/lib/recommend.min',
+        'algoliaRecommendJsLib'  : 'Algolia_AlgoliaSearch/js/lib/recommend-js.min',
+
+        // Autocomplete plugins
+        'algoliaQuerySuggestionsPluginLib'  : 'Algolia_AlgoliaSearch/js/lib/query-suggestions-plugin.min',
+        'algoliaInsightsPluginLib'          : 'Algolia_AlgoliaSearch/js/lib/insights-plugin.min',
+        'algoliaRecentSearchesPluginLib'    : 'Algolia_AlgoliaSearch/js/lib/recent-searches-plugin.min',
+
+        // Autocomplete templates
+        'algoliaAutocompleteProductsHtml'   : 'Algolia_AlgoliaSearch/js/template/autocomplete/products',
+        'algoliaAutocompletePagesHtml'      : 'Algolia_AlgoliaSearch/js/template/autocomplete/pages',
+        'algoliaAutocompleteCategoriesHtml' : 'Algolia_AlgoliaSearch/js/template/autocomplete/categories',
+        'algoliaAutocompleteSuggestionsHtml': 'Algolia_AlgoliaSearch/js/template/autocomplete/suggestions',
+        'algoliaAutocompleteAdditionalHtml' : 'Algolia_AlgoliaSearch/js/template/autocomplete/additional-section',
+
+        // Recommend templates
+        'algoliaRecommendProductsHtml': 'Algolia_AlgoliaSearch/js/template/recommend/products',
+
+        // Parser libs for legacy templating
+        'algoliaMustacheLib': 'Algolia_AlgoliaSearch/js/lib/mustache.min',
+        'algoliaHoganLib'   : 'Algolia_AlgoliaSearch/js/lib/hogan.min',
+
+        // Utils
+        'algoliaBase64' : 'Algolia_AlgoliaSearch/js/internals/base64',
+
+        // DEPRECATED - to be removed in a future release
+        'algoliaBundle': 'Algolia_AlgoliaSearch/js/internals/algoliaBundle.min',
+        'rangeSlider'  : 'Algolia_AlgoliaSearch/js/navigation/range-slider-widget'
+
     },
-    deps  : [
-        'algoliaInstantSearch',
+    deps : [
         'algoliaInsights'
     ],
     config: {
@@ -36,5 +69,10 @@ var config = {
                 'Algolia_AlgoliaSearch/js/insights/add-to-cart-mixin': true
             }
         }
+    },
+    shim : {
+        'algoliaHoganLib': {
+            exports: 'Hogan'
+        }
     }
 };
diff --git a/view/frontend/templates/internals/configuration.phtml b/view/frontend/templates/internals/configuration.phtml
@@ -7,7 +7,7 @@ $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)  {
+        if ($block->canLoadInstantSearch())  {
             $css = /* @noEscape */ $secureRenderer->renderTag('style', [],  $configuration['instant']['selector'] . ' {display:none}', false);
             /* @noEscape */ echo $secureRenderer->renderTag('script', [], 'document.write(\'' . $css . '\');' , false);
         }
@@ -17,7 +17,7 @@ if (class_exists('\Magento\Framework\View\Helper\SecureHtmlRenderer')) : ?>
 <?php else: ?>
     <script>
         <?php
-        if ($configuration['instant']['enabled'] === true && $configuration['isSearchPage'] === true) :
+        if ($block->canLoadInstantSearch()):
         $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.
@@ -29,3 +29,14 @@ if (class_exists('\Magento\Framework\View\Helper\SecureHtmlRenderer')) : ?>
         window.algoliaConfig = <?php /* @noEscape */ echo json_encode($configuration); ?>;
     </script>
 <?php endif; ?>
+
+
+<?php if ($block->canLoadInstantSearch()) : ?>
+    <script type="text/x-magento-init">
+        {
+            "*": {
+                "algoliaInstantSearch": {}
+            }
+        }
+    </script>
+<?php endif;?>
diff --git a/view/frontend/web/css/autocomplete.css b/view/frontend/web/css/autocomplete.css
@@ -429,54 +429,11 @@ html {
     max-width: 130px;
 }
 
-#algolia-searchbox .algolia-search-input:focus:not([value=""]) {
-    background: transparent;
-}
-
-#algolia-searchbox .algolia-search-input {
-    position: static !important;
-}
-
-#algolia-searchbox .algolia-search-input:focus {
-    outline: 0;
-    box-shadow: none;
-    border: solid 1px #54A5CD;
-}
-
 #algolia-autocomplete-container:after, .autocomplete-wrapper:after {
     clear: both;
     content: '';
 }
 
-#algolia-searchbox {
-    position: relative;
-}
-
-#algolia-searchbox .clear-cross, #algolia_instant_selector .clear-cross {
-    position: absolute;
-    display: none;
-    background: url("data:image/svg+xml;utf8,<svg width=\'12\' height=\'12\' viewBox=\'0 0 12 12\' xmlns=\'http://www.w3.org/2000/svg\' opacity=\'0.6\'><path d=\'M.566 1.698L0 1.13 1.132 0l.565.566L6 4.868 10.302.566 10.868 0 12 1.132l-.566.565L7.132 6l4.302 4.3.566.568L10.868 12l-.565-.566L6 7.132l-4.3 4.302L1.13 12 0 10.868l.566-.565L4.868 6 .566 1.698z\'></path></svg>") no-repeat center center / contain;
-    cursor: pointer;
-    width: 16px;
-    height: 16px;
-}
-
-#algolia-searchbox .clear-query-autocomplete {
-    bottom: 8px;
-    right: 9px;
-}
-
-#algolia-searchbox .magnifying-glass {
-    background: url("data:image/svg+xml;utf8,<svg width=\'40\' height=\'40\' viewBox=\'0 0 40 40\'  fill=\'%23A6A6A6\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M15.553 31.107c8.59 0 15.554-6.964 15.554-15.554S24.143 0 15.553 0 0 6.964 0 15.553c0 8.59 6.964 15.554 15.553 15.554zm0-3.888c6.443 0 11.666-5.225 11.666-11.668 0-6.442-5.225-11.665-11.668-11.665-6.442 0-11.665 5.223-11.665 11.665 0 6.443 5.223 11.666 11.665 11.666zm12.21 3.84a2.005 2.005 0 0 1 .002-2.833l.463-.463a2.008 2.008 0 0 1 2.833-.003l8.17 8.168c.78.78.78 2.05-.004 2.833l-.462.463a2.008 2.008 0 0 1-2.834.004l-8.168-8.17z\' fill-rule=\'evenodd\'/></svg>") no-repeat center right / 20px;
-    border: none;
-    bottom: 7px;
-    box-shadow: none;
-    height: 20px;
-    position: absolute;
-    right: 7px;
-    width: 20px;
-}
-
 #algolia_instant_selector .cross-wrapper .clear-refinement {
     display: block;
     position: relative;
@@ -664,8 +621,4 @@ html {
 }
 .aa-Panel .aa-PanelLayout section .aa-SourceNoResults{
     padding: 5px;
-}
-
-.clear-query-autocomplete {
-    display: none !important;
-}
+}