Skip to content

loyalty_exchange_guide_modal

The loyalty_exchange_guide_modal macro is used to render a modal with a guidance regarding ways to collect points in the loyalty program.

Definition

{% loyalty_exchange_guide_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 guide 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_guide_modal.twig" import loyalty_exchange_guide_modal %}

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

Example

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

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

<h-modal-opener name="some-modal-name">
    <button class="link link_primary">
        Find out how to collect points
    </button>
</h-modal-opener>

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

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

Macro source code

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

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

    <h-modal class="loyalty-exchange-guide-modal modal-wrapper_s" id="{{ options.modalName }}" hidden>
        {{
            modal_header(translate('Points in the loyalty program'), {
                cssClasses: 'loyalty-exchange-guide-modal__header'
            })
        }}

        <h-modal-body>
            <div class="list loyalty-exchange-guide-modal__list">
                <p class="p_s p_no-margin color_tertiary loyalty-exchange-guide-modal__list-title">
                    {{ translate('Collect points in the loyalty program for') }}:
                </p>
                <ul class="list__content list__content_all-lines-indent-disc loyalty-exchange-guide-modal__list-content">
                    {% if loyaltyProgramSettings.ordersMode %}
                        <li class="list__item color_tertiary loyalty-exchange-guide-modal__list-item">
                            <span>
                                {{
                                    translate('%sbuying products included in the loyalty program%s: %d pts for every %s spent', [
                                        '<span class="font_semibold">',
                                        '</span>',
                                        loyaltyProgramSettings.ordersMode.points,
                                        loyaltyProgramSettings.ordersMode.amountOfCurrency
                                    ])
                                }}
                            </span>
                        </li>
                    {% endif %}
                    {% if loyaltyProgramSettings.feedbackMode %}
                        <li class="list__item color_tertiary loyalty-exchange-guide-modal__list-item">
                            <span>
                                {{
                                    translate('%swriting a review for a purchased product%s: %s pts', [
                                        '<span class="font_semibold">', '</span>', loyaltyProgramSettings.feedbackMode.points
                                    ])
                                }}
                            </span>
                        </li>
                    {% endif %}
                    {% if loyaltyProgramSettings.newsletterMode %}
                        <li class="list__item color_tertiary loyalty-exchange-guide-modal__list-item">
                            <span>
                                {{
                                    translate('%sjoining the newsletter%s: %s pts', [
                                        '<span class="font_semibold">', '</span>', loyaltyProgramSettings.newsletterMode.points
                                    ])
                                }}
                            </span>
                        </li>
                    {% endif %}
                </ul>
            </div>
        </h-modal-body>

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

ObjectApi methods reference

Webcomponents reference