Buy Button
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":" ","img":{"width":73,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":927,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-buybutton-0.png"}}](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-buybutton-0.png)
The buy-button
block displays a button that allows users to add products in the Minicart (minicart.v1
).
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://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-buybutton-1.png"}}](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-buybutton-1.png)
Configuration
- Import the
vtex.store-components
app to your theme's dependencies in themanifest.json
file as in the following example:
_10 "dependencies": {_10+ "vtex.store-components": "3.x"_10 }
- Add the
buy-button
to other theme block using the product context, such as theproduct-summary.shelf
. In the following example, thebuy-button
component was added to theflex-layout.row
block from thestore.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 },
- 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 name | Type | Description | Default value |
---|---|---|---|
available | boolean | Whether the Buy Button block is available for using (true ) or not (false ). | true |
customToastURL | string | Defines 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 |
isOneClickBuy | boolean | Whether the user should be redirected to the checkout page (true ) or not (false ) when the Add To Cart Button is clicked on. | false |
large | boolean | Whether the Buy Button should fill its whole width (true ) or not (false ). | false |
shouldOpenMinicart | boolean | Whether the Minicart should be opened when the Buy Button is clicked on (true ) or not (false ). | false |
shouldAddToCart | boolean | Whether the Buy Button should add products to the minicart when clicked on (true ) or not (false ). | true |
showItemsPrice | boolean | Whether the total price of items added to the cart should be displayed (true ) or not (false ). | false |
showToast | boolean | Whether a Toast (pop-up notification) should be displayed when adding an item to the minicart (true ) or not (false ) | false |
showTooltipOnSkuNotSelected | boolean | Whether 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 |