fix(atomic-react): render empty link container when display is other …

…than grid (#4604) https://coveord.atlassian.net/browse/KIT-3561 At the moment, we're rendering the default link container (i.e., an AtomicProductLink) even on list and table display, making the entire result clickable. This should only be the case in grid display. **Before fix**: <video src=https://github.com/user-attachments/assets/24d6321c-f8d7-48de-9a35-b8da3b8f9345 /> **After fix**: <video src=https://github.com/user-attachments/assets/b35e26b3-3586-4c20-9e04-5310345fd48b />
coveo · Oct 29, 2024 · 91a2538 · 91a2538
1 parent 44563fd
commit 91a2538
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git a/packages/atomic-react/src/components/commerce/CommerceProductListWrapper.tsx b/packages/atomic-react/src/components/commerce/CommerceProductListWrapper.tsx
@@ -44,9 +44,11 @@ export const ListWrapper: React.FC<WrapperProps> = (props) => {
           return renderToString(templateResult.contentTemplate);
         } else {
           createRoot(root).render(templateResult);
-          createRoot(linkContainer!).render(
-            <AtomicProductLink></AtomicProductLink>
-          );
+          otherProps.display === 'grid'
+            ? createRoot(linkContainer!).render(
+                <AtomicProductLink></AtomicProductLink>
+              )
+            : createRoot(linkContainer!).render(<></>);
           return renderToString(templateResult);
         }
       }

diff --git a/packages/atomic-react/src/components/commerce/CommerceRecommendationListWrapper.tsx b/packages/atomic-react/src/components/commerce/CommerceRecommendationListWrapper.tsx
@@ -44,9 +44,11 @@ export const ListWrapper: React.FC<WrapperProps> = (props) => {
           return renderToString(templateResult.contentTemplate);
         } else {
           createRoot(root).render(templateResult);
-          createRoot(linkContainer!).render(
-            <AtomicProductLink></AtomicProductLink>
-          );
+          otherProps.display === 'grid'
+            ? createRoot(linkContainer!).render(
+                <AtomicProductLink></AtomicProductLink>
+              )
+            : createRoot(linkContainer!).render(<></>);
           return renderToString(templateResult);
         }
       }

diff --git a/packages/atomic-react/src/components/recommendation/RecsListWrapper.tsx b/packages/atomic-react/src/components/recommendation/RecsListWrapper.tsx
@@ -42,9 +42,11 @@ export const RecsListWrapper: React.FC<WrapperProps> = (props) => {
         return renderToString(templateResult.contentTemplate);
       } else {
         createRoot(root).render(templateResult);
-        createRoot(linkContainer!).render(
-          <AtomicResultLink></AtomicResultLink>
-        );
+        otherProps.display === 'grid'
+          ? createRoot(linkContainer!).render(
+              <AtomicResultLink></AtomicResultLink>
+            )
+          : createRoot(linkContainer!).render(<></>);
         return renderToString(templateResult);
       }
     });

diff --git a/packages/atomic-react/src/components/search/ResultListWrapper.tsx b/packages/atomic-react/src/components/search/ResultListWrapper.tsx
@@ -42,9 +42,11 @@ export const ResultListWrapper: React.FC<WrapperProps> = (props) => {
         return renderToString(templateResult.contentTemplate);
       } else {
         createRoot(root).render(templateResult);
-        createRoot(linkContainer!).render(
-          <AtomicResultLink></AtomicResultLink>
-        );
+        otherProps.display === 'grid'
+          ? createRoot(linkContainer!).render(
+              <AtomicResultLink></AtomicResultLink>
+            )
+          : createRoot(linkContainer!).render(<></>);
         return renderToString(templateResult);
       }
     });