Send productClick events to PixelManager

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

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"
   }
-}
+}

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'
 

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'
 
 /**

react/ShelfContent.js

@@ -14,7 +14,7 @@ import {
 
 import { getGapPaddingValues } from './paddingEnum'
 import ScrollTypes from './ScrollTypes'
-import ShelfItem from './ShelfItem'
+import { ShelfItem } from './ShelfItem'
 
 import shelf from './shelf.css'
 

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',
+      items: product,
+    })
+  }
+
   findAvailableProduct = item =>
     item.sellers.find(
       ({ commertialOffer = {} }) => commertialOffer.AvailableQuantity > 0
@@ -47,8 +55,11 @@ export default class ShelfItem extends Component {
       <ExtensionPoint
         id="product-summary"
         product={this.normalizeProduct(item)}
+        actionOnClick={() => this.sendProductClickEvent(item)}
         {...newSummary}
       />
     )
   }
 }
+
+export default Pixel(ShelfItem)

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 <Comp {...this.props} push={() => {}} subscribe={() => {}} />
+    }
+  }
+}