Add to Cart Button

📢 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 only effectively function i.e. only adds products to the Minicart if the store uses the Minicart v2. In this scenario, it successfully works in the Shelf component as well as in the Product Details page. When using the Minicart v1, you should configure the Buy Button block in the Product Details page, and the Product Summary Buy Button in the Shelf component instead.

Configuration

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

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

Prop name	Type	Description	Default value
`onClickBehavior`	`enum`	Controls what happens when users click on 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 added to the cart once the button is clicked on).	`add-to-cart`
`onClickEventPropagation`	`enum`	Controls whether the 'onClick' event (triggered upon user clicks) should be spread to the page's parent elements. Possible values are: `disabled` and `enabled`.	`disabled`
`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)
`customPixelEventId`	`string`	Define the `id` for the event that will be sent by the the button upon user interaction.	`undefined`

onClickBehavior

enum

Controls what happens when users click on 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 added to the cart once the button is clicked on).

add-to-cart

onClickEventPropagation

enum

Controls whether the 'onClick' event (triggered upon user clicks) should be spread to the page's parent elements. Possible values are: disabled and enabled.

disabled

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)

customPixelEventId

string

Define the id for the event that will be sent by the the button upon user interaction.

undefined

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