MAGE-986 Expose InstantSearch redirect config to frontend

Author: cammonro

Block/Configuration.php

@@ -5,6 +5,7 @@
 use Algolia\AlgoliaSearch\Helper\ConfigHelper;
 use Algolia\AlgoliaSearch\Helper\InsightsHelper;
 use Algolia\AlgoliaSearch\Model\Source\AutocompleteRedirectMode;
+use Algolia\AlgoliaSearch\Model\Source\InstantSearchRedirectOptions;
 use Magento\Framework\App\Request\Http;
 use Magento\Framework\Data\CollectionDataSourceInterface;
 use Magento\Framework\DataObject;
@@ -199,7 +200,14 @@ public function getConfiguration()
                 'categoryPageIdAttribute' => $config->getCategoryPageIdAttributeName(),
                 'isCategoryNavigationEnabled' => self::IS_CATEGORY_NAVIGATION_ENABLED,
                 'hidePagination' => $config->hidePaginationInInstantSearchPage(),
-                'isDynamicFacetsEnabled' => $config->isDynamicFacetsEnabled()
+                'isDynamicFacetsEnabled' => $config->isDynamicFacetsEnabled(),
+                'redirects' => [
+                    'enabled' => $config->isInstantRedirectEnabled(),
+                    'onPageLoad' => in_array(InstantSearchRedirectOptions::REDIRECT_ON_PAGE_LOAD, $config->getInstantRedirectOptions()),
+                    'onSearchAsYouType' => in_array(InstantSearchRedirectOptions::REDIRECT_ON_SEARCH_AS_YOU_TYPE, $config->getInstantRedirectOptions()),
+                    'showSelectableRedirect' => in_array(InstantSearchRedirectOptions::SELECTABLE_REDIRECT, $config->getInstantRedirectOptions()),
+                    'openInNewWindow' => in_array(InstantSearchRedirectOptions::OPEN_IN_NEW_WINDOW, $config->getInstantRedirectOptions())
+                ]
             ],
             'autocomplete' => [
                 'enabled' => $config->isAutoCompleteEnabled(),

Helper/ConfigHelper.php

@@ -47,6 +47,9 @@ class ConfigHelper
     public const INFINITE_SCROLL_ENABLE = 'algoliasearch_instant/instant_options/infinite_scroll_enable';
     public const HIDE_PAGINATION = 'algoliasearch_instant/instant_options/hide_pagination';
 
+    public const IS_INSTANT_REDIRECT_ENABLED = 'algoliasearch_instant/instant_redirects/enable';
+    public const INSTANT_REDIRECT_OPTIONS = 'algoliasearch_instant/instant_redirects/options';
+
     public const IS_POPUP_ENABLED = 'algoliasearch_autocomplete/autocomplete/is_popup_enabled';
     public const NB_OF_PRODUCTS_SUGGESTIONS = 'algoliasearch_autocomplete/autocomplete/nb_of_products_suggestions';
     public const NB_OF_CATEGORIES_SUGGESTIONS = 'algoliasearch_autocomplete/autocomplete/nb_of_categories_suggestions';
@@ -1055,7 +1058,7 @@ public function getAutocompleteDebounceMilliseconds($storeId = null): int
         );
     }
 
-    public function getAutocompleteMinimumCharacterLength($storeId = null): int
+    public function getAutocompleteMinimumCharacterLength(?int $storeId = null): int
     {
         return (int) $this->configInterface->getValue(
             self::AUTOCOMPLETE_MINIMUM_CHAR_LENGTH,
@@ -1064,12 +1067,12 @@ public function getAutocompleteMinimumCharacterLength($storeId = null): int
         );
     }
 
-    public function isAutocompleteRedirectEnabled($storeId = null): bool
+    public function isAutocompleteRedirectEnabled(?int $storeId = null): bool
     {
         return $this->configInterface->isSetFlag(self::IS_AUTOCOMPLETE_REDIRECT_ENABLED, ScopeInterface::SCOPE_STORE, $storeId);
     }
 
-    public function getAutocompleteRedirectMode($storeId = null): int
+    public function getAutocompleteRedirectMode(?int $storeId = null): int
     {
         return (int) $this->configInterface->getValue(
             self::AUTOCOMPLETE_REDIRECT_MODE,
@@ -1083,6 +1086,22 @@ public function isAutocompleteRedirectInNewWindowEnabled($storeId = null): bool
         return $this->configInterface->isSetFlag(self::AUTOCOMPLETE_OPEN_REDIRECT_IN_NEW_WINDOW, ScopeInterface::SCOPE_STORE, $storeId);
     }
 
+
+    public function isInstantRedirectEnabled(?int $storeId = null): bool
+    {
+        return $this->configInterface->isSetFlag(self::IS_INSTANT_REDIRECT_ENABLED, ScopeInterface::SCOPE_STORE, $storeId);
+    }
+
+    public function getInstantRedirectOptions(?int $storeId = null): array
+    {
+        $value = $this->configInterface->getValue(
+            self::INSTANT_REDIRECT_OPTIONS,
+            ScopeInterface::SCOPE_STORE,
+            $storeId
+        );
+        return empty($value) ? [] : explode(',', $value);
+    }
+
     /**
      * @param $originalIndexName
      * @param $storeId

view/frontend/web/js/instantsearch.js

@@ -185,7 +185,7 @@ define([
 
             return allWidgetConfiguration;
         },
-        
+
         /**
          * Process a passed widget config object and add to InstantSearch
          * Dynamic widgets are deferred as they must be aggregated and processed separately
@@ -970,9 +970,7 @@ define([
                 customWidgets.push(this.getSuggestionsWidget(this.minQuerySuggestions));
             }
 
-            // Placeholder for config
-            const allowRedirects = true;
-            if (allowRedirects) {
+            if (algoliaConfig.instant.redirects.enabled) {
                 customWidgets.push(this.getRedirectWidget());
             }
             return customWidgets;
@@ -1061,19 +1059,38 @@ define([
             };
         },
 
+        isAbleToRedirect() {
+            return (
+                !this.hasInteracted && algoliaConfig.instant.redirects.onPageLoad
+                ||
+                this.hasInteracted && algoliaConfig.instant.redirects.onSearchAsYouType
+            );
+        },
+
+        getSelectableRedirect(results) {
+            let content = `<div class="instant-redirect">`;
+            content += `<a href="${results.renderingContent.redirect.url}"`;
+            if (algoliaConfig.instant.redirects.openInNewWindow) {
+                content += ` target="_blank"`;
+            }
+            content += `>${algoliaConfig.translations.redirectSearchPrompt} "${results.query}"</a>`;
+            content += `</div>`;
+            return content;
+        },
+
         getRedirectWidget() {
-            const uiComponnent = this;
             return {
-                render({ results }) {
+                render: ({ results }) => {
                     let content = '';
                     if (results && results.renderingContent) {
                         if (results.renderingContent.redirect) {
-                            if (!uiComponnent.hasInteracted) {
-                                window.location.href = results.renderingContent.redirect.url;
+                            if (this.isAbleToRedirect()) {
+                                window.location.assign(results.renderingContent.redirect.url);
+                            }
+
+                            if (algoliaConfig.instant.redirects.showSelectableRedirect) {
+                                content = this.getSelectableRedirect(results);
                             }
-                            content += `<div class="instant-redirect">`;
-                            content += `<a href="${results.renderingContent.redirect.url}">${algoliaConfig.translations.redirectSearchPrompt} "${results.query}"</a>`;
-                            content += `</div>`;
                         }
                     }
                     document.querySelector('#instant-redirect-container').innerHTML = content;