Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Basic components
Product Summary Buy Button
vtex.product-summary
Version: 2.89.0
Latest version: 2.89.0

Product Summary Buy Button is the block exported by the Product Summary app responsible for rendering a Buy Button in the Product Summary Shelf block.

{"base64":"  ","img":{"width":2852,"height":1550,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":667606,"url":"https://user-images.githubusercontent.com/52087100/76864047-38006600-683f-11ea-8a4e-74dc91712984.png"}}

The Product Summary Buy Button only effectively adds products to the Minicart if the store still uses the Minicart v1. If the store uses the Minicart v2, please configure the Add To Cart Button in the product-summary.shelf block instead.

Configuration

  1. Import the vtex.product-summary app to your theme's dependencies in the manifest.json:

_10
dependencies: {
_10
"vtex.product-summary": "2.x"
_10
}

  1. Add the product-summary-buy-button block as a children of the product-summary.shelf block:

_12
{
_12
"product-summary.shelf": {
_12
"children": [
_12
"product-summary-image",
_12
"product-summary-name",
_12
"product-rating-inline",
_12
"product-summary-space",
_12
"product-summary-price",
_12
+ "product-summary-buy-button"
_12
]
_12
},
_12
}

  1. Then, declare the product-summary-buy-button and configure its behavior using the props stated below.

_10
{
_10
"product-summary-buy-button": {
_10
"props": {
_10
"isOneClickBuy": false
_10
}
_10
}
_10
}

Props

Prop nameTypeDescriptionDefault value
isOneClickBuybooleanWhether the user should be redirected to Checkout after clicking on the Buy Button (true) or not (false).false
buyButtonTextstringCustom text that overwrites the default Buy Button text.undefined
displayBuyButtonenumSets the Buy Button display mode. Possivle values are: displayButtonAlways (it will always be displayed), displayButtonHover (only displayed on hover), or displayButtonNone (it will be hidden for users).displayButtonAlways
customToastURLstringDefines a redirect link to the Toast displayed when an item is added to your cart./checkout/#/cart
buyButtonBehaviorenumSets the Buy Button behavior when it is clicked on. Possible values are: alwaysGoToProduct (redirect users to the product page), default (redirect users to the minicart), or alwaysAddToTheCart (add the selected SKU to the minicart). When choosing this last option, be careful: use it only if there are SKU Selectors for each product variation. This way, users can properly select their desired SKU.default

Customization

To apply CSS customizations in this and other blocks, follow the Using CSS Handles for store customization guide.

CSS Handles
buyButtonContainer
buyButton
isHidden
See also
Vtex.product Summary
VTEX IO Apps
VTEX App Store
VTEX IO Apps