Merge pull request #37 from Relewise/fix/product-overlay-url

fix: issue with keyboard navigation when not using Url-datakey
Relewise · Jan 15, 2024 · 2987ae6 · 2987ae6
2 parents c8c647b + 3c4e13c
commit 2987ae6
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 20 deletions.
diff --git a/packages/web-components/src/search/components/product-search-overlay-results.ts b/packages/web-components/src/search/components/product-search-overlay-results.ts
@@ -6,7 +6,7 @@ import { SearchResult } from '../product-search-overlay';
 export class ProductSearchOverlayResults extends LitElement {
 
     @property()
-    setSearchTerm = (term: string) => {};
+    setSearchTerm = (term: string) => { };
 
     @property()
     noResultsMessage: string | null = null;
@@ -16,9 +16,9 @@ export class ProductSearchOverlayResults extends LitElement {
 
     @property({ type: Number })
     selectedIndex = -1;
-    
+
     @property()
-    setResultOverlayHovered = (hovered: boolean) => {};
+    setResultOverlayHovered = (hovered: boolean) => { };
 
     connectedCallback(): void {
         super.connectedCallback();
@@ -35,7 +35,7 @@ export class ProductSearchOverlayResults extends LitElement {
                 ` : html`
                 <div>
                     ${this.results.map((result, index) => {
-                        return html`
+                    return html`
                         <div ?selected=${index === this.selectedIndex} class="rw-selected-result">
                         ${result.searchTermPrediction ?
                             html`
@@ -45,15 +45,15 @@ export class ProductSearchOverlayResults extends LitElement {
                                     </span>
                                     <relewise-search-icon class="rw-search-icon"></relewise-search-icon>
                                 </div>
-                            ` : 
+                            ` :
                             html`
                                 <div class="rw-product-item-container">
                                     <relewise-product-search-overlay-product .product=${result.product}></relewise-product-search-overlay-product>
                                 </div>
                             `}
                         </div>`;
-                    },
-                    )}
+                },
+                )}
                 </div>`}
             </div>
         `;
@@ -90,7 +90,7 @@ export class ProductSearchOverlayResults extends LitElement {
         }
 
         .rw-products-container {
-            display :flex;
+            display: flex;
             flex-direction: column;
         }
 
@@ -102,7 +102,7 @@ export class ProductSearchOverlayResults extends LitElement {
         }
 
         .rw-selected-result[selected] {
-            background-color: whitesmoke;
+            background-color: var(--relewise-hover-color, whitesmoke);
         }
 
         .rw-prediction-item-container:hover {

diff --git a/packages/web-components/src/search/product-search-overlay.ts b/packages/web-components/src/search/product-search-overlay.ts
@@ -12,7 +12,7 @@ export class SearchResult {
 }
 
 export class ProductSearchOverlay extends LitElement {
-    
+
     @property({ attribute: 'displayed-at-location' })
     displayedAtLocation?: string = undefined;
 
@@ -27,8 +27,8 @@ export class ProductSearchOverlay extends LitElement {
 
     @state()
     term: string = '';
-    
-    @state() 
+
+    @state()
     selectedIndex = -1;
 
     @state()
@@ -41,7 +41,7 @@ export class ProductSearchOverlay extends LitElement {
     hasCompletedSearchRequest: boolean = false;
 
     private debounceTimeoutHandlerId: ReturnType<typeof setTimeout> | null = null;
-    
+
     async connectedCallback() {
         if (!this.displayedAtLocation) {
             console.error('No displayedAtLocation defined!');
@@ -98,8 +98,23 @@ export class ProductSearchOverlay extends LitElement {
             this.setSearchTerm(result.searchTermPrediction.term ?? '');
         }
 
-        if (result.product && result.product.data && 'Url' in result.product.data) {
-            window.location.href = result.product.data['Url'].value ?? '';
+        if (result.product) {
+            const selectedProduct = this.shadowRoot!
+                .querySelector('relewise-product-search-overlay-results')
+                ?.shadowRoot
+                ?.querySelector('.rw-selected-result[selected]');
+
+            if (selectedProduct) {
+                const productLink = selectedProduct
+                    .querySelector('relewise-product-search-overlay-product')
+                    ?.shadowRoot
+                    ?.querySelector('a')
+                    ?.getAttribute('href');
+
+                if (productLink) {
+                    window.location.href = productLink;
+                }
+            }
         }
     }
 
@@ -130,7 +145,7 @@ export class ProductSearchOverlay extends LitElement {
                 .addEntityType('Product')
                 .build());
         }
-            
+
 
         const response = await searcher.batch(requestBuilder.build());
         if (response && response.responses) {
@@ -158,21 +173,21 @@ export class ProductSearchOverlay extends LitElement {
         return html`
             <relewise-search-bar 
                 .term=${this.term}
-                .setSearchTerm=${(term: string)=> this.setSearchTerm(term)}
+                .setSearchTerm=${(term: string) => this.setSearchTerm(term)}
                 .setSearchBarInFocus=${(inFocus: boolean) => this.searchBarInFocus = inFocus}
                 .placeholder=${localization?.searchBar?.placeholder ?? 'Search'}
                 .handleKeyEvent=${(e: KeyboardEvent) => this.handleKeyDown(e)}
                 ></relewise-search-bar>    
             ${(this.searchBarInFocus &&
                 this.hasCompletedSearchRequest &&
                 this.term) ||
-                this.resultBoxIsHovered ? 
+                this.resultBoxIsHovered ?
                 html`<relewise-product-search-overlay-results
                     .selectedIndex=${this.selectedIndex}
                     .results=${this.results} 
-                    .setSearchTerm=${(term: string)=> this.setSearchTerm(term)}
+                    .setSearchTerm=${(term: string) => this.setSearchTerm(term)}
                     .noResultsMessage=${localization?.searchResults?.noResults ?? 'No products found'}
-                    .setResultOverlayHovered=${(hovered: boolean) => this.resultBoxIsHovered = hovered }>
+                    .setResultOverlayHovered=${(hovered: boolean) => this.resultBoxIsHovered = hovered}>
                     </relewise-product-search-overlay-results> ` : nothing
             }
         `;