add data-attributes to the Facets checkbox

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Changed
+
+- Add attributes to the checkbox component to be able to collect data through activity flow
+
 ## [3.136.0] - 2025-01-16
 
 ### Added

react/components/FacetCheckboxListItem.js

@@ -4,6 +4,7 @@ import { applyModifiers } from 'vtex.css-handles'
 import { Checkbox } from 'vtex.styleguide'
 import { usePixel } from 'vtex.pixel-manager'
 import { useIntl } from 'react-intl'
+import { useRuntime } from 'vtex.render-runtime'
 
 import styles from '../searchResult.css'
 import { pushFilterManipulationPixelEvent } from '../utils/filterManipulationPixelEvents'
@@ -60,6 +61,18 @@ const FacetCheckboxListItem = ({
     intl,
   ])
 
+  const runtimeQuery = useRuntime()?.query
+
+  let initialmap
+  let initialquery
+
+  if (searchQuery?.variables?.fullText === undefined) {
+    initialquery =
+      runtimeQuery?.initialQuery ?? searchQuery?.facets?.queryArgs.query
+
+    initialmap = runtimeQuery?.initialMap ?? searchQuery?.facets?.queryArgs?.map
+  }
+
   return (
     <div
       className={classNames(
@@ -86,6 +99,12 @@ const FacetCheckboxListItem = ({
           onFilterCheck({ ...facet, title: facetTitle })
         }}
         value={name}
+        data-full-text={searchQuery?.variables?.fullText}
+        data-initial-query={initialquery}
+        data-initial-map={initialmap}
+        data-is-clicked={facet.selected.toString()}
+        data-facet-key={facet.key}
+        data-facet-value={facet.value}
       />
     </div>
   )

react/components/FacetItem.js

@@ -5,6 +5,7 @@ import classNames from 'classnames'
 import { useSearchPage } from 'vtex.search-page-context/SearchPageContext'
 import { usePixel } from 'vtex.pixel-manager'
 import { useIntl } from 'react-intl'
+import { useRuntime } from 'vtex.render-runtime'
 
 import { pushFilterManipulationPixelEvent } from '../utils/filterManipulationPixelEvents'
 import SettingsContext from './SettingsContext'
@@ -125,6 +126,18 @@ const FacetItem = ({
     intl,
   ])
 
+  const runtimeQuery = useRuntime()?.query
+
+  let initialmap
+  let initialquery
+
+  if (searchQuery?.variables?.fullText === undefined) {
+    initialquery =
+      runtimeQuery?.initialQuery ?? searchQuery?.facets?.queryArgs.query
+
+    initialmap = runtimeQuery?.initialMap ?? searchQuery?.facets?.queryArgs?.map
+  }
+
   return (
     <div
       className={classes}
@@ -148,8 +161,19 @@ const FacetItem = ({
           setSelected(!selected)
           navigateToFacet({ ...facet, title: facetTitle }, preventRouteChange)
         }}
-        value={facet.name}
         disabled={shouldDisable}
+        value={facet.value}
+        facetKey={facet.key}
+        isClicked={selected.toString()}
+        fullText={searchQuery?.variables?.fullText}
+        initialMap={initialmap}
+        initialQuery={initialquery}
+        data-full-text={searchQuery?.variables?.fullText}
+        data-initial-query={initialquery}
+        data-initial-map={initialmap}
+        data-is-clicked={selected.toString()}
+        data-facet-key={facet.key}
+        data-facet-value={facet.value}
       />
     </div>
   )