diff --git a/CHANGELOG.md b/CHANGELOG.md index cbabc1e..f9753c1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Fixed + +- I18n on readme file. + ## [1.31.0] - 2023-03-28 ### Added diff --git a/docs/README.md b/docs/README.md index b0ae5c4..338297d 100644 --- a/docs/README.md +++ b/docs/README.md @@ -6,48 +6,48 @@ [![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-) -Product Price app is responsible for exporting blocks related to the product's price, such as list price, selling price and savings. +The Product Price app exports blocks related to the product price, such as list price, selling price, and savings. -![image](https://user-images.githubusercontent.com/8443580/77692675-d5694180-6f85-11ea-8690-49db5be24b3d.png) +![image](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-price-0.png) -:information_source: Currently, **the Product Price is the only app responsible for providing product price blocks for your theme**. Both [Product Summary Price](https://vtex.io/docs/components/all/vtex.product-summary/product-summary-price/) and [Product Price](https://vtex.io/docs/components/all/vtex.store-components/product-price/) blocks, respectively from [Product Summary](https://vtex.io/docs/components/all/vtex.product-summary/) and [Store Components](https://vtex.io/docs/components/all/vtex.store-components/) apps, were deprecated and therefore will no longer be evolved. +> ℹ️ Currently, **Product Price is the only app that provides product price blocks for your theme**. The [Product Summary Price](https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryprice) block from the [Product Summary](https://developers.vtex.com/docs/guides/vtex-product-summary/) app and the [Product Price](https://developers.vtex.com/docs/guides/vtex-store-components-productprice/) block from [Store Components](https://developers.vtex.com/docs/guides/vtex-store-components/) have been deprecated. ## Configuration -### Step 1 - Adding the Product Price app to your theme's dependencies +### Step 1 - Adding the Product Price app to your theme dependencies -In your theme's `manifest.json`, add the Product Price app as a dependency: +In the theme's `manifest.json` file, add the Product Price app as a dependency: ```json "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: -| Block name | Description | -| --------------------| -------- | -| `product-list-price` | Renders the product list price. If it is equal or lower than the product selling price, this block will not be rendered. | -| `product-selling-price` | Renders the product selling price.| -| `product-spot-price` | Renders the product spot price (in case it equals the product selling price, the block is not rendered). This block finds the spot price by looking for the cheapest price of all installments options.| -| `product-installments` | Renders the product installments. If more than one option is available, the one with the biggest number of installments will be displayed by default. | -| `product-installments-list` | Renders all the installments of the payment system with the biggest amount of installments options by default. | -| `product-installments-list-item` | Renders an installments option of the `product-installments-list-item` | -| `product-price-savings` | Renders the product price savings, if there is any. It can show the percentage of the discount or the value of the absolute saving. | -| `product-spot-price-savings` | Renders the product spot price savings, if there is any. It can show the percentage of the discount or the value of the absolute saving. | -| `product-list-price-range` | Renders the product list price range. It follows the same logic applied to the `ListPrice`: if its value is equal to the product selling price, this block is not rendered. | -| `product-selling-price-range` | The product selling price range. | -| `product-seller-name` | Renders the name of the product's seller. | -| `product-price-suspense` | Renders a fallback component when the price is loading and its children blocks when the price is not loading. This block is extremely useful when the store works with asynchronous prices. | +Now, you can use all the blocks exported by the `product-price` app. See 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](https://help.vtex.com/tracks/precos-101--6f8pwCns3PJHqMvQSugNfP). +| Block name | Description | +| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `product-list-price` | Renders the product list price. This block will not be rendered if it is equal to or less than the product selling price. | +| `product-selling-price` | Renders the product selling price. | +| `product-spot-price` | Renders the product spot price (if it is equal to the selling price, the block is not rendered). This block finds the spot price by looking for the lowest price of all installment options. | +| `product-installments` | Renders the product installments. If more than one option is available, the one with the highest number of installments will be displayed by default. | +| `product-installments-list` | Renders all the installments of the payment system with the most installment options by default. | +| `product-installments-list-item` | Renders an installment option from the `product-installments-list-item`. | +| `product-price-savings` | Renders the product price savings, if there are any. It can show the discount percentage or the total amount of the savings. | +| `product-spot-price-savings` | Renders the product spot price savings, if there are any. It can show the discount percentage or the total amount of the savings. | +| `product-list-price-range` | Renders the product list price range. It follows the same logic applied to the `ListPrice`: if its value equals the product selling price, this block is not rendered. | +| `product-selling-price-range` | This is the product selling price range. | +| `product-seller-name` | Renders the name of the product seller. | +| `product-price-suspense` | Renders a fallback component when the price is loading and its children block when it is not loading. This block is handy when the store works with asynchronous prices. | -### Step 2 - Adding the Product Price's blocks to your theme's templates +All blocks listed above use product price data fetched from the store catalog. To learn more, please read the [Pricing module overview](https://help.vtex.com/tracks/precos-101--6f8pwCns3PJHqMvQSugNfP). -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](https://vtex.io/docs/components/content-blocks/vtex.product-summary@2.52.3) app, or declare them in the theme's Product template (`store.product`). +### Step 2 - Adding the Product Price blocks to your theme templates -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. +To add the Product Price blocks to your theme, you just need to declare them as children of the `product-summary.shelf` exported by the [Product Summary](https://vtex.io/docs/components/content-blocks/vtex.product-summary@2.52.3) app, or declare them in the theme's Product template (`store.product`). + +Note that these blocks require a Product context to work correctly. Therefore, when declaring them as children of the `product-summary.shelf`, make sure they are in a store template in which this context is available. For example: @@ -66,13 +66,13 @@ For example: }, ``` -Except for the `product-price-suspense`, every block in this app only has three props in common: +Except for `product-price-suspense`, every block in this app only has three props in common: -| Prop name | Type | Description | Default value | -| --------------------| ----------|--------------|---------------| -| `markers` |`[string]` | IDs of your choosing to identify the block's rendered message and customize it using the admin's Site Editor. Learn how to use them accessing the documentation on [Using the Markers prop to customize a block's message](https://vtex.io/docs/recipes/style/using-the-markers-prop-to-customize-a-blocks-message). Notice the following: a block's message can also be customized in the Store Theme source code using the `message` prop. |`[]`| -| `blockClass` | `string` | Block ID of your choosing to be used in [CSS customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization#using-the-blockclass-property). | `undefined` | -| `message` | `string` | Defines the block's default text i.e. the block message. You can also define which text message a block will render on the UI using the admin's Site Editor. | `undefined` | +| Prop name | Type | Description | Default value | +| ------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | +| `markers` | `[string]` | IDs that you define to identify the block's rendered message and customize it using the Site Editor in the Admin. Learn how to use them by reading the documentation on [Using the Markers prop to customize a block's message](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-the-markers-prop-to-customize-a-blocks-message). Note that a block's message can be customized using the `message` prop in the Store Theme source code. | `[]` | +| `blockClass` | `string` | Block ID that you define to be used in [CSS customizations](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization#using-the-blockclass-property). | `undefined` | +| `message` | `string` | Defines the block's default text, i.e., the block message. If you use the Site Editor in the Admin, you can also define the text message that a block will render on the UI. | `undefined` | For example: @@ -88,18 +88,18 @@ For example: }, ``` -The block `product-price-savings` has two additional props: +The `product-price-savings` block has two additional props: -| Prop name | Type | Description | Default value | -| --------------------| ----------|--------------|---------------| -| `percentageStyle` | `locale` or `compact` | Set to `compact` if you want to remove the white space between the number and the percent sign. It uses pattern provided by the current locale as default. | `locale` | -| `minimumPercentage` | `number` | Set the minimum value for the percentage value display. If not informed, it always appears. Example: `10`, savings under or equal 10% will not show up. | `0` | +| Prop name | Type | Description | Default value | +| ------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | +| `percentageStyle` | `locale` or `compact` | Set to `compact` to remove the white space between the number and the percent sign. It uses the pattern provided by the current locale as default. | `locale` | +| `minimumPercentage` | `number` | Set the minimum value for the percentage value display. If not configured, it will display always. Example: `10` means savings less than or equal to 10% will not appear. | `0` | -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: +The following blocks have an additional prop: `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`. The prop is: -| Prop name | Type | Description | Default value | -| :----------: | :--------: | :------------------------------------------------------: | :-----------------: | -| `alwaysShow` | `boolean` | Renders the block even when the product is unavailable. | `false` | +| Prop name | Type | Description | Default value | +|:------------:|:---------:|:-------------------------------------------------------:|:-------------:| +| `alwaysShow` | `boolean` | Renders the block even when the product is unavailable. | `false` | For example: @@ -111,26 +111,25 @@ For example: }, ``` -The block `product-installments-list` has two additional props: - -| Prop name | Type | Description | Default value | -| --------------------| ----------|--------------|---------------| -| `paymentSystemName` | `string` | This prop enables you to filter the listed installments options by a certain payment system. If not passed, the installments of the payment system with the biggest amount of installments options will be rendered. | `undefined` | -| `installmentsToShow` | `number[]` | Which installments options you want to show the user, in terms of the number of installments. For example, if `[1, 3]` is passed as a value for this prop, only the installments options with `NumberOfInstallments` equal to 1 and 3 will be rendered. If not passed, all options will be rendered. | `undefined` | +The `product-installments-list` block has two additional props: -And the block `product-installments` also has two additional props: +| Prop name | Type | Description | Default value | +| -------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | +| `paymentSystemName` | `string` | Allows you to filter the listed installment options by a particular payment system. If not passed, the installments of the payment system with the most installment options will be rendered. | `undefined` | +| `installmentsToShow` | `number[]` | Determines the installment options you want to show to the user based on the number of installments. For example, if `[1, 3]` is passed as a value for this prop, only the installments options with `NumberOfInstallments` equal to 1 and 3 will be rendered. If a value is not passed, all options will be rendered. | `undefined` | -| Prop name | Type | Description | Default value | -| --------------------| ----------|--------------|---------------| -| `installmentsCriteria` | `max-quantity` or `max-quantity-without-interest` | When set to `max-quantity`, the block will render the installments plan with the biggest number of installments. When set to `max-quantity-without-interest`, the block will render the installments plan with the biggest number of installments and **zero interest**. Notice that, if this prop is set to `max-quantity-without-interest`, and no installments plan matches the 'without interest' criteria, the component will fallback the default behavior. | `max-quantity` | -| `installmentOptionsFilter` | `{ paymentSystemName?: string, installmentsQuantity?: number }` | Allows you to define two filtering rules that will narrow down the possible installments plans the component might render. | `undefined` | +The `product-installments` block also has two additional props: +| Prop name | Type | Description | Default value | +| -------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `installmentsCriteria` | `max-quantity` or `max-quantity-without-interest` | When set to `max-quantity`, the block renders the installment plan with the most number of installments. When set to `max-quantity-without-interest`, the block renders the installment plan with the most number of installments and **no interest**. Note that if this prop is set to `max-quantity-without-interest` and no installment plan matches the 'without interest' criterion, the component will fall back to the default behavior. | `max-quantity` | +| `installmentOptionsFilter` | `{ paymentSystemName?: string, installmentsQuantity?: number }` | Allows you to define two filtering rules that will narrow down the possible installment plans the component may render. | `undefined` | -If you are using the asynchronous price feature, you can take advantage of the `product-price-suspense` and its props: +If you are using the asynchronous price feature, you can take advantage of `product-price-suspense` and its props: -| Prop name | Type | Description | Default value | -| :----------: | :--------: | :------------------------------------------------------: | :-----------------: | -| `Fallback` | `block` | Name of the block that will be rendered when the price is loading. | `rich-text#loading` | +| Prop name | Type | Description | Default value | +|:----------:|:-------:|:------------------------------------------------------------------:|:-------------------:| +| `Fallback` | `block` | Name of the block that will be rendered when the price is loading. | `rich-text#loading` | For example: @@ -164,52 +163,52 @@ For example: } ``` -![9SOSUdfAVa](https://user-images.githubusercontent.com/40380674/97020006-69ed4f80-1527-11eb-8165-ff12389c7c81.gif) +![9SOSUdfAVa](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-price-1.gif) ### Step 3 - Editing the block's messages -Every Product Price's block uses the [ICU Message Format](https://format-message.github.io/icu-message-format-for-translators/), making it possible to fully edit the text message and variables displayed by each block. +Every Product Price block uses the [ICU Message Format](https://format-message.github.io/icu-message-format-for-translators/), 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. +The variable values are rendered based on the context wrapping the block, meaning it 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. +You can, however, define the 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](https://vtex.io/docs/recipes/style/using-the-markers-prop-to-customize-a-blocks-message/) documentation. +The `markers` prop, in turn, needs an extra configuration in the Admin's Site Editor to work correctly. When using it, do not forget to read the [Using the Markers prop to customize a block's message](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-the-markers-prop-to-customize-a-blocks-message/) documentation. -![Product-Price-Site-Editor-gif](https://user-images.githubusercontent.com/52087100/78073694-bdbffd80-7377-11ea-9262-40854dccdd53.gif) +![Product-Price-Site-Editor-gif](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-price-2.gif) -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: +In addition, remember to take into account 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`** -| Message variable | Type | Description | -| --- | --- | --- | -| `listPriceValue` | `string` | List price value. | -| `listPriceWithTax` | `string` | List price value with tax. | -| `listPriceWithUnitMultiplier` | `string` | List price multiplied by unit multiplier. | -| `taxPercentage` | `string` | Tax percentage. | -| `taxValue` | `string` | Tax value. | -| `hasMeasurementUnit` | `boolean` | Whether the product has a measurement unit (`true`) or not (`false`). | -| `measurementUnit` | `string` | Measure unit text. | -| `hasUnitMultiplier` | `boolean` | Whether the product has a unit multiplier different than 1 (`true`) or not (`false`). | -| `unitMultiplier` | `string` | Value of the unit multiplier. | +| Message variable | Type | Description | +| ----------------------------- | --------- | ------------------------------------------------------------------------------------------------ | +| `listPriceValue` | `string` | List price value. | +| `listPriceWithTax` | `string` | List price value with tax. | +| `listPriceWithUnitMultiplier` | `string` | List price multiplied by a unit multiplier. | +| `taxPercentage` | `string` | Tax percentage. | +| `taxValue` | `string` | Tax value. | +| `hasMeasurementUnit` | `boolean` | Determines whether the product has a unit of measure (`true`) or not (`false`). | +| `measurementUnit` | `string` | Unit of measure text. | +| `hasUnitMultiplier` | `boolean` | Determines whether the product has a unit multiplier different from 1 (`true`) or not (`false`). | +| `unitMultiplier` | `string` | Value of the unit multiplier. | - **`product-selling-price`** -| Message variable | Type | Description | -| --- | --- | --- | -| `sellingPriceValue` | `string` | Selling price value. | -| `sellingPriceWithTax` | `string` | Selling price with tax. | -| `sellingPriceWithUnitMultiplier` | `string` | Selling price multiplied by unit multiplier. | -| `taxPercentage` | `string` | Tax percentage. | -| `hasListPrice` | `boolean` | Whether the product has a list price (`true`) or not (`false`). | -| `taxValue` | `string` | Tax value. | -| `hasMeasurementUnit` | `boolean` | Whether the product has a measurement unit (`true`) or not (`false`). | -| `measurementUnit` | `string` | Measure unit text. | -| `hasUnitMultiplier` | `boolean` | Whether the product has a unit multiplier different than 1 (`true`) or not (`false`). | -| `unitMultiplier` | `string` | Value of the unit multiplier. | - -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. +| Message variable | Type | Description | +| -------------------------------- | --------- | ------------------------------------------------------------------------------------------------ | +| `sellingPriceValue` | `string` | Selling price value. | +| `sellingPriceWithTax` | `string` | Selling price with tax. | +| `sellingPriceWithUnitMultiplier` | `string` | Selling price multiplied by a unit multiplier. | +| `taxPercentage` | `string` | Tax percentage. | +| `hasListPrice` | `boolean` | Determines whether the product has a list price (`true`) or not (`false`). | +| `taxValue` | `string` | Tax value. | +| `hasMeasurementUnit` | `boolean` | Determines whether the product has a unit of measure (`true`) or not (`false`). | +| `measurementUnit` | `string` | Unit of measure text. | +| `hasUnitMultiplier` | `boolean` | Determines whether the product has a unit multiplier different from 1 (`true`) or not (`false`). | +| `unitMultiplier` | `string` | Value of the unit multiplier. | + +You can use the `product-selling-price` `sellingPriceWithUnitMultiplier`, `hasMeasurementUnit`, `unitMultiplier`, and `measurementUnit` variables together to render the unit of measure and unit multiplier on products that have it. For example: @@ -223,146 +222,146 @@ For example: } ``` -According to the example above, products with measurement unit and unit multiplier would be rendered as follows: +According to the example above, products with a unit of measure and a 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* +> ℹ️ _Note that the unit of measure 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: +Still, in the example, products that do not have a unit of measure and a unit multiplier will only render their price: `$24.00` - **`product-spot-price`** -| Message variable | Type | Description | -| --- | --- | --- | +| Message variable | Type | Description | +| ---------------- | -------- | ----------------- | | `spotPriceValue` | `string` | Spot price value. | - **`product-installments` and `product-installments-list-item`** -| Message variables | Type | Description | -| --- | --- | --- | -| `spotPriceValue` | `string` | Spot price value. | -| `installmentsNumber` | `string` | Number of installments. | -| `installmentValue` | `string` | Value of each installment. | -| `installmentsTotalValue` | `string` | Total value of installments. | -| `interestRate` | `string` | Interest rate. | -| `paymentSystemName` | `string` | Payment System of the installments. | -| `hasInterest` | `boolean` | Whether the installments have interest (`true`) or not (`false`). | -| `hasMoreThanOne` | `boolean` | Whether there're more than 1 installments (`true`) or not (`false`). | +| Message variables | Type | Description | +| ------------------------ | --------- | ------------------------------------------------------------------------------ | +| `spotPriceValue` | `string` | Spot price value. | +| `installmentsNumber` | `string` | Number of installments. | +| `installmentValue` | `string` | Amount of each installment. | +| `installmentsTotalValue` | `string` | Total amount of installments. | +| `interestRate` | `string` | Interest rate. | +| `paymentSystemName` | `string` | Payment system for the installments. | +| `hasInterest` | `boolean` | Determines whether the installments have interest (`true`) or not (`false`). | +| `hasMoreThanOne` | `boolean` | Determines whether there is more than 1 installment (`true`) or not (`false`). | - **`product-price-savings`** -| Message variables | Type | Description | -| --- | --- | --- | -| `previousPriceValue` | `string` | Previous price value (list price). | -| `newPriceValue` | `string` | New price value (selling price). | -| `savingsValue` | `string` | Difference between previous product price and the new one. | -| `savingsWithTax` | `string` | Difference between previous product price and the new one with taxes. | -| `savingsPercentage` | `string` | Percentage of savings. | +| Message variables | Type | Description | +| -------------------- | -------- | ------------------------------------------------------------------------- | +| `previousPriceValue` | `string` | Previous price value (list price). | +| `newPriceValue` | `string` | New price value (selling price). | +| `savingsValue` | `string` | Difference between the previous product price and the new one. | +| `savingsWithTax` | `string` | Difference between the previous product price and the new one with taxes. | +| `savingsPercentage` | `string` | Percentage of savings. | - **`product-spot-price-savings`** -| Message variables | Type | Description | -| --- | --- | --- | -| `previousPriceValue` | `string` | Previous price value (list price). | -| `newSpotPriceValue` | `string` | New price value (spot price). | -| `spotPriceSavingsValue` | `string` | Difference between previous product price and the spot price. | -| `spotPriceSavingsWithTax` | `string` | Difference between previous product price and the spot price with taxes. | -| `spotPriceSavingsPercentage` | `string` | Percentage of savings. | - +| Message variables | Type | Description | +| ---------------------------- | -------- | ---------------------------------------------------------------------------- | +| `previousPriceValue` | `string` | Previous price value (list price). | +| `newSpotPriceValue` | `string` | New price value (spot price). | +| `spotPriceSavingsValue` | `string` | Difference between the previous product price and the spot price. | +| `spotPriceSavingsWithTax` | `string` | Difference between the previous product price and the spot price with taxes. | +| `spotPriceSavingsPercentage` | `string` | Percentage of savings. | + - **`product-list-price-range`** -| Message variables | Type | Description | -| --- | --- | --- | -| `minPriceValue` | `string` | Value of the cheapest list price SKU. | -| `maxPriceValue` | `string` | Value of the most expensive list price SKU. | -| `minPriceWithTax` | `string` | Value of the cheapest list price SKU with tax. | -| `maxPriceWithTax` | `string` | Value of the most expensive list price SKU with tax. | -| `listPriceValue` | `string` | Value of the list price of the only SKU available. | +| Message variables | Type | Description | +| ------------------ | -------- | ----------------------------------------------------------- | +| `minPriceValue` | `string` | Value of the cheapest list price SKU. | +| `maxPriceValue` | `string` | Value of the most expensive list price SKU. | +| `minPriceWithTax` | `string` | Value of the cheapest list price SKU with tax. | +| `maxPriceWithTax` | `string` | Value of the most expensive list price SKU with tax. | +| `listPriceValue` | `string` | Value of the list price of the only SKU available. | | `listPriceWithTax` | `string` | Value of the list price of the only SKU available with tax. | - **`product-selling-price-range`** -| Message variables | Type | Description | -| --- | --- | --- | -| `minPriceValue` | `string` | Value of the cheapest selling price SKU. | -| `maxPriceValue` | `string` | Value of the most expensive selling price SKU. | -| `minPriceWithTax` | `string` | Value of the cheapest selling price SKU with tax. | -| `maxPriceWithTax` | `string` | Value of the most expensive selling price SKU with tax. | -| `sellingPriceValue` | `string` | Value of the selling price of the only SKU available. | +| Message variables | Type | Description | +| --------------------- | -------- | -------------------------------------------------------------- | +| `minPriceValue` | `string` | Value of the cheapest selling price SKU. | +| `maxPriceValue` | `string` | Value of the most expensive selling price SKU. | +| `minPriceWithTax` | `string` | Value of the cheapest selling price SKU with tax. | +| `maxPriceWithTax` | `string` | Value of the most expensive selling price SKU with tax. | +| `sellingPriceValue` | `string` | Value of the selling price of the only SKU available. | | `sellingPriceWithTax` | `string` | Value of the selling price of the only SKU available with tax. | - **`product-seller-name`** -| Message variable | Type | Description | -| --- | --- | --- | -| `sellerName` | `string` | The name of the product's seller. | +| Message variable | Type | Description | +| ---------------- | -------- | ------------------------------- | +| `sellerName` | `string` | The name of the product seller. | -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: +In the gif example above, the block first displayed a `Save $224.40` message. By editing the exported message, it now renders a `You are saving: $224.40 (37%)` message thanks to the changes performed through the Site Editor in the Admin: -![product-price-edited-img](https://user-images.githubusercontent.com/52087100/78073688-bc8ed080-7377-11ea-9a7a-53c36d9a9fe2.png) +![product-price-edited-img](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-price-3.png) ## Customization -To apply CSS customization in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization). - -| CSS Handles | -| ----------- | -| `installmentValue` | -| `installmentsListContainer` | -| `installmentsNumber` | -| `installmentsTotalValue` | -| `installments` | -| `interestRate` | -| `listPrice'` | -| `listPrice--isUnavailable` | -| `listPriceRangeMaxValue` | -| `listPriceRangeMaxWithTax` | -| `listPriceRangeMinValue` | -| `listPriceRangeMinWithTax` | -| `listPriceRangeUniqueValue` | -| `listPriceRangeUniqueWithTax` | -| `listPriceRange` | -| `listPriceRange--isUnavailable` | -| `listPriceValue` | -| `listPriceWithTax` | -| `newPriceValue` | -| `newSpotPriceValue` | -| `paymentSystemName` | -| `previousPriceValue` | -| `savingsPercentage` | -| `savingsValue` | -| `savingsWithTax` | -| `savings` | -| `savings--isUnavailable` | -| `sellerName` | -| `sellerNameContainer` | +To apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS handles for store customizations](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization). + +| CSS handles | +| -------------------------------------- | +| `installmentValue` | +| `installmentsListContainer` | +| `installmentsNumber` | +| `installmentsTotalValue` | +| `installments` | +| `interestRate` | +| `listPrice'` | +| `listPrice--isUnavailable` | +| `listPriceRangeMaxValue` | +| `listPriceRangeMaxWithTax` | +| `listPriceRangeMinValue` | +| `listPriceRangeMinWithTax` | +| `listPriceRangeUniqueValue` | +| `listPriceRangeUniqueWithTax` | +| `listPriceRange` | +| `listPriceRange--isUnavailable` | +| `listPriceValue` | +| `listPriceWithTax` | +| `newPriceValue` | +| `newSpotPriceValue` | +| `paymentSystemName` | +| `previousPriceValue` | +| `savingsPercentage` | +| `savingsValue` | +| `savingsWithTax` | +| `savings` | +| `savings--isUnavailable` | +| `sellerName` | +| `sellerNameContainer` | | `sellerNameContainer--isDefaultSeller` | -| `sellingPrice--hasListPrice` | -| `sellingPrice--isUnavailable` | -| `sellingPriceRangeMaxValue` | -| `sellingPriceRangeMaxWithTax` | -| `sellingPriceRangeMinValue` | -| `sellingPriceRangeMinWithTax` | -| `sellingPriceRangeUniqueValue` | -| `sellingPriceRangeUniqueWithTax` | -| `sellingPriceRange` | -| `sellingPriceRange--isUnavailable` | -| `sellingPriceRange--hasListPrice` | -| `sellingPriceValue` | -| `sellingPriceWithTax` | -| `sellingPrice` | -| `spotPriceSavingsPercentage` | -| `spotPriceSavingsValue` | -| `spotPriceSavingsWithTax` | -| `spotPriceSavings` | -| `spotPriceSavings--isUnavailable` | -| `spotPriceValue` | -| `spotPrice` | -| `spotPrice--isUnavailable` | -| `taxPercentage` | +| `sellingPrice--hasListPrice` | +| `sellingPrice--isUnavailable` | +| `sellingPriceRangeMaxValue` | +| `sellingPriceRangeMaxWithTax` | +| `sellingPriceRangeMinValue` | +| `sellingPriceRangeMinWithTax` | +| `sellingPriceRangeUniqueValue` | +| `sellingPriceRangeUniqueWithTax` | +| `sellingPriceRange` | +| `sellingPriceRange--isUnavailable` | +| `sellingPriceRange--hasListPrice` | +| `sellingPriceValue` | +| `sellingPriceWithTax` | +| `sellingPrice` | +| `spotPriceSavingsPercentage` | +| `spotPriceSavingsValue` | +| `spotPriceSavingsWithTax` | +| `spotPriceSavings` | +| `spotPriceSavings--isUnavailable` | +| `spotPriceValue` | +| `spotPrice` | +| `spotPrice--isUnavailable` | +| `taxPercentage` |