feat(tagging): add displayClick to recommendations and customer previ…

…ews (#294) EMP-1110
empathyco · Jun 19, 2023 · 55fb68d · 55fb68d
1 parent fbcf37c
commit 55fb68d
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 29 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@empathyco/x-adapter": "^8.0.0-alpha.22",
-    "@empathyco/x-adapter-platform": "^1.0.0-alpha.77",
+    "@empathyco/x-adapter-platform": "^1.0.0-alpha.79",
     "@empathyco/x-archetype-utils": "^0.1.0-alpha.15",
     "@empathyco/x-components": "^3.0.0-alpha.388",
     "@empathyco/x-deep-merge": "^1.3.0-alpha.29",

diff --git a/src/components/pre-search/custom-query-preview.vue b/src/components/pre-search/custom-query-preview.vue
@@ -20,14 +20,16 @@
             <ArrowRightIcon class="x-icon-lg" />
           </BaseEventButton>
         </template>
-        <div class="x-flex x-gap-16 x-pt-16 max-desktop:x-px-16">
-          <Result
-            v-for="result in results"
-            :key="result.id"
-            :result="result"
-            class="x-w-[calc(38vw-16px)] desktop:x-w-[216px]"
-          />
-        </div>
+        <DisplayClickProvider resultFeature="brand_recommendations">
+          <div class="x-flex x-gap-16 x-pt-16 max-desktop:x-px-16">
+            <Result
+              v-for="result in results"
+              :key="result.id"
+              :result="result"
+              class="x-w-[calc(38vw-16px)] desktop:x-w-[216px]"
+            />
+          </div>
+        </DisplayClickProvider>
       </CustomSlidingPanel>
     </div>
   </QueryPreviewList>
@@ -47,10 +49,12 @@
   } from '@empathyco/x-components';
   import { default as Result } from '../results/result.vue';
   import CustomSlidingPanel from '../custom-sliding-panel.vue';
+  import DisplayClickProvider from '../search/display-click-provider.vue';
 
   @Component({
     components: {
       CustomSlidingPanel,
+      DisplayClickProvider,
       QueryPreview,
       Result,
       BaseEventButton,

diff --git a/src/components/predictive-layer/sliding-recommendations.vue b/src/components/predictive-layer/sliding-recommendations.vue
@@ -18,13 +18,15 @@
 
       <Recommendations class="x-flex x-flex-row x-gap-12 x-pl-16 desktop:x-pl-0">
         <template #default="{ recommendation }">
-          <Result
-            :result="recommendation"
-            data-test="recommendation-item"
-            :showDescription="false"
-            :showAddToCart="false"
-            class="x-w-[200px]"
-          />
+          <DisplayClickProvider resultFeature="recommendations">
+            <Result
+              :result="recommendation"
+              data-test="recommendation-item"
+              :showDescription="false"
+              :showAddToCart="false"
+              class="x-w-[200px]"
+            />
+          </DisplayClickProvider>
         </template>
       </Recommendations>
 
@@ -39,11 +41,13 @@
   import { Recommendations } from '@empathyco/x-components/recommendations';
   import { defineComponent } from 'vue';
   import Result from '../results/result.vue';
+  import DisplayClickProvider from '../search/display-click-provider.vue';
 
   export default defineComponent({
     components: {
       ChevronLeftIcon,
       ChevronRightIcon,
+      DisplayClickProvider,
       Recommendations,
       Result,
       SlidingPanel

diff --git a/src/components/results/custom-recommendations.vue b/src/components/results/custom-recommendations.vue
@@ -8,15 +8,17 @@
     </h1>
     <Recommendations v-if="!$x.totalResults">
       <template #layout="{ recommendations }">
-        <BaseGrid
-          #default="{ item: result }"
-          :animation="staggeredFadeAndSlide"
-          :columns="columns"
-          :items="recommendations"
-          class="x-gap-y-32 x-gap-x-16"
-        >
-          <Result :result="result" data-test="recommendation-item" />
-        </BaseGrid>
+        <DisplayClickProvider resultFeature="recommendations">
+          <BaseGrid
+            #default="{ item: result }"
+            :animation="staggeredFadeAndSlide"
+            :columns="columns"
+            :items="recommendations"
+            class="x-gap-y-32 x-gap-x-16"
+          >
+            <Result :result="result" data-test="recommendation-item" />
+          </BaseGrid>
+        </DisplayClickProvider>
       </template>
     </Recommendations>
   </div>
@@ -27,11 +29,13 @@
   import { Recommendations } from '@empathyco/x-components/recommendations';
   import { computed, defineComponent } from 'vue';
   import { useDevice } from '../../composables/use-device.composable';
+  import DisplayClickProvider from '../search/display-click-provider.vue';
   import Result from './result.vue';
 
   export default defineComponent({
     components: {
       BaseGrid,
+      DisplayClickProvider,
       Recommendations,
       Result
     },