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, }