fix(atomic): fix clicks for recommendation lists in grid display mode (…

…#4623) This PR ensures that clicks on grid display mode result cards open the result/product for `atomic-recs-list`, `atomic-ipx-recs-list` and `atomic-commerce-recommendation-list`, as with other types of result lists. https://coveord.atlassian.net/browse/KIT-3705
coveo · Nov 4, 2024 · 38970c3 · 38970c3
1 parent 573b7f3
commit 38970c3
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 11 deletions.
diff --git a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts
@@ -1893,14 +1893,14 @@ export declare interface AtomicRecsList extends Components.AtomicRecsList {}
 
 
 @ProxyCmp({
-  inputs: ['classes', 'content', 'density', 'display', 'imageSize', 'result', 'stopPropagation']
+  inputs: ['classes', 'content', 'density', 'display', 'imageSize', 'linkContent', 'result', 'stopPropagation']
 })
 @Component({
   selector: 'atomic-recs-result',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['classes', 'content', 'density', 'display', 'imageSize', 'result', 'stopPropagation'],
+  inputs: ['classes', 'content', 'density', 'display', 'imageSize', 'linkContent', 'result', 'stopPropagation'],
 })
 export class AtomicRecsResult {
   protected el: HTMLElement;

diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts
@@ -2652,6 +2652,11 @@ export namespace Components {
           * The InteractiveResult item.
          */
         "interactiveResult": RecsInteractiveResult;
+        /**
+          * The result link to use when the result is clicked in a grid layout.
+          * @default - An `atomic-result-link` without any customization.
+         */
+        "linkContent": ParentNode;
         "loadingFlag"?: string;
         /**
           * Internal function used by atomic-recs-list in advanced setups, which lets you bypass the standard HTML template system. Particularly useful for Atomic React
@@ -8646,6 +8651,11 @@ declare namespace LocalJSX {
           * The InteractiveResult item.
          */
         "interactiveResult": RecsInteractiveResult;
+        /**
+          * The result link to use when the result is clicked in a grid layout.
+          * @default - An `atomic-result-link` without any customization.
+         */
+        "linkContent"?: ParentNode;
         "loadingFlag"?: string;
         /**
           * Internal function used by atomic-recs-list in advanced setups, which lets you bypass the standard HTML template system. Particularly useful for Atomic React

diff --git a/...ents/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.tsx b/...ents/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.tsx
@@ -322,10 +322,7 @@ export class AtomicCommerceRecommendationList
         this.imageSize
       ),
       content: this.productTemplateProvider.getTemplateContent(product),
-      linkContent:
-        this.display === 'grid'
-          ? this.productTemplateProvider.getLinkTemplateContent(product)
-          : this.productTemplateProvider.getEmptyLinkTemplateContent(),
+      linkContent: this.productTemplateProvider.getLinkTemplateContent(product),
       store: this.bindings.store,
       density: this.density,
       display: this.display,

diff --git a/.../atomic/src/components/ipx/atomic-ipx-recs-list/atomic-recs-list/atomic-ipx-recs-list.tsx b/.../atomic/src/components/ipx/atomic-ipx-recs-list/atomic-recs-list/atomic-ipx-recs-list.tsx
@@ -350,6 +350,8 @@ export class AtomicIPXRecsList implements InitializableComponent<RecsBindings> {
         this.imageSize
       ),
       content: this.itemTemplateProvider.getTemplateContent(recommendation),
+      linkContent:
+        this.itemTemplateProvider.getLinkTemplateContent(recommendation),
       store: this.bindings.store,
       density: this.density,
       display: this.display,

diff --git a/packages/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx b/packages/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx
@@ -326,6 +326,8 @@ export class AtomicRecsList implements InitializableComponent<RecsBindings> {
         this.imageSize
       ),
       content: this.itemTemplateProvider.getTemplateContent(recommendation),
+      linkContent:
+        this.itemTemplateProvider.getLinkTemplateContent(recommendation),
       store: this.bindings.store,
       density: this.density,
       display: this.display,

diff --git a/packages/atomic/src/components/recommendations/atomic-recs-result/atomic-recs-result.tsx b/packages/atomic/src/components/recommendations/atomic-recs-result/atomic-recs-result.tsx
@@ -1,5 +1,6 @@
 import {Component, h, Prop, Element, Listen, Host} from '@stencil/core';
 import {RecsInteractiveResult, RecsResult} from '..';
+import {parentNodeToString} from '../../../utils/dom-utils';
 import {applyFocusVisiblePolyfill} from '../../../utils/initialization-utils';
 import {
   InteractiveItemContextEvent,
@@ -29,6 +30,7 @@ import {AtomicRecsStore} from '../atomic-recs-interface/store';
 export class AtomicRecsResult {
   private layout!: ItemLayout;
   private resultRootRef?: HTMLElement;
+  private linkContainerRef?: HTMLElement;
   private executedRenderingFunctionOnce = false;
   @Element() host!: HTMLElement;
 
@@ -37,6 +39,13 @@ export class AtomicRecsResult {
    */
   @Prop() stopPropagation?: boolean;
 
+  /**
+   * The result link to use when the result is clicked in a grid layout.
+   *
+   * @default - An `atomic-result-link` without any customization.
+   */
+  @Prop() linkContent: ParentNode = new DocumentFragment();
+
   /**
    * The result item.
    */
@@ -94,6 +103,18 @@ export class AtomicRecsResult {
    */
   @Prop() renderingFunction: ItemRenderingFunction;
 
+  @Listen('click')
+  public handleClick(event: MouseEvent) {
+    if (this.stopPropagation) {
+      event.stopPropagation();
+    }
+    this.host
+      .shadowRoot!.querySelector<HTMLAnchorElement>(
+        '.link-container > atomic-result-link a:not([slot])'
+      )
+      ?.click();
+  }
+
   @Listen('atomic/resolveResult')
   public resolveResult(event: ItemContextEvent<RecsResult>) {
     event.preventDefault();
@@ -133,11 +154,12 @@ export class AtomicRecsResult {
   }
 
   private getContentHTML() {
-    return Array.from(this.content!.children)
-      .map((child) => child.outerHTML)
-      .join('');
+    return parentNodeToString(this.content!);
   }
 
+  private getLinkHTML() {
+    return parentNodeToString(this.linkContent);
+  }
   private get isCustomRenderFunctionMode() {
     return this.renderingFunction !== undefined;
   }
@@ -158,6 +180,10 @@ export class AtomicRecsResult {
             class="result-root"
             ref={(ref) => (this.resultRootRef = ref)}
           ></div>
+          <div
+            class="link-container"
+            ref={(ref) => (this.linkContainerRef = ref)}
+          ></div>
         </Host>
       );
     }
@@ -171,6 +197,7 @@ export class AtomicRecsResult {
             .join(' ')}`}
           innerHTML={this.getContentHTML()}
         ></div>
+        <div class="link-container" innerHTML={this.getLinkHTML()}></div>
       </Host>
     );
   }
@@ -186,7 +213,8 @@ export class AtomicRecsResult {
     if (this.shouldExecuteRenderFunction()) {
       const customRenderOutputAsString = this.renderingFunction!(
         this.result,
-        this.resultRootRef!
+        this.resultRootRef!,
+        this.linkContainerRef!
       );
 
       this.resultRootRef!.className += ` ${this.layout

diff --git a/packages/atomic/src/pages/index.html b/packages/atomic/src/pages/index.html
@@ -230,7 +230,6 @@
               </atomic-result-template>
 
               <atomic-result-template>
-                <template slot="link"> </template>
                 <template>
                   <style>
                     .field {