From eae122d25e6ae9dc2aec11bb9e6e015b7d2957cb Mon Sep 17 00:00:00 2001 From: Italo Batista Date: Fri, 3 May 2019 14:06:06 -0300 Subject: [PATCH 1/2] Send productClick events to PixelManager --- CHANGELOG.md | 2 ++ manifest.json | 5 +++-- react/ProductList.js | 2 +- react/RelatedProducts.js | 2 +- react/ShelfContent.js | 3 ++- react/ShelfItem.js | 13 ++++++++++++- react/__mocks__/vtex.pixel-manager/PixelContext.js | 9 +++++++++ 7 files changed, 30 insertions(+), 6 deletions(-) create mode 100644 react/__mocks__/vtex.pixel-manager/PixelContext.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 269a5e0d..5524f5aa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ 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 +- Send productClick events to Pixel Manager. ## [1.12.0] - 2019-04-24 ### Changed diff --git a/manifest.json b/manifest.json index 9a8ce7be..9275f5bf 100644 --- a/manifest.json +++ b/manifest.json @@ -22,6 +22,7 @@ "vtex.product-summary": "2.x", "vtex.styleguide": "9.x", "vtex.slider": "0.x", - "vtex.store-icons": "0.x" + "vtex.store-icons": "0.x", + "vtex.pixel-manager": "0.x" } -} +} \ No newline at end of file diff --git a/react/ProductList.js b/react/ProductList.js index 5aef277d..505d4d1a 100644 --- a/react/ProductList.js +++ b/react/ProductList.js @@ -10,7 +10,7 @@ import GapPaddingTypes, { getGapPaddingValues, } from './paddingEnum' import ShelfContent from './ShelfContent' -import ShelfItem from './ShelfItem' +import { ShelfItem } from './ShelfItem' import shelf from './shelf.css' diff --git a/react/RelatedProducts.js b/react/RelatedProducts.js index 9811b087..b2917dd7 100644 --- a/react/RelatedProducts.js +++ b/react/RelatedProducts.js @@ -4,7 +4,7 @@ import React, { Component } from 'react' import ProductList from './ProductList' import { productListSchemaPropTypes } from './propTypes' -import ShelfItem from './ShelfItem' +import { ShelfItem } from './ShelfItem' import shelf from './shelf.css' /** diff --git a/react/ShelfContent.js b/react/ShelfContent.js index ac669d73..e68dd318 100644 --- a/react/ShelfContent.js +++ b/react/ShelfContent.js @@ -15,6 +15,7 @@ import { import { getGapPaddingValues } from './paddingEnum' import ScrollTypes from './ScrollTypes' import ShelfItem from './ShelfItem' +import { shelfItemPropTypes } from './propTypes' import shelf from './shelf.css' @@ -158,7 +159,7 @@ ShelfContent.defaultProps = { ShelfContent.propTypes = { /** List of products */ - products: PropTypes.arrayOf(ShelfItem.propTypes.item), + products: PropTypes.arrayOf(shelfItemPropTypes.item), /** Max Items per page */ itemsPerPage: PropTypes.number.isRequired, /** Max items in shelf */ diff --git a/react/ShelfItem.js b/react/ShelfItem.js index 8fdc0a3e..ab14d876 100644 --- a/react/ShelfItem.js +++ b/react/ShelfItem.js @@ -2,6 +2,7 @@ import React, { Component } from 'react' import { path, assocPath } from 'ramda' import { ExtensionPoint } from 'vtex.render-runtime' +import { Pixel } from 'vtex.pixel-manager/PixelContext' import { shelfItemPropTypes } from './propTypes' import { changeImageUrlSize, toHttps } from './utils/urlHelpers' @@ -10,9 +11,16 @@ import { changeImageUrlSize, toHttps } from './utils/urlHelpers' * ShelfItem Component. Normalizes the item received in the props * to adapt to the extension point prop. */ -export default class ShelfItem extends Component { +export class ShelfItem extends Component { static propTypes = shelfItemPropTypes + sendProductClickEvent = product => { + this.props.push({ + event: 'productClick', + product: product, + }) + } + findAvailableProduct = item => item.sellers.find( ({ commertialOffer = {} }) => commertialOffer.AvailableQuantity > 0 @@ -47,8 +55,11 @@ export default class ShelfItem extends Component { this.sendProductClickEvent(item)} {...newSummary} /> ) } } + +export default Pixel(ShelfItem) diff --git a/react/__mocks__/vtex.pixel-manager/PixelContext.js b/react/__mocks__/vtex.pixel-manager/PixelContext.js new file mode 100644 index 00000000..0af86158 --- /dev/null +++ b/react/__mocks__/vtex.pixel-manager/PixelContext.js @@ -0,0 +1,9 @@ +import React from 'react' + +export function Pixel(Comp) { + return class extends React.Component { + render() { + return {}} subscribe={() => {}} /> + } + } +} From 751f07dee0210fa4cfa541a0a30d31cd8b1d5f7e Mon Sep 17 00:00:00 2001 From: Italo Batista Date: Thu, 9 May 2019 22:40:49 -0300 Subject: [PATCH 2/2] Access shelfItem's propTypes directly from specialist class --- react/ProductList.js | 4 ++-- react/RelatedProducts.js | 8 ++++---- react/ShelfItem.js | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/react/ProductList.js b/react/ProductList.js index 505d4d1a..8be09198 100644 --- a/react/ProductList.js +++ b/react/ProductList.js @@ -10,7 +10,7 @@ import GapPaddingTypes, { getGapPaddingValues, } from './paddingEnum' import ShelfContent from './ShelfContent' -import { ShelfItem } from './ShelfItem' +import { shelfItemPropTypes } from './propTypes' import shelf from './shelf.css' @@ -167,7 +167,7 @@ ProductList.propTypes = { /** Loading status */ loading: PropTypes.bool, /** Graphql data response. */ - products: PropTypes.arrayOf(ShelfItem.propTypes.item), + products: PropTypes.arrayOf(shelfItemPropTypes.item), /** Verifies if is a mobile device. */ isMobile: PropTypes.bool, ...productListSchemaPropTypes, diff --git a/react/RelatedProducts.js b/react/RelatedProducts.js index b2917dd7..902b92b4 100644 --- a/react/RelatedProducts.js +++ b/react/RelatedProducts.js @@ -4,7 +4,7 @@ import React, { Component } from 'react' import ProductList from './ProductList' import { productListSchemaPropTypes } from './propTypes' -import { ShelfItem } from './ShelfItem' +import { shelfItemPropTypes } from './propTypes' import shelf from './shelf.css' /** @@ -21,11 +21,11 @@ export default class RelatedProducts extends Component { /** Recommendations property */ recommendations: PropTypes.shape({ /** View recommendations (who saw this product, also saw...) */ - view: PropTypes.arrayOf(ShelfItem.propTypes.item), + view: PropTypes.arrayOf(shelfItemPropTypes.item), /** Buy recommendations (who bought this product, also bought...) */ - buy: PropTypes.arrayOf(ShelfItem.propTypes.item), + buy: PropTypes.arrayOf(shelfItemPropTypes.item), /** Similar products */ - similars: PropTypes.arrayOf(ShelfItem.propTypes.item), + similars: PropTypes.arrayOf(shelfItemPropTypes.item), }), }), }), diff --git a/react/ShelfItem.js b/react/ShelfItem.js index ab14d876..bd426cf3 100644 --- a/react/ShelfItem.js +++ b/react/ShelfItem.js @@ -11,7 +11,7 @@ import { changeImageUrlSize, toHttps } from './utils/urlHelpers' * ShelfItem Component. Normalizes the item received in the props * to adapt to the extension point prop. */ -export class ShelfItem extends Component { +class ShelfItem extends Component { static propTypes = shelfItemPropTypes sendProductClickEvent = product => {