VTEX Developer Portal

Product Summary Buy Button

Product Summary Buy Button is a block exported by the Product Summary app responsible for rendering a Buy Button in the Product Summary Shelf block.

:warning: The Product Summary Buy Button only effectively function i.e. only adds products to the Minicart if the store still uses the Minicart v1. When using the Minicart v2, you should configure the Add To Cart Button in the product-summary.shelf block instead.

Configuration

  1. Add the Product Summary app to your theme's dependencies on the manifest.json, for example:
  dependencies: {
    "vtex.product-summary": "2.x"
  }
  1. Add the product-summary-buy-button block as a children of the product-summary.shelf block:
 {
   "product-summary.shelf": {
       "children": [
           "product-summary-image",
           "product-summary-name",
           "product-rating-inline",
           "product-summary-space",
           "product-summary-price",
+          "product-summary-buy-button"
       ]
   },
 }
  1. Then, declare the product-summary-buy-button and configure its behavior using the props stated below.
{
  "product-summary-buy-button": {
    "props": {
      "isOneClickBuy": false
    }
  }
}

Props

Prop nameTypeDescriptionDefault value
isOneClickBuybooleanWhether the user should be redirected to Checkout after clicking on the Buy Button (true) or not (false).false
buyButtonTextstringCustom text that overwrites the default Buy Button text.undefined
displayBuyButtonenumSets the Buy Button display mode. Possivle values are: displayButtonAlways (it will always be displayed), displayButtonHover (only displayed on hover), or displayButtonNone (it will be hidden for users).displayButtonAlways
customToastURLstringDefines a redirect link to the Toast displayed when an item is added to your cart./checkout/#/cart
buyButtonBehaviorenumSets the Buy Button behavior when it is clicked on. Possible values are: alwaysGoToProduct (redirect users to the product page), default (redirect users to the minicart), or alwaysAddToTheCart (add the selected SKU to the minicart). When choosing this last option, be careful: use it only if there are SKU Selectors for each product variation. This way, users can properly select their desired SKU.default

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
buyButtonContainer
buyButton
isHidden

Updated about a month ago


Product Summary Buy Button


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.