Skip to content

Latest commit

 

History

History
87 lines (66 loc) · 4.74 KB

BuyButton.md

File metadata and controls

87 lines (66 loc) · 4.74 KB

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

Buy Button

https://img.shields.io/badge/-Deprecated-red

⚠️ The Buy Button block has been deprecated in favor of the Add To Cart Button app. Although support for this block is still granted, we strongly recommend you to update your store theme with the Add to Cart Button's blocks in order to keep up with the component's evolution.

All Contributors

The buy-button block allows users to add products in the Minicart (minicart.v1).

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

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 to other theme block using the product context, such as the product-summary.shelf. In the example below, the buy-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": [
      "buy-button#product"
    ]
  },
   "buy-button#product": {
    "props": {
      "isOneClickBuy": true,
      "showTooltipOnSkuNotSelected": false
    }
  },
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
customToastURL string Defines the link to where users will be redirected when the Buy Button is clicked on and the isOneClickBuy prop is set to true. /checkout/#/cart
shouldOpenMinicart boolean Whether the Minicart should be opened when the Buy Button is clicked on (true) or not (false). false
large boolean Whether the Buy Button should fill its whole width (true) or not (false). false
available boolean Whether the Buy Button block is available for using (true) or not (false). true
showToast boolean Whether a Toast (pop-up notification) should be displayed when adding an item to the minicart (true) or not (false) false
showItemsPrice boolean Whether the total price of items added to the cart should be displayed (true) or not (false). false
shouldAddToCart boolean Whether the Buy Button should add products to the minicart when clicked on (true) or not (false). true
showTooltipOnSkuNotSelected boolean Whether a tooltip should be displayed when the Buy Button is clicked on with no SKU was selected (true) or not (false). true

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

Contributors ✨

Thanks goes to these wonderful people:

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