Add To Cart Button by vtex

This page is about version 0.9.0 of the app, which is not the most recent version. The latest stable version is 0.30.2.

AddToCartButton is a button responsible for handling events of adding products in the minicart.

{"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

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


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

Add the add-to-cart-button block to any block bellow store.product. For example:


_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 name	Type	Description	Default value
`isOneClickBuy`	`Boolean`	Should redirect to the checkout page or not	`false`
`customToastURL`	`String`	Set the link associated with the Toast created when adding an item to your cart.	`/checkout/#/cart`
`customOneClickBuyLink`	`String`	Set the link to redirect the user when the `isOneClickBuy` prop is set to `true`.	`'/checkout/#/cart'`

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`