📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Add To Cart Button

The add-to-cart-button is a block responsible for adding products in the Minicart (minicart.v2).

⚠️ The Add to Cart Button block only effectively function i.e. only adds products to the Minicart if the store uses the Minicart v2. When using the Minicart v1, the Buy Button block should be used instead.

Configuration

1. Import the vtex.add-to-cart-button app to your theme's dependencies in the manifest.json, for example:

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

2. Add the add-to-cart-button to other 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):

  "store.product": {
    "children": [
      "flex-layout.row#product",
    ]
  },
  "flex-layout.row#product": {
    "children": [
      "add-to-cart-button"
    ]
  }

Prop name	Type	Description	Default value
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
customOneClickBuyLink	string	Defines the link to where users will be redirected when the Add To Cart Button is clicked on and the isOneClickBuy prop is set to true.	/checkout/#/cart
customToastURL	string	Defines the link to where users will be redirected when the Toast (pop-up notification displayed when adding an item to the minicart) is clicked on.	/checkout/#/cart
text	string	Defines a custom text message to be displayed on the Add To Cart Button.	Add to cart ( automatic translation will be applied according to your store's default language)
unavailableText	string	Defines a custom text message to be displayed on the Add To Cart Button when a product is unavailable.	Unavailable (automatic translation will be applied according to your store's default language)

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
buttonText
buttonDataContainer
tooltipLabelText

Contributors ✨

Thanks goes to these wonderful people:

Jean Nussenzveig 💻

This project follows the all-contributors specification. Contributions of any kind are welcome!