product_price¶

The product_price macro is used to render data about the product price. It supports rendering regular prices, unit prices and various promotions.

Definition¶

{% product_price(product, options) %}

Input parameters¶

product¶

product represents an object with parameters regarding product prices:

Option key	Type	Default	Required	Description
product.priceValue	`Price`	""	yes	Price Current price of the product
product.basePriceValue	`Price`	""	no	Price Base price of the product undergoing a promotion (without a discount)
product.otherPriceValue	`Price`	""	no	Price Current price of the product in different stores
product.percentageDiscountValue	`boolean`	false	no	If set to `true` a percentage value of a discount will be displayed in case of a promotion
product.unitPrice	`Price`	""	no	Price Current unit price of the product
product.unitName	`string`	""	no	The name of the unit used by the product, eg. `kg`, `lbs`, `pcs`
product.hasSpecialOffer	`boolean`	false	no	Indicates whether a promotional price should be rendered instead of a regular one
product.specialOffer	`null \|VariantSpecialOffer`	null	no	VariantSpecialOffer An object representing a special offer of the product
product.priceFormatTax	`string`	""	no	The tax percentage, eg. `12%`
product.lowestHistoricalPriceInLast30Days	`Price`	""	no	Price Lowest price of the product from the last 30 days
product.lowestHistoricalPricePercentage	`string`	""	no	Percentage value of the lowest price from the last 30 days in percentage
product.isLowestHistoricalPriceHigherThanCurrent	`boolean`	""	no	Indicates wheter lowest historical price is higher than current price
product.loyaltyPrice	`string`	""	no	A price of a product in points within a loyalty program
product.exchangeFee	`string`	""	no	A fee paid for exchanging products in a loyalty program
product.priceOutsideTheBundle	`string`	""	no	If specified, price of the products outside of the bundle will be dispalyed. This parameter is used on a bundle page

options¶

options parameter represents an object with parameters regarding visibility of some price section:

Option key	Type	Default	Required	Description
options.showAdditionalTaxInfo	`boolean`	false	no	If set to `true` the tax info will be displayed
options.showSpecialOfferDuration	`boolean`	false	no	If set to `true` the duration of the promotion will be displayed
options.showLowestPriceIn30Days	`boolean`	false	no	If set to `true` the lowest price from the last 30 days will be displayed
options.showPriceWithoutShippingCostInfo	`boolean`	false	no	If set to `true` the info about shipping costs not being accounted will be displayed
options.showRegularPrice	`boolean`	false	no	If set to `true` the regular price will be displayed during promotion
options.showPercentageDiscountValue	`boolean`	false	no	If set to `true` the percentage discount value will be displayed during promotion
## Example

In this example we render a regular product price.

{% from "@macros/product_price.twig" import product_price %}

{{ product_price({
   priceValue: "$10.35"
}) }}

Example¶

In this example we render a product price undergoing a 12% discount promotion.

{% from "@macros/product_price.twig" import product_price %}

{{ product_price({
   priceValue: "$10.35",
   hasSpecialOffer: true,
   percentageDiscountValue: "12%"
}) }}

Example¶

In this example we use a Product object to determine whether a specific product has a special offer for us. On top of that the percentage discount is calculated dynamically.

{% from "@macros/product_price.twig" import product_price %}

{% set product = ObjectApi.getProduct(product_id) %}

{{ product_price({
   priceValue: "$10.35",
   hasSpecialOffer: product.hasSpecialOffer,
   percentageDiscountValue: product.specialOffer.formatDiscount
}) }}

Example¶

In this example we render a product price with a specific unit price and potential promotion using a Product object like in the previous example. If such product has a promotion, its duration as well as a regular price will be displayed along the promotional price.

{% from "@macros/product_price.twig" import product_price %}

{% set product = ObjectApi.getProduct(product_id) %}

{{ product_price({
   priceValue: "$10.35",
   unitPrice: "$2.24",
   unitName: "pcs.",
   hasSpecialOffer: product.hasSpecialOffer,
   percentageDiscountValue: product.specialOffer.formatDiscount
}, {
   showSpecialOfferDuration: true,
   showRegularPrice: true
}) }}

Macro source code¶

