Product Price by vtex

This page is about version 3.150.0 of the app, which is not the most recent version. The latest stable version is 3.178.1.

{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGNoYGD6v3v+/6ask37WACanBhm9KoMJAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/-Deprecated-red","width":73,"height":20,"type":"svg"}}

:warning: The Product Price block has been deprecated in favor of the Product Price app. Although support for this block is still granted, we strongly recommend you to update your store theme with the Product Price's blocks in order to keep up with the component's evolution.

The ProductPrice is responsible for displaying the price of a given product.

{"base64":" ","img":{"width":2094,"height":1084,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":408904,"url":"https://user-images.githubusercontent.com/284515/70233684-d3ad1100-173d-11ea-8582-4acf52263521.png"}}

Configuration

Import the vtex.store-component app to your theme's dependencies in the manifest.json;


_10  "dependencies": {
_10    "vtex.store-components": "3.x"
_10  }

Add the product-price block to any block below store.product (Product template). For example:


_16  "store.product": {
_16    "children": [
_16      "flex-layout.row#product",
_16    ]
_16  },
_16  "flex-layout.row#product": {
_16    "children": [
_16      "product-price"
_16    ]
_16  },
_16   "product-price": {
_16    "props": {
_16      "showSavings": true,
_16      "showListPrice": false
_16    }
_16  },

Prop name	Type	Description	Default value
`labelSellingPrice`	`String`	Product selling price label	null
`labelListPrice`	`String`	Product list price label	null
`showListPrice`	`Boolean`	Set visibility of list price	`true`
`sellingPrices`	`Array`	Product list of selling prices	`[]`
`showSellingPriceRange`	`Boolean`	Set visibility of selling price range	`false`
`showListPriceRange`	`Boolean`	Set visibility of list price range	`false`
`showLabels`	`Boolean`	Set visibility of labels	`true`
`showInstallments`	`Boolean`	Set visibility of installments	`false`
`showSavings`	`Boolean`	Set visibility of savings	`false`
`blockClass`	`String`	The set value functions as a customization identifier for any CSS specified in the block	null

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
`price_className`
`price_loader`
`price_listPriceContainer`
`price_listPriceLabel`
`price_listPrice`
`price_listPriceRange`
`price_sellingPriceRange`
`price_sellingPriceContainer`
`price_sellingPriceLabel`
`price_sellingPrice`
`price_savingsContainer`
`price_savings`
`price_installment`
`price_interestRate`
`price_installmentContainer`