From a0ddaac7f9a2797e2883c5418dc3f06713e31b53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?I=CC=81caro?= Date: Mon, 3 May 2021 20:00:22 -0300 Subject: [PATCH 1/5] Adding compatibility with new GTM major --- CHANGELOG.md | 3 +++ react/components/ProductList.js | 6 +++++- react/components/ShelfContent.js | 10 +++++++++- react/components/ShelfItem.js | 7 +++++-- react/utils/propTypes.js | 2 ++ 5 files changed, 24 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 58f83dad..de84a6f4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,9 @@ 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` prop to Product Summary. ## [1.44.2] - 2020-12-01 ### Fixed diff --git a/react/components/ProductList.js b/react/components/ProductList.js index b9575bdc..f353c060 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 { @@ -43,6 +43,9 @@ const ProductList = ({ ? navigationStepProp : parseInt(navigationStepProp, 10) + const formattedTitle = + showTitle && titleText ? formatIOMessage(titleText) : 'List of products' + return products && !products.length ? null : ( {showTitle && ( @@ -68,6 +71,7 @@ const ProductList = ({ navigationStep={navigationStep} minItemsPerPage={minItemsPerPage} paginationDotsVisibility={paginationDotsVisibility} + listName={formattedTitle} /> )} diff --git a/react/components/ShelfContent.js b/react/components/ShelfContent.js index 0ba9d977..009bfb52 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..7771e1a9 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,13 +23,16 @@ 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, } From be9d210ecafdcf4229396974b1f20d7a28c0e7e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?I=CC=81caro?= Date: Tue, 4 May 2021 13:54:34 -0300 Subject: [PATCH 2/5] Fixing tracking id usage by RelatedProducts shelf --- CHANGELOG.md | 3 +++ react/RelatedProducts.js | 16 +++++++++++++++- react/Shelf.js | 3 ++- react/components/ProductList.js | 12 +++++++++--- 4 files changed, 29 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index de84a6f4..19077c20 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - List name to GTM `productClick` event. - Passing `listName` prop to Product Summary. +### Fixed +- `trackingId` is now being used on `RelatedProducts` shelf + ## [1.44.2] - 2020-12-01 ### Fixed - Prop `maxItems`. 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/components/ProductList.js b/react/components/ProductList.js index f353c060..07234b0f 100644 --- a/react/components/ProductList.js +++ b/react/components/ProductList.js @@ -37,14 +37,19 @@ const ProductList = ({ minItemsPerPage, paginationDotsVisibility, navigationStep: navigationStepProp, + trackingId, }) => { const handles = useCssHandles(CSS_HANDLES) const navigationStep = Number.isNaN(parseInt(navigationStepProp, 10)) ? navigationStepProp : parseInt(navigationStepProp, 10) - const formattedTitle = - showTitle && titleText ? formatIOMessage(titleText) : 'List of products' + let listName = trackingId + + if (!listName) { + listName = + showTitle && titleText ? formatIOMessage(titleText) : 'List of products' + } return products && !products.length ? null : ( @@ -71,7 +76,7 @@ const ProductList = ({ navigationStep={navigationStep} minItemsPerPage={minItemsPerPage} paginationDotsVisibility={paginationDotsVisibility} - listName={formattedTitle} + listName={listName} /> )} @@ -106,6 +111,7 @@ ProductList.propTypes = { 'desktopOnly', 'mobileOnly', ]), + trackingId: PropTypes.string, ...productListSchemaPropTypes, } From 6192abc448c7903e0b47923b7fd977f6f1a7f685 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?I=CC=81caro?= Date: Tue, 4 May 2021 14:07:55 -0300 Subject: [PATCH 3/5] Fixing tests --- react/__mocks__/vtex.native-types/index.js | 1 + 1 file changed, 1 insertion(+) 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 From c97be3918d9d1964cdd7ab2c11a5061d2ac1cb37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?I=CC=81caro?= Date: Fri, 14 May 2021 11:50:07 -0300 Subject: [PATCH 4/5] Fixing shelf items position --- CHANGELOG.md | 3 ++- react/components/ShelfContent.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 19077c20..7973d714 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,7 +11,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Passing `listName` prop to Product Summary. ### Fixed -- `trackingId` is now being used on `RelatedProducts` shelf +- `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/components/ShelfContent.js b/react/components/ShelfContent.js index 009bfb52..eeb9cc37 100644 --- a/react/components/ShelfContent.js +++ b/react/components/ShelfContent.js @@ -194,7 +194,7 @@ class ShelfContent extends Component { > From 464d4f50f2457876f4e3b30e01e05f72c182da92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?I=CC=81caro?= Date: Thu, 3 Jun 2021 17:58:09 -0300 Subject: [PATCH 5/5] Passing position prop to Product Summary --- CHANGELOG.md | 2 +- react/components/ShelfItem.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7973d714..c1c0236a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,7 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] ### Added - List name to GTM `productClick` event. -- Passing `listName` prop to Product Summary. +- Passing `listName` and `position` prop to Product Summary. ### Fixed - `trackingId` is now being used on `RelatedProducts` shelf. diff --git a/react/components/ShelfItem.js b/react/components/ShelfItem.js index 7771e1a9..5ddcf7f3 100644 --- a/react/components/ShelfItem.js +++ b/react/components/ShelfItem.js @@ -34,6 +34,7 @@ const ShelfItem = ({ item, summary, position, listName }) => { product={product} listName={listName} actionOnClick={pushPixelProductClick} + position={position} {...newSummary} /> )