Skip to content

loyalty_exchange_terms_modal

The loyalty_exchange_terms_modal macro is used to render a modal with terms of redeeming points in the loyalty program.

Definition

{% loyalty_exchange_terms_modal(options) %}

Input parameters

options

object

Option key Type Default Required Description
options.modalName string null yes Unique name of the modal

Example

In this example we render a loyalty exchange terms modal.

Remember that modals always comes hidden!

This modal will render, but You have to open it with javascript or h-modal-opener webcomponent.

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

{{
    loyalty_exchange_terms_modal({
        modalName: 'some-modal-name'
    })
}}

Example

In this example we render a loyalty exchange terms modal with a modal opener.

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

<h-modal-opener name="some-modal-name">
    <button class="link link_primary">
        Terms of redeeming points
    </button>
</h-modal-opener>

{{
    loyalty_exchange_terms_modal({
        modalName: 'some-modal-name'
    })
}}

h-modal-opener "name" and "modalName" must be the same!

Macro source code

{% macro loyalty_exchange_terms_modal(options) %}
    {% from "@macros/modal_header.twig" import modal_header %}

    {% set loyaltyProgramSettings = ObjectApi.getLoyaltyProgramSettings() %}

    {% set productsForThePoints = loyaltyProgramSettings.productsForThePoints %}

    <h-modal class="loyalty-exchange-terms-modal modal-wrapper_s" id="{{ options.modalName }}" hidden>
        {{
            modal_header(translate('Terms of redeeming points'), {
                cssClasses: 'loyalty-exchange-terms-modal__header'
            })
        }}

        <h-modal-body>
            <ul class="list__content list__content_all-lines-indent-disc loyalty-exchange-terms-modal__list-content">
                {% if productsForThePoints.exchangeDuringShopping and not productsForThePoints.exchangeMinimumBasket %}
                    <li class="list__item color_tertiary loyalty-exchange-terms-modal__list-item">
                        <span>
                            {{ translate('To exchange the collected points for products, at least one product in the basket must be paid for.') }}
                        </span>
                    </li>
                {% endif %}
                {% if productsForThePoints.exchangeMinimumBasket %}
                    <li class="list__item color_tertiary loyalty-exchange-terms-modal__list-item">
                        <span>
                            {{ translate('You can exchange your collected points for products only during purchases of at least %s%s%s.', [
                                '<span class="font_semibold">',
                                productsForThePoints.exchangeMinimumBasketValue.formatGross,
                                '</span>'
                            ]) }}
                        </span>
                    </li>
                {% endif %}
                {% if productsForThePoints.exchangeProductsLimit %}
                    <li class="list__item color_tertiary loyalty-exchange-terms-modal__list-item">
                        <span>
                            {{
                                translate('%sMax. number of products%s you can exchange for points in an order: %s%s%s.', [
                                    '<span class="font_semibold">',
                                    '</span>',
                                    '<span class="font_semibold">',
                                    productsForThePoints.exchangeProductsLimitValue,
                                    '</span>'
                                ])
                            }}
                        </span>
                    </li>
                {% endif %}
                {% if productsForThePoints.exchangePointsLimit %}
                    <li class="list__item color_tertiary loyalty-exchange-terms-modal__list-item">
                        <span>
                            {{
                                translate('You can exchange up to %s%s pts%s at once', [
                                    '<span class="font_semibold">',
                                    productsForThePoints.exchangePointsLimitValue,
                                    '</span>'
                                ])
                            }}
                        </span>
                    </li>
                {% endif %}
            </ul>
        </h-modal-body>

        <h-modal-footer>
            <h-modal-close class="modal__btn btn btn_primary loyalty-exchange-terms-modal__button">
                {{ translate('Ok') }}
            </h-modal-close>
        </h-modal-footer>
    </h-modal>
{% endmacro %}

ObjectApi methods reference

Webcomponents reference