Merge pull request #164 from vtex-apps/fix/wishlist

Added missing interface to handle Wishlist button when using product-summary.shelf

CHANGELOG.md

@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [2.25.0] - 2019-06-10
+
+### Added
+
+- Missing interface to handle Wishlist button when using `product-summary.shelf`.
+
+### Fixed
+
+- Add `product-rating-inline` to `product-summary-column`.
+
 ## [2.24.2] - 2019-06-04
 ### Changed
 - Updated `vtex.pixel-manager`.

manifest.json

@@ -1,7 +1,7 @@
 {
   "vendor": "vtex",
   "name": "product-summary",
-  "version": "2.24.2",
+  "version": "2.25.0",
   "title": "Product Summary",
   "description": "Product summary component",
   "defaultLocale": "pt-BR",

react/ProductSummaryAddToListButton.js

@@ -0,0 +1,3 @@
+import ProductSummaryAddToListButton from './components/ProductSummaryAddToListButton/ProductSummaryAddToListButton'
+
+export default ProductSummaryAddToListButton

react/components/ProductSummaryAddToListButton/ProductSummaryAddToListButton.js

@@ -0,0 +1,33 @@
+import React, { useMemo, useContext } from 'react'
+import { ExtensionPoint } from 'vtex.render-runtime'
+import { path } from 'ramda'
+import ProductSummaryContext from '../ProductSummaryContext'
+import productSummary from '../../productSummary.css'
+
+const getSkuId = path(['sku', 'itemId'])
+const getProductId = path(['productId'])
+
+// This avoids triggering the link to the product page
+const captureClick = e => {
+  e.preventDefault()
+  e.stopPropagation()
+}
+
+function ProductSummaryAddToListButton({ product }) {
+  const productContext = useContext(ProductSummaryContext)
+
+  const skuId = getSkuId(productContext.product)
+  const productId = getProductId(productContext.product)
+
+  const productProp = useMemo(() => ({
+    skuId, productId, quantity: 1
+  }), [skuId, productId])
+
+  return (
+    <div className={`${productSummary.addToListBtn} absolute z-1`} onClick={captureClick}>
+      <ExtensionPoint id="addon-summary-btn" product={productProp} />
+    </div>
+  )
+}
+
+export default ProductSummaryAddToListButton

store/interfaces.json

@@ -16,6 +16,7 @@
       "product-summary-name",
       "product-summary-price",
       "product-summary-space",
+      "product-summary-add-to-list-button",
       "product-rating-inline"
     ],
     "component": "ProductSummaryCustom",
@@ -29,7 +30,9 @@
       "product-summary-image",
       "product-summary-name",
       "product-summary-price",
-      "product-summary-space"
+      "product-summary-space",
+      "product-summary-add-to-list-button",
+      "product-rating-inline"
     ],
     "component": "Column",
     "composition": "children"
@@ -107,6 +110,12 @@
       }
     }
   },
+  "product-summary-add-to-list-button": {
+    "component": "ProductSummaryAddToListButton",
+    "allowed": [
+      "addon-summary-btn"
+    ]
+  },
   "addon-summary-btn": {
     "component": "*"
   }