MAGE-986 Override template to prevent link from bypassing navigator

Author: cammonro

view/frontend/web/js/autocomplete.js

@@ -796,6 +796,39 @@ define([
                 && !(event instanceof KeyboardEvent);
         },
 
+        /**
+         * Controls the render of the selectable redirect Autocomplete menu item
+         * @param html Tagged template function
+         * @param state
+         * @returns {*}
+         */
+        getRedirectItemTemplate({html, state}) {
+            return html`
+                <div className="aa-ItemWrapper">
+                    <div className="aa-ItemContent">
+                        <div className="aa-ItemIcon aa-ItemIcon--noBorder">
+                            <svg viewBox="0 0 24 24" fill="currentColor">
+                                <path
+                                    d="M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"></path>
+                            </svg>
+                        </div>
+                        <div className="aa-ItemContentBody">
+                            <div className="aa-ItemContentTitle"><a className="aa-ItemLink">${state.query}</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="aa-ItemActions">
+                        <div className="aa-ItemActionButton">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
+                                 strokeLinecap="round" strokeLinejoin="round">
+                                <line x1="5" y1="12" x2="19" y2="12"></line>
+                                <polyline points="12 5 19 12 12 19"></polyline>
+                            </svg>
+                        </div>
+                    </div>
+                </div>`;
+        },
+
         buildRedirectPlugin() {
             const onRedirect = (redirects, { event, navigator, state }) => {
                 const item = redirects.find((r) => r.sourceId === 'products');
@@ -812,16 +845,15 @@ define([
             };
 
             const params = {
-                onRedirect
-            };
-
-            if (!algoliaConfig.autocomplete.redirects.showSelectableRedirect) {
-                params.templates = {
-                    item({html, state}) {
-                        return html``;
+                onRedirect,
+                templates: {
+                    item: ({html, state}) => {
+                        return (algoliaConfig.autocomplete.redirects.showSelectableRedirect)
+                            ? this.getRedirectItemTemplate({html, state})
+                            : html``;
                     }
-                };
-            }
+                }
+            };
 
             return redirectUrlPlugin.createRedirectUrlPlugin(params);
         },