MAGE-986 Enable configurable selectable redirect with or without hits

Author: cammonro

Block/Configuration.php

@@ -214,7 +214,8 @@ public function getConfiguration()
                 'minimumCharacters' => $config->getAutocompleteMinimumCharacterLength(),
                 'redirects' => [
                     'enabled' => $config->isAutocompleteRedirectEnabled(),
-                    'hideSelectableItem' => $config->getAutocompleteRedirectMode() === AutocompleteRedirectMode::SUBMIT_ONLY,
+                    'showSelectableRedirect' => $config->getAutocompleteRedirectMode() !== AutocompleteRedirectMode::SUBMIT_ONLY,
+                    'showHitsWithRedirect' => $config->getAutocompleteRedirectMode() !== AutocompleteRedirectMode::SELECTABLE_REDIRECT,
                     'openInNewWindow' => $config->isAutocompleteRedirectInNewWindowEnabled()
                 ]
             ],

view/frontend/web/css/autocomplete.css

@@ -1,6 +1,7 @@
 /** Auto-completion menu */
 html {
     --autocomplete-muted-color: #969faf;
+    --redirect-hit-element-height: 45px;
 }
 
 /********************
@@ -277,6 +278,11 @@ html {
 /********************
      REDIRECT HITS
  ********************/
+
+.aa-Panel .aa-PanelLayout:not(.show-selectable-redirect) section[data-autocomplete-source-id=redirectUrlPlugin] {
+    display:none
+}
+
 .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id=redirectUrlPlugin] .aa-ItemWrapper,
 .aa-Panel .aa-PanelLayout section[data-autocomplete-source-id=redirectUrlPlugin] .aa-ItemWrapper .aa-ItemContent {
     display: flex;
@@ -305,7 +311,7 @@ html {
 }
 
 /* Hide products when redirecting */
-.aa-Panel .aa-PanelLayout section[data-autocomplete-source-id=redirectUrlPlugin] ~ section[data-autocomplete-source-id=products] {
+.aa-Panel .aa-PanelLayout:not(.show-hits-with-redirect) section[data-autocomplete-source-id=redirectUrlPlugin] ~ section[data-autocomplete-source-id=products] {
     display: none;
 }
 
@@ -380,11 +386,18 @@ html {
     /* Redirect section */
     .aa-Panel .aa-PanelLayout.with-grid section[data-autocomplete-source-id=redirectUrlPlugin] {
         grid-column: 2;
-        grid-row: 1 / 999;
+        grid-row: 1 / 999; /* Default mode is to replace the product section */
         border-left: 1px solid #BBB;
         z-index: 999;
     }
 
+    .aa-Panel .aa-PanelLayout.with-grid.show-hits-with-redirect section[data-autocomplete-source-id=redirectUrlPlugin] {
+        z-index: 1000;
+        /* Contain if showing with selectable redirect option */
+        grid-row: 1;
+        max-height: var(--redirect-hit-element-height);
+    }
+
     /* Products section */
     .aa-Panel .aa-PanelLayout.with-grid section[data-autocomplete-source-id=products] {
         grid-column: 2;
@@ -395,8 +408,9 @@ html {
     }
 
     /* Redirect behaviors */
-    .aa-Panel .aa-PanelLayout.with-grid section[data-autocomplete-source-id=redirectUrlPlugin] ~ section[data-autocomplete-source-id=products] {
-        padding-top: 45px; /* Pad if showing with redirect option - set z-index as needed */
+    .aa-Panel .aa-PanelLayout.with-grid.show-selectable-redirect section[data-autocomplete-source-id=redirectUrlPlugin] ~ section[data-autocomplete-source-id=products] {
+        padding-top: var(--redirect-hit-element-height); /* Pad if showing with selectable redirect option */
+        z-index: 999;
     }
 
     /* Products grid */

view/frontend/web/js/autocomplete.js

@@ -184,6 +184,15 @@ define([
             if (sections.length > 1) {
                 classes.push('with-grid');
             }
+
+            if (algoliaConfig.autocomplete.redirects.showHitsWithRedirect) {
+                classes.push('show-hits-with-redirect');
+            }
+
+            if (algoliaConfig.autocomplete.redirects.showSelectableRedirect) {
+                classes.push('show-selectable-redirect');
+            }
+
             render(
                 html`<div class="${classes.join(' ')}">${sections}</div>`,
                 root
@@ -799,7 +808,7 @@ define([
                 onRedirect
             };
 
-            if (algoliaConfig.autocomplete.redirects.hideSelectableItem) {
+            if (!algoliaConfig.autocomplete.redirects.showSelectableRedirect) {
                 params.templates = {
                     item({html, state}) {
                         return html``;