VTEX Product Quantity

Description

The VTEX Product Quantity allows the user to add to cart the specified amount of the displayed product

Table of Contents

Usage

This app uses our store builder with the blocks architecture. To know more about Store Builder click here.

To use this app or override the default CSS you need import it in your dependencies on manifest.json file.

1
2
3
  "dependencies": {
    "vtex.product-quantity": "1.x"
  }

The product-quantity block may be used inside the store.product block, while the product-summary-quantity block may be used inside the product-summary.shelf block.

To use them, you must declare its use in your store.product or product-summary.shelf children array or inside a flex-layout inside store.product.

An example of usage in a blocks.json:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  "flex-layout.col#product-price": {
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0
    },
    "children": [
      "product-name",
      "product-price#product-details",
      "product-separator",
      "product-quantity",
      "sku-selector",
      "flex-layout.row#buy-button",
      "availability-subscriber",
      "shipping-simulator",
      "share"
    ]
  },
  "product-quantity": {
    "props": {
      "warningQuantityThreshold": 9999999
    }
  },

Blocks API

Configuration

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

Prop nameTypeDescription
warningQuantityThresholdNumberOnly show the quantity of remaining items in stock if item available quantity is less than or equal to the value passed in this property. Default: 0 (does not appear).

Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the styles builder and create an app styling CSS file.

  1. Add the styles builder to your manifest.json:
1
2
3
  "builders": {
    "styles": "1.x"
  }
  1. Create a file called vtex.product-quantity.css inside the styles/css folder. Add your custom styles:
1
2
3
.quantitySelectorContainer {
  margin-top: 10px;
}

CSS Namespaces

Below, we describe the namespaces that are defined in the Product Quantity Selector.

Token nameComponentDescription
quantitySelectorContainerBaseProductQuantityThe main container of Product Quantity Selector
availableQuantityContainerBaseProductQuantityThe container that wraps the available quantity view.
summaryContainerProductSummaryQuantityThe container that wraps the ProductSummaryQuantity.