Merge pull request #191 from vtex-apps/fix/autocomplete-click-event

Add term to autocomplete click event
vtex-apps · Oct 10, 2023 · b6f8ee6 · b6f8ee6
2 parents 930f286 + f3dae6e
commit b6f8ee6
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+- Autocomplete click event.
+
 ## [2.16.6] - 2023-10-05
 
 ## [2.16.5] - 2023-09-15

diff --git a/react/components/Autocomplete/components/TileList/TileList.tsx b/react/components/Autocomplete/components/TileList/TileList.tsx
@@ -18,7 +18,7 @@ interface TileListProps {
   totalProducts: number
   layout: ProductLayout
   isLoading: boolean
-  onProductClick: (product: string, position: number) => void
+  onProductClick: (product: string, position: number, term: string) => void
   onSeeAllClick: (term: string) => void
   HorizontalProductSummary?: React.ComponentType<{
     product: Product
@@ -73,14 +73,14 @@ const TileList: FC<TileListProps> = ({
                       <HorizontalProductSummary
                         product={productSummary}
                         actionOnClick={() => {
-                          onProductClick(productSummary.productId, index)
+                          onProductClick(productSummary.productId, index, term)
                         }}
                       />
                     ) : (
                       <CustomListItem
                         product={productSummary}
                         onClick={() => {
-                          onProductClick(productSummary.productId, index)
+                          onProductClick(productSummary.productId, index, term)
                         }}
                       />
                     )
@@ -89,7 +89,7 @@ const TileList: FC<TileListProps> = ({
                       id="product-summary"
                       product={productSummary}
                       actionOnClick={() => {
-                        onProductClick(productSummary.productId, index)
+                        onProductClick(productSummary.productId, index, term)
                       }}
                     />
                   )}

diff --git a/react/components/Autocomplete/index.tsx b/react/components/Autocomplete/index.tsx
@@ -521,8 +521,8 @@ class AutoComplete extends React.Component<
           totalProducts={totalProducts || 0}
           layout={this.getProductLayout()}
           isLoading={isProductsLoading}
-          onProductClick={(id, position) => {
-            handleProductClick(push, runtime.page)(id, position)
+          onProductClick={(id, position, term) => {
+            handleProductClick(push, runtime.page)(id, position, term)
             this.closeModal()
           }}
           onSeeAllClick={term => {

diff --git a/react/utils/pixel.ts b/react/utils/pixel.ts
@@ -10,7 +10,7 @@ export enum EventType {
 }
 
 export function handleProductClick(push: (data: any) => void, page: string) {
-  return (productId: string, position: number) =>
+  return (productId: string, position: number, term: string) =>
     push({
       page,
       event: EVENT_NAME,
@@ -19,6 +19,7 @@ export function handleProductClick(push: (data: any) => void, page: string) {
         productId,
         position,
       },
+      term,
     })
 }