diff --git a/CHANGELOG.md b/CHANGELOG.md
index 58f83dad..c1c0236a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
## [Unreleased]
+### Added
+- List name to GTM `productClick` event.
+- Passing `listName` and `position` prop to Product Summary.
+
+### Fixed
+- `trackingId` is now being used on `RelatedProducts` shelf.
+- Shelf item's position now starts at 1.
## [1.44.2] - 2020-12-01
### Fixed
diff --git a/react/RelatedProducts.js b/react/RelatedProducts.js
index b3807121..89dc52d7 100644
--- a/react/RelatedProducts.js
+++ b/react/RelatedProducts.js
@@ -7,6 +7,7 @@ import { useDevice } from 'vtex.device-detector'
import { ProductListContext } from 'vtex.product-list-context'
import { useProduct } from 'vtex.product-context'
import { useCssHandles } from 'vtex.css-handles'
+import { useTreePath } from 'vtex.render-runtime'
import productRecommendationsQuery from './queries/productRecommendations.gql'
import ProductList from './components/ProductList'
@@ -31,12 +32,23 @@ const RelatedProducts = ({
productQuery,
productList,
recommendation: cmsRecommendation,
+ trackingId: rawTrackingId,
}) => {
const handles = useCssHandles(CSS_HANDLES)
const { isMobile } = useDevice()
+ const treePath = useTreePath()
const productContext = useProduct()
+ let trackingId = rawTrackingId
+
+ if (!trackingId) {
+ // Taking the block name to pass to listName if no trackingId is passed
+ const treePathList =
+ (typeof treePath === 'string' && treePath.split()) || []
+ trackingId = treePathList[treePathList.length - 1] || 'List of products'
+ }
+
const productId =
path(['product', 'productId'], productQuery) ||
path(['product', 'productId'], productContext)
@@ -74,10 +86,11 @@ const RelatedProducts = ({
loading,
...productList,
isMobile,
+ trackingId,
}
return (
@@ -100,6 +113,7 @@ RelatedProducts.propTypes = {
}),
/** ProductList schema configuration */
productList: PropTypes.shape(productListSchemaPropTypes),
+ trackingId: PropTypes.string,
}
RelatedProducts.defaultProps = {
diff --git a/react/Shelf.js b/react/Shelf.js
index 996d7a1e..386040a2 100644
--- a/react/Shelf.js
+++ b/react/Shelf.js
@@ -38,7 +38,7 @@ const Shelf = props => {
// Taking the block name to pass to listName if no trackingId is passed
const treePathList =
(typeof treePath === 'string' && treePath.split()) || []
- trackingId = treePathList[treePathList.length - 1] || 'Shelf'
+ trackingId = treePathList[treePathList.length - 1] || 'List of products'
}
const filteredProducts = useMemo(() => {
@@ -52,6 +52,7 @@ const Shelf = props => {
loading,
paginationDotsVisibility,
products: filteredProducts,
+ trackingId,
}
if (loading) {
diff --git a/react/__mocks__/vtex.native-types/index.js b/react/__mocks__/vtex.native-types/index.js
index dfa25ea8..e155ad94 100644
--- a/react/__mocks__/vtex.native-types/index.js
+++ b/react/__mocks__/vtex.native-types/index.js
@@ -2,3 +2,4 @@ import React from 'react'
import { FormattedMessage } from 'react-intl'
export const IOMessage = props =>
+export const formatIOMessage = message => message
diff --git a/react/components/ProductList.js b/react/components/ProductList.js
index b9575bdc..07234b0f 100644
--- a/react/components/ProductList.js
+++ b/react/components/ProductList.js
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types'
import React, { Fragment } from 'react'
import ReactResizeDetector from 'react-resize-detector'
-import { IOMessage } from 'vtex.native-types'
+import { IOMessage, formatIOMessage } from 'vtex.native-types'
import { useCssHandles } from 'vtex.css-handles'
import {
@@ -37,12 +37,20 @@ const ProductList = ({
minItemsPerPage,
paginationDotsVisibility,
navigationStep: navigationStepProp,
+ trackingId,
}) => {
const handles = useCssHandles(CSS_HANDLES)
const navigationStep = Number.isNaN(parseInt(navigationStepProp, 10))
? navigationStepProp
: parseInt(navigationStepProp, 10)
+ let listName = trackingId
+
+ if (!listName) {
+ listName =
+ showTitle && titleText ? formatIOMessage(titleText) : 'List of products'
+ }
+
return products && !products.length ? null : (
{showTitle && (
@@ -68,6 +76,7 @@ const ProductList = ({
navigationStep={navigationStep}
minItemsPerPage={minItemsPerPage}
paginationDotsVisibility={paginationDotsVisibility}
+ listName={listName}
/>
)}
@@ -102,6 +111,7 @@ ProductList.propTypes = {
'desktopOnly',
'mobileOnly',
]),
+ trackingId: PropTypes.string,
...productListSchemaPropTypes,
}
diff --git a/react/components/ShelfContent.js b/react/components/ShelfContent.js
index 0ba9d977..eeb9cc37 100644
--- a/react/components/ShelfContent.js
+++ b/react/components/ShelfContent.js
@@ -143,6 +143,7 @@ class ShelfContent extends Component {
navigationStep,
minItemsPerPage,
paginationDotsVisibility,
+ listName,
} = this.props
const { currentSlide } = this.state
@@ -191,7 +192,12 @@ class ShelfContent extends Component {
key={path(['productId'], item) || index}
defaultWidth={DEFAULT_SHELF_ITEM_WIDTH}
>
-
+
))}
@@ -249,6 +255,8 @@ ShelfContent.propTypes = {
isMobile: shelfContentPropTypes.isMobile,
/** Gap between Shelf Items */
gap: shelfContentPropTypes.gap,
+ /** Title of the shelf */
+ listName: shelfContentPropTypes.listName,
}
export default withCssHandles(CSS_HANDLES)(ShelfContent)
diff --git a/react/components/ShelfItem.js b/react/components/ShelfItem.js
index fa4fe3a0..5ddcf7f3 100644
--- a/react/components/ShelfItem.js
+++ b/react/components/ShelfItem.js
@@ -9,7 +9,7 @@ import { usePixel } from 'vtex.pixel-manager/PixelContext'
* ShelfItem Component. Normalizes the item received in the props
* to adapt to the extension point prop.
*/
-const ShelfItem = ({ item, summary }) => {
+const ShelfItem = ({ item, summary, position, listName }) => {
const { push } = usePixel()
const newSummary = useMemo(() => assocPath(['name', 'tag'], 'h2', summary), [
summary,
@@ -23,14 +23,18 @@ const ShelfItem = ({ item, summary }) => {
push({
event: 'productClick',
product,
+ list: listName,
+ position,
})
- }, [product, push])
+ }, [product, position, listName, push])
return (
)
diff --git a/react/utils/propTypes.js b/react/utils/propTypes.js
index 4af35f1d..9f14c989 100644
--- a/react/utils/propTypes.js
+++ b/react/utils/propTypes.js
@@ -105,4 +105,6 @@ export const shelfContentPropTypes = {
isMobile: PropTypes.bool,
/** Gap between Shelf Items */
gap: PropTypes.oneOf(getGapPaddingValues()),
+ /** Title of the shelf */
+ listName: PropTypes.string.isRequired,
}