price_special¶

The price_special macro is used to display a price with an additional styling indicating a discount.

Definition¶

{% macro price_special(price, label, classNames) %}

Input parameters¶

price¶

string represents a promotional price in a string format that will be rendered.

label¶

string (optional) if specified, an additional label will be rendered next to the promotional price.

classNames¶

string (optional) represents a string of classes that, if specified, will be appended to the main

element of the price_special macro.

Example¶

A basic usage of the macro.

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

{{ price_special('$12.34') }}

Example¶

Special price rendered with an additional label and class.

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

{{ price_special('$12.34', 'My label', 'price__value_bold') }}

Macro source code¶

{% macro price_special(price, label = '', classNames = {})  %}
    {% from "@macros/icon.twig" import icon %}

    {{
        icon('icon-percent', {
            classNames: ['icon_promo', classNames.iconSize, 'price__special-offer-icon']
        })
    }}

    <div class="price {{ classNames.price }}">
        {% if label %}
            <span class="price__label {{ classNames.priceLabel }}">{{ label }}</span>
        {% endif %}

        <span class="price__value price__value_special {{ classNames.priceValue }}">{{ price }}</span>
    </div>
{% endmacro %}