Buy Button

Description

BuyButton is a VTEX Component that is resposible to handle events of adding products in the minicart. This Component can be imported and used by any VTEX App.

📢 Disclaimer: Don't fork this project, use, contribute, or open issue with your feature request.

Table of Contents

Usage

You should follow the usage instruction in the main README.

Then, add buy-button block into your app theme, as we do in our Product Details app.

Blocks API

When implementing this component as a block, various inner blocks may be available. The following interface lists the available blocks within BuyButton and describes if they are required or optional.

  "buy-button": {
    "component": "BuyButton"
  }

For now this block does not have any required or optional blocks.

Configuration

Through the Storefront, you can change the BuyButton's behavior and interface. However, you also can make in your theme app, as Store theme does.

Prop nameTypeDescriptionDefault value
isOneClickBuyBooleanShould redirect to the checkout page or notfalse
shouldOpenMinicartBooleanShould open the Minicart after clicking the buttonfalse
largeBooleanSets button to large style, filling whole width (like a block)-
availableBooleanIf component is available or nottrue
showToastBooleanIf toast with feedback should be shown after add item request is processed-
showItemsPriceBooleanIf you want to show the total price of items to be added to cartfalse
customToastURLStringSet the link associated with the Toast created when adding an item to your cart./checkout/#/cart
shouldAddToCartBooleanIf it should add to cart when clickedtrue
showTooltipOnSkuNotSelectedBooleanIf it should show a tooltip when you click the button but there's no SKU selectedtrue

Styles API

You should follow the Styles API instruction in the main README.

CSS Namespaces

Class NameDescriptionNoteModifiers
buyButtonTextContains the text displayed inside buy button
buttonDataContainerWraps data inside the buy buttonOnly appears when showItemsPrice prop is true
buttonItemsPriceWraps the price displayed inside buy buttonOnly appears when showItemsPrice prop is true