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

Product Price app is responsible for exporting blocks related to the product's price, such as list price, selling price and savings.

ℹ️ Currently, the Product Price is the only app responsible for providing product price blocks for your theme. Both Product Summary Price and Product Price blocks, respectively from Product Summary and Store Components apps, were deprecated and therefore will no longer be evolved.

In your theme's manifest.json, add the Product Price app as a dependency:

"dependencies": {
  "vtex.product-price": "1.x"
}

Now, you can use all the blocks exported by the product-price app. Check out the full list below:

All blocks listed above use product price data fetched from the store catalog. In order to understand further, please access the Pricing Module overview.

To add the Product Price's blocks in your theme, you just need to declare them as children of the product-summary.shelf, exported by the Product Summary app, or declare them in the theme's Product template (store.product).

Notice the following: these blocks necessarily need a Product context in order to work properly. Therefore, when declaring them as children of the product-summary.shelf, be sure that they are in a store template in which this context is available.

For example:

"shelf#home": {
  "blocks": ["product-summary.shelf"]
},

"product-summary.shelf": {
  "children": [
    "product-list-price",
    "product-selling-price#summary",
    "product-price-savings",
    "product-installments"
  ]
},

Except for the product-price-suspense, every block in this app only has three props in common:

For example:

"product-selling-price#summary": {
  "props": {
    "markers": [
      "highlight"
    ],
    "blockClass": "summary",
    "message": "Selling price: {sellingPriceValue}"
  }
},

The block product-price-savings has two additional props:

The following blocks product-list-price, product-selling-price, product-spot-price, product-spot-price-savings, product-price-savings, product-list-price-range, and product-selling-price-range have an additional prop:

For example:

"product-selling-price#summary": {
  "props": {
    "alwaysShow": true
  }
},

The block product-installments-list has two additional props:

And the block product-installments also has two additional props:

If you are using the asynchronous price feature, you can take advantage of the product-price-suspense and its props:

For example:

{
  "rich-text#loading": {
    "props": {
      "text": "Loading..."
    }
  },
  "product-price-suspense": {
    "props": {
      "Fallback": "rich-text#loading"
    },
    "children": [
      "product-list-price#summary",
      "flex-layout.row#selling-price-savings",
      "product-installments#summary",
      "add-to-cart-button"
    ]
  },
  "product-summary.shelf": {
    "children": [
      "stack-layout#prodsum",
      "product-summary-name",
      "product-rating-inline",
      "product-summary-space",
      "product-price-suspense"
    ]
  }
}

Every Product Price's block uses the ICU Message Format, making it possible to fully edit the text message and variables displayed by each block.

The variable values are rendered according to the context wrapping the block, meaning that this last one uses product data to render the price accordingly.

It is possible, however, to define which message texts a block will render on the UI using the message prop, as explained previously.

The markers prop, in turn, needs an extra configuration in the admin's Site Editor to properly work. When using it, do not forget to access the Using the Markers prop to customize a block's message documentation.

In addition to that, keep in mind the message variables for each block since you will need them to edit the desired messages using the admin's Site Editor:

• product-list-price

• product-selling-price

You can use the product-selling-price's sellingPriceWithUnitMultiplier, hasMeasurementUnit, unitMultiplier, and measurementUnit variables together to render measurement unit and unit multiplier on products that have it.

For example:

{
  "product-selling-price": {
    "props": {
      "message": "{sellingPriceWithUnitMultiplier}{hasMeasurementUnit, select, true { / {hasUnitMultiplier, select, true {{unitMultiplier}} false {}} {measurementUnit}} false {}}"
    }
  }
}

According to the example above, products with measurement unit and unit multiplier would be rendered as follows:

$24.00 / 2 oz

ℹ️ Notice that the measurement unit and unit multiplier would be properly rendered alongside their price

Still, according to the example, products that don't have a measurement unit and a unit multiplier will render only their price:

$24.00

• product-spot-price

• product-installments and product-installments-list-item

• product-price-savings

• product-spot-price-savings

• product-list-price-range

• product-selling-price-range

• product-seller-name

In the gif example above, the block was firstly displaying a Save $224.40 message. By editing the message exported, it now renders a You are saving: $224.40 (37%) message thanks to the changes performed through the admin's Site Editor:

To apply CSS customization in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

Thanks goes to these wonderful people:

razvanudream 💻

khrizzcristian 💻

Sanz 💻

Renan Guerra 💻

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