Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Buy Button
vtex.store-components
Version: 3.175.1
Latest version: 3.175.1

Warning

The Buy Button block has been deprecated in favor of the Add To Cart Button app. Although support for this block is still granted, we strongly recommend you to update your store theme with the Add to Cart Button's blocks in order to keep up with the component's evolution.

{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGNoYGD6v3v+/6ask37WACanBhm9KoMJAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/-Deprecated-red","width":73,"height":20,"type":"svg"}}

The buy-button block displays a button that allows users to add products in the Minicart (minicart.v1).

Warning

The Buy Button block only works for stores using the Minicart v1. If your store uses the Minicart v2, please refer to the Add To Cart Button instead.

{"base64":"  ","img":{"width":2094,"height":1052,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":407330,"url":"https://user-images.githubusercontent.com/284515/70233985-69e13700-173e-11ea-91f7-6675a6a0e73b.png"}}

Configuration

  1. Import the vtex.store-components app to your theme's dependencies in the manifest.json file as in the following example:

_10
"dependencies": {
_10
+ "vtex.store-components": "3.x"
_10
}

  1. Add the buy-button to other theme block using the product context, such as the product-summary.shelf. In the following example, the buy-button component was added to the flex-layout.row block from the store.product template (which uses the product context):

_10
"store.product": {
_10
"children": [
_10
"flex-layout.row#product",
_10
]
_10
},
_10
"flex-layout.row#product": {
_10
"children": [
_10
+ "buy-button#product"
_10
]
_10
},

  1. Then, declare the buy-button block using the props stated in the Props table. For example:

_10
"buy-button#product": {
_10
"props": {
_10
"isOneClickBuy": true,
_10
"showTooltipOnSkuNotSelected": false
_10
}
_10
},

Props

Prop nameTypeDescriptionDefault value
availablebooleanWhether the Buy Button block is available for using (true) or not (false).true
customToastURLstringDefines the link to where users will be redirected when the Buy Button is clicked on and the isOneClickBuy prop is set to true./checkout/#/cart
isOneClickBuybooleanWhether the user should be redirected to the checkout page (true) or not (false) when the Add To Cart Button is clicked on.false
largebooleanWhether the Buy Button should fill its whole width (true) or not (false).false
shouldOpenMinicartbooleanWhether the Minicart should be opened when the Buy Button is clicked on (true) or not (false).false
shouldAddToCartbooleanWhether the Buy Button should add products to the minicart when clicked on (true) or not (false).true
showItemsPricebooleanWhether the total price of items added to the cart should be displayed (true) or not (false).false
showToastbooleanWhether a Toast (pop-up notification) should be displayed when adding an item to the minicart (true) or not (false)false
showTooltipOnSkuNotSelectedbooleanWhether a tooltip should be displayed when the Buy Button is clicked on with no SKU was selected (true) or not (false).true

Customization

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

CSS Handles
buttonDataContainer
buttonItemsPrice
buyButtonText
See also
Vtex.store Components
VTEX IO Apps
VTEX App Store
VTEX IO Apps