feat: add Activity Flow data attributes support to ProductSummary com… #414

thiagopereira-vtex · 2025-10-24T12:43:52Z

This pull request adds support for passing custom Activity Flow data attributes to product summary components, enabling more flexible analytics and tracking. The changes introduce new props to handle these attributes and ensure they are correctly spread onto relevant HTML elements in both individual product summaries and product summary lists.

Activity Flow data attributes support:

Added an afDataAttributes prop to ProductSummaryCustom and ProductSummaryWrapper, allowing custom data attributes to be spread onto the section element for each product summary. [1] [2] [3] [4]
Introduced an afDataAttributesList prop to ProductSummaryList and ProductSummaryListWithoutQuery, enabling an array of data attribute objects to be passed and applied to each corresponding product summary in the list. [1] [2] [3] [4] [5] [6] [7] [8]
Updated rendering logic in ProductSummaryListWithoutQuery to pass the correct data attributes from afDataAttributesList to each product summary based on its index. [1] [2]
Extended type definitions to document the new props and provide usage examples for Activity Flow data attributes. [1] [2] [3] [4]

…ponents

vtex-io-ci-cd · 2025-10-24T12:43:55Z

Hi! I'm VTEX IO CI/CD Bot and I'll be helping you to publish your app! 🤖

Please select which version do you want to release:

Patch (backwards-compatible bug fixes)
Minor (backwards-compatible functionality)
Major (incompatible API changes)

And then you just need to merge your PR when you are ready! There is no need to create a release commit/tag.

No thanks, I would rather do it manually 😞

vtex-io-docs-bot · 2025-10-24T12:44:01Z

Beep boop 🤖

I noticed you didn't make any changes at the docs/ folder

There's nothing new to document 🤔
I'll do it later 😞

In order to keep track, I'll create an issue if you decide now is not a good time

I just updated 🎉🎉

salesfelipe

Also it is missing a changelog entry

salesfelipe · 2025-10-30T17:59:13Z

react/ProductSummaryList.tsx

+   *   { 'data-af-category': 'clothing', 'data-af-position': '2' }
+   * ]}
+   */
+  afDataAttributesList?: Array<Record<string, string>>


I'm wondering if it is better to be a function instead. Something like (product: Product) => Record<string,string>

So each element calls the function before rendering and gets the data attributes..

Just wondering because by receiving a fixed list, you need the data upfront, which is fine for Recommendations, but not for the other Static shelfs and since this is a shared component....

…mary components

salesfelipe

It looks good, but I'm wondering wether we should be so explicity about Acitivitty Flow. This feature allow us to add data attributes to our HTML Elements, do we really want to be attached to AF on this level?

… in ProductSummary components

# Conflicts: # CHANGELOG.md # react/ProductSummaryCustom.tsx

vsseixaso · 2025-12-03T18:16:49Z

react/ProductSummaryCustom.tsx

            style={{ maxWidth: PRODUCT_SUMMARY_MAX_WIDTH }}
            ref={inViewRef}
            data-van-aid={eventParameters}
+            {...(extraProductProps ?? {})}


Does it make sense to put it as the first attribute on the section? The idea is to avoid overriding attributes defined above with this spread, like className, so we don't change the value of attributes set by the component itself.

react/ProductSummaryList.tsx

react/ProductSummaryListWithoutQuery.tsx

vsseixaso · 2025-12-03T18:20:22Z

react/ProductSummaryListWithoutQuery.tsx

    listName?: string
    position?: number
    placement?: string
+    extraProductProps?: Record<string, string>


Does it make sense to prefix all attributes with data-*? It can be a check.
Is an way to avoid others unexpected attributes.

Co-authored-by: Vinícius Seixas <[email protected]>

…yCustom Added a runtime validation to ensure all keys in extraProductProps start with 'data-'. Invalid keys will trigger a console warning. Updated the type definition for extraProductProps to enforce this requirement.

vsseixaso · 2025-12-09T12:01:04Z

react/ProductSummaryCustom.tsx

+  // Validate that all keys in extraProductProps start with 'data-'
+  if (extraProductProps) {
+    const invalidKeys = Object.keys(extraProductProps).filter(
+      (key) => !key.startsWith('data-')
+    )
+
+    if (invalidKeys.length > 0) {
+      console.warn(
+        `extraProductProps contains keys that don't start with 'data-': ${invalidKeys.join(
+          ', '
+        )}`
+      )
+    }
+  }


This code warns about keys that don't start with data-, but it doesn't filter them out, extraProductProps is still passed to the section as-is.

Copilot

Pull request overview

This pull request adds support for custom Activity Flow data attributes to product summary components, enabling flexible analytics and tracking capabilities.

Introduces extraProductProps and buildExtraProductProps props for passing custom data attributes to product summaries
Implements sanitization logic to ensure only valid data-* attributes are applied
Extends both individual product summary and list components to support these new props

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
react/ProductSummaryCustom.tsx	Adds `extraProductProps` prop, implements `sanitizeDataAttributes` function to validate data attributes, and spreads sanitized attributes onto the section element
react/ProductSummaryListWithoutQuery.tsx	Introduces `buildExtraProductProps` function prop that generates product-specific data attributes and passes them to individual product summaries
react/ProductSummaryList.tsx	Adds `buildExtraProductProps` prop and forwards it to `ProductSummaryListWithoutQuery` component
react/utils/shouldShowSponsoredBadge.ts	Minor whitespace formatting change
react/mocks/vtex.render-runtime.js	Minor whitespace formatting change
CHANGELOG.md	Documents the addition of optional props support for Product Summary components

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

react/ProductSummaryListWithoutQuery.tsx

CHANGELOG.md

Co-authored-by: Copilot <[email protected]>