{% macro product_price(product, options) %}
    {% from "@macros/price_unit.twig" import price_unit %}
    {% from "@macros/price_base.twig" import price_base %}
    {% from "@macros/price_product_regular.twig" import price_product_regular %}
    {% from "@macros/price_product_special.twig" import price_product_special %}
    {% from "@macros/price_product_inactive.twig" import price_product_inactive %}

    <div class="product-price">
        <div class="product-price__base-price">
            <div class="product-price__final-price js__special-offer-container"{% if not product.hasSpecialOffer %} hidden{% endif %}>
                {{ price_product_special(product.priceValue )}}
            </div>

            <div class="product-price__final-price js__no-special-offer-container"{% if product.hasSpecialOffer %} hidden{% endif %}>
                {{ price_product_regular(product.priceValue) }}
            </div>

            {% if options.showAdditionalTaxInfo %}
                <span class="vat-info">
                    {% if product.priceFormatTax %}
                        {{ translate('with %s VAT', "<span class='js__price-vat-value'>#{product.priceFormatTax}</span>") }}
                    {% else %}
                        {{ translate('without VAT') }}
                    {% endif %}
                 </span>
            {% endif %}
        </div>

        {% if product.unitPrice %}
            <div class="product-price__unit-price">
                {{ price_unit((product.unitPrice ~ ' / ' ~ product.unitName)) }}
            </div>
        {% endif %}

        <div class="js__special-offer-container"{% if not product.hasSpecialOffer %} hidden{% endif %}>
            {% if options.showRegularPrice %}
                <div class="product-price__regular-price">
                    {{ price_product_inactive(product.basePriceValue, translate('Regular price') ~ ':', {
                            priceValue: 'js__regular-price-value'
                        })
                    }}

                    {% if options.showPercentageDiscountValue %}
                        {{
                            price_base('-' ~ product.percentageDiscountValue|abs ~ '%', '', {
                                price: 'price_s',
                                priceValue: 'price__value_special js__special-offer-percentage-value'
                            })
                        }}
                    {% endif %}
                </div>
            {% endif %}

            {% if options.showLowestPriceIn30Days %}
                <div class="product-price__lowest-historical-price">
                    {{ price_product_inactive(product.lowestHistoricalPriceInLast30Days, translate('The lowest price during 30 days prior to the reduction') ~ ':') }}

                    {% if options.showPercentageDiscountValue %}
                        {% set lowestHistoricalPricePercentageSign = product.isLowestHistoricalPriceHigherThanCurrent ? '-' : '+'  %}

                        {{
                            price_base(lowestHistoricalPricePercentageSign ~ product.lowestHistoricalPricePercentage|abs ~ '%', '', {
                                price: 'price_s',
                                priceValue: 'price__value_special js__lowest-historical-price-percentage-value'
                            })
                        }}
                    {% endif %}
                </div>
            {% endif %}

            {% if options.showSpecialOfferDuration %}
                <div class="product-price__special-offer-duration">
                    {{
                        price_base(translate('The promotion runs until %s', product.specialOffer.getDetails().endDate.date), '', {
                            price: 'price_s',
                            priceValue: 'price__value_special js__special-offer-duration-value'
                        })
                    }}
                </div>
            {% endif %}
        </div>

        {% if product.priceOutsideTheBundle %}
            <div class="product-price__price-outside-the-bundle">
                {{
                    price_base(product.priceOutsideTheBundle, translate('Price of products outside the bundle') ~ ':', {
                        price: 'price_s',
                        priceValue: 'price__value_bold'
                    })
                }}
            </div>
        {% endif %}

        {% if options.showPriceWithoutShippingCostInfo %}
            <p class="p_no-margin p_s product-price__shipping-cost-info ">
                {{ translate('Shipping costs are not included in the price.') }}
            </p>
        {% endif %}

        {% if product.otherPriceValue %}
            <div class="product-price__other-price-value">
                {{
                    price_base(product.otherPriceValue, translate('Price in other stores')  ~ ':', {
                        price: 'price_s',
                        priceValue: 'price__value_bold'
                    })
                }}
            </div>
        {% endif %}
    </div>
{% endmacro %}