MAGE-985 Add clickable redirect on interact option

Author: cammonro

Block/Configuration.php

@@ -371,6 +371,7 @@ public function getConfiguration()
                 'products' => __('Products'),
                 'suggestions' => __('Suggestions'),
                 'searchBy' => __('Search by'),
+                'redirectSearchPrompt' => __("Continue search for"),
                 'searchForFacetValuesPlaceholder' => __('Search for other ...'),
                 'showMore' => __('Show more products'),
                 'searchTitle' => __('Search results for'),

view/frontend/templates/instant/wrapper.phtml

@@ -2,8 +2,6 @@
 
 <!-- Wrapping template -->
 <script type="text/template" id="instant_wrapper_template">
-    
-
     <div id="algolia_instant_selector"
          class="<?php echo $block->escapeHtml($block->hasFacets() ? ' with-facets' : ''); ?>">
         <div class="row">
@@ -41,6 +39,7 @@
                                 <div class="algolia-clearfix"></div>
                             </div>
                             <div id="algolia-banner"></div>
+                            <div id="instant-redirect-container"></div>
                             <div id="instant-empty-results-container"></div>
                             <div id="instant-search-results-container"></div>
                         </div>

view/frontend/web/css/instantsearch.v3.css

@@ -318,3 +318,8 @@ button.ais-CurrentRefinements-delete:focus {
     padding: 3em 0;
     text-align: center;
 }
+
+.instant-redirect {
+    margin: 3em 0 1em 0;
+    text-align: center;
+}

view/frontend/web/js/instantsearch.js

@@ -179,19 +179,13 @@ define([
 
             allWidgetConfiguration = this.configureFacets(allWidgetConfiguration);
 
-            // allWidgetConfiguration = this.configureRedirects(allWidgetConfiguration)
-
             if (algoliaConfig.analytics.enabled) {
                 allWidgetConfiguration.analytics = this.getAnalyticsWidget()
             }
 
             return allWidgetConfiguration;
         },
-
-        // configureRedirects(allWidgetConfiguration) {
-        //     return allWidgetConfiguration;
-        // },
-
+        
         /**
          * Process a passed widget config object and add to InstantSearch
          * Dynamic widgets are deferred as they must be aggregated and processed separately
@@ -976,6 +970,7 @@ define([
                 customWidgets.push(this.getSuggestionsWidget(this.minQuerySuggestions));
             }
 
+            // Placeholder for config
             const allowRedirects = true;
             if (allowRedirects) {
                 customWidgets.push(this.getRedirectWidget());
@@ -1070,14 +1065,18 @@ define([
             const uiComponnent = this;
             return {
                 render({ results }) {
-                    if (
-                        results &&
-                        results.renderingContent &&
-                        results.renderingContent.redirect &&
-                        !uiComponnent.hasInteracted
-                    ) {
-                        window.location.href = results.renderingContent.redirect.url;
+                    let content = '';
+                    if (results && results.renderingContent) {
+                        if (results.renderingContent.redirect) {
+                            if (!uiComponnent.hasInteracted) {
+                                window.location.href = results.renderingContent.redirect.url;
+                            }
+                            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;
                 },
             };
         },