vmourac-vtex

@thiagopereira-vtex pedi um review do Copilot para ajudar. Gostei de algumas recomendações, acho que vale olhar.
No mais faço só uma sugestão de mover a função de sanitização para um local mais adequado.

vmourac-vtex · 2025-12-09T17:08:24Z

react/ProductSummaryCustom.tsx

+/**
+ * Type for data attributes that must start with 'data-'
+ * Note: TypeScript 3.9 doesn't support template literal types,
+ * so this is a documentation type. Runtime validation ensures keys start with 'data-'
+ */
+type DataAttributes = Record<string, string>
+
+const sanitizeDataAttributes = (
+  extraProductProps?: DataAttributes
+): DataAttributes | undefined => {
+  if (!extraProductProps) return undefined
+
+  const sanitized: DataAttributes = {}
+  const invalidKeys: string[] = []
+
+  Object.keys(extraProductProps).forEach((key) => {
+    if (key.startsWith('data-')) {
+      sanitized[key] = extraProductProps[key]
+    } else {
+      invalidKeys.push(key)
+    }
+  })
+
+  if (invalidKeys.length > 0) {
+    console.warn(
+      `extraProductProps contains keys that don't start with 'data-': ${invalidKeys.join(
+        ', '
+      )}`
+    )
+  }
+
+  return sanitized


@thiagopereira-vtex Além da consideração acima feita pelo Copilot, sobre o retorno da função, sugiro somente de mover a função para fora ProductSummaryCustom, para a pasta /utils/, em um arquivo dedicado ou dentro de /utils/normalize.

A ideia é só desacoplar a função do componente para torna-la mais testável e reutilizável

Copilot

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 7 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Moved the data attributes type definition and sanitization logic into a separate utility function. This improves code organization and maintains the validation of keys starting with 'data-'. Updated the component to utilize the new utility for handling extra product properties.

vmourac-vtex

LGTM

feat: add Activity Flow data attributes support to ProductSummary com…

d409d5b

…ponents

thiagopereira-vtex requested review from a team as code owners October 24, 2025 12:43

thiagopereira-vtex requested review from RodrigoTadeuF, leo-prange-vtex and vmourac-vtex and removed request for a team October 24, 2025 12:43

salesfelipe reviewed Oct 30, 2025

View reviewed changes

refactor: update Activity Flow data attributes handling in ProductSum…

c564b0f

…mary components

salesfelipe approved these changes Oct 30, 2025

View reviewed changes

chore: update CHANGELOG

334d65d

salesfelipe assigned thiagopereira-vtex Oct 30, 2025

salesfelipe added the enhancement New feature or request label Oct 30, 2025

salesfelipe approved these changes Oct 30, 2025

View reviewed changes

refactor: rename Activity Flow data attributes to extra product props…

4ff8a62

… in ProductSummary components

salesfelipe approved these changes Oct 30, 2025

View reviewed changes

Merge branch 'master' into feat/rr-352-data-af

0856225

# Conflicts: # CHANGELOG.md # react/ProductSummaryCustom.tsx

vsseixaso reviewed Dec 3, 2025

View reviewed changes

vsseixaso requested changes Dec 3, 2025

View reviewed changes

thiagopereira-vtex and others added 2 commits December 8, 2025 17:01

Update react/ProductSummaryList.tsx

91ca212

Co-authored-by: Vinícius Seixas <[email protected]>

thiagopereira-vtex requested a review from vsseixaso December 8, 2025 20:15

vsseixaso requested changes Dec 9, 2025

View reviewed changes

fix: filter invalid params

586467d

vmourac-vtex requested a review from Copilot December 9, 2025 16:55

Copilot started reviewing on behalf of vmourac-vtex December 9, 2025 16:55 View session

Copilot AI reviewed Dec 9, 2025

View reviewed changes

react/ProductSummaryListWithoutQuery.tsx Outdated Show resolved Hide resolved

CHANGELOG.md Outdated Show resolved Hide resolved

Update react/ProductSummaryListWithoutQuery.tsx

caf525c

Co-authored-by: Copilot <[email protected]>

Update CHANGELOG.md

8a6158e

Co-authored-by: Copilot <[email protected]>

vtex-apps deleted a comment from Copilot AI Dec 9, 2025

thiagopereira-vtex requested a review from vsseixaso December 9, 2025 17:29

vmourac-vtex requested changes Dec 9, 2025

View reviewed changes

thiagopereira-vtex requested a review from Copilot December 9, 2025 19:18

Copilot started reviewing on behalf of thiagopereira-vtex December 9, 2025 19:19 View session

feat: add Activity Flow data attributes support to ProductSummary com… #414

Are you sure you want to change the base?

feat: add Activity Flow data attributes support to ProductSummary com… #414

Uh oh!

Conversation

thiagopereira-vtex commented Oct 24, 2025

Uh oh!

vtex-io-ci-cd bot commented Oct 24, 2025 • edited by thiagopereira-vtex Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vtex-io-docs-bot bot commented Oct 24, 2025 • edited by thiagopereira-vtex Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

salesfelipe left a comment

Choose a reason for hiding this comment

Uh oh!

salesfelipe Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

salesfelipe left a comment

Choose a reason for hiding this comment

Uh oh!

vsseixaso Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

vsseixaso Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

vsseixaso Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

vmourac-vtex left a comment

Choose a reason for hiding this comment

Uh oh!

vmourac-vtex Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

vmourac-vtex left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

vtex-io-ci-cd bot commented Oct 24, 2025 •

edited by thiagopereira-vtex

Loading

vtex-io-docs-bot bot commented Oct 24, 2025 •

edited by thiagopereira-vtex

Loading

vmourac-vtex Dec 9, 2025 •

edited

Loading