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

Buy Button

The BuyButton block allows users to add products in the minicart.

image

Configuration

  1. Import the vtex.store-component app to your theme's dependencies in the manifest.json;
  "dependencies": {
    "vtex.store-components": "3.x"
  }
  1. Add the buy-button block to any block bellow store.product (Product template). For example:
  "store.product": {
    "children": [
      "flex-layout.row#product",
    ]
  },
  "flex-layout.row#product": {
    "children": [
      "buy-button#product"
    ]
  },
   "buy-button#product": {
    "props": {
      "isOneClickBuy": true,
      "showTooltipOnSkuNotSelected": false
    }
  },
Prop nameTypeDescriptionDefault value
isOneClickBuyBooleanIf the block should redirect the user to the Checkout page or notfalse
shouldOpenMinicartBooleanIf the Minicart should open after the user clicks on the Buy Buttonfalse
largeBooleanSets button to large style, filling whole width (like a block)-
availableBooleanIf the block is available or nottrue
showToastBooleanIf a Toast with feedback should be displayed after an item is added to the cart-
showItemsPriceBooleanIf you want to show the total price of items added to the cartfalse
customToastURLStringIt sets the link associated with the Toast./checkout/#/cart
shouldAddToCartBooleanIf the Buy Button should add the product to the cart when clicked ontrue
showTooltipOnSkuNotSelectedBooleanIf it should show a tooltip when you click on the Buy Button but no SKU was selectedtrue

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
buyButtonText
buttonDataContainer
buttonItemsPrice