Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Basic components
Add To Cart Button
Official extension
Version: 0.30.2
Latest version: 0.30.2

{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square"}}

The add-to-cart-button block is designed to add products to the Minicart (minicart.v2).

{"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-add-to-cart-button-0.png"}}

The Add to Cart button is only compatible with stores using Minicart v2. For these stores, it will function correctly on the Shelf component and the Product Details page. If you are using Minicart v1, you should configure the Buy Button block on the Product Details page and the Product Summary Buy button on the Shelf component instead.

Configuration

  1. Import the vtex.add-to-cart-button app to your theme dependencies in the manifest.json file, as follows:

_10
"dependencies": {
_10
"vtex.add-to-cart-button": "0.x"
_10
}

  1. Add the add-to-cart-button to another theme block using the product context, such as the product-summary.shelf. In the example below, the add-to-cart-button is 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
"add-to-cart-button"
_10
]
_10
}

Prop nameTypeDescriptionDefault value
onClickBehaviorenumControls what happens when users click the button. Possible values are: go-to-product-page, add-to-cart, and ensure-sku-selection (if multiple SKUs are available, users will be redirected to the product page to select the desired one. If the product only has 1 SKU available, it will be automatically added to the cart when the button is clicked).add-to-cart
onClickEventPropagationenumControls whether the 'onClick' event, triggered upon user clicks, should propagate to the parent elements of the page. Possible values are: disabled and enabled.disabled
isOneClickBuybooleanDetermines whether the user should be redirected to the checkout page (true) or not (false) when the Add to Cart button is clicked.false
customOneClickBuyLinkstringDefines the link to which users will be redirected when the Add to Cart button is clicked, and the isOneClickBuy prop is set to true./checkout/#/cart
customToastUrlstringDefines the link to which users will be redirected when the toast (pop-up notification displayed when adding an item to the minicart) is clicked./checkout/#/cart
textstringDefines a custom text message to be displayed on the Add to Cart button.Add to cart (automatic translation will be applied following your store default language)
unavailableTextstringDefines a custom text message to be displayed on the Add to Cart button when a product is unavailable.Unavailable (automatic translation will be applied following your store default language)
customPixelEventIdstringDefines the id for the event that the button will send upon user interaction.undefined

Customization

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

CSS Handles
buttonText
buttonDataContainer
tooltipLabelText
See also
VTEX App Store
VTEX IO Apps