Loyalty Program Modal

The loyalty_program_modal macro is used to render a modal with information about the loyalty program. This modal provides users with details about how they can earn and redeem loyalty points.

Definition

{% loyalty_program_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 program 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_program_modal.twig" import loyalty_program_modal %}

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

Example

In this example we render a loyalty program modal with a modal opener.

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

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

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

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

Macro source code

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

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

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

        <h-modal-body>
            <auth-controller hidden>
                <div slot="logged-in">
                    <p class="loyalty-program-modal__text size_s">
                        {% if loyaltyProgramSettings.productsForThePoints %}
                            {{ translate('Collect points for buying products included in the loyalty program.') }}
                        {% else %}
                            {{ translate('Collect points for buying products included in the loyalty program and enjoy discounts on your future purchases.') }}
                        {% endif %}
                    </p>
                    <p class="loyalty-program-modal__text size_s">
                        {% if loyaltyProgramSettings.productsForThePoints %}
                            {{ translate("Redeem points for rewards in %sthe Loyalty program products%s section.", ["<a href='#{ shopUrls.loyaltyProductsListUrl}' class='link link_no-underline'>", "</a>"]) }}
                        {% else %}
                            {{ translate("You will find information about your current discount in %sthe customer account%s.", ["<a href='#{ shopUrls.userPanelUrl }' class='link link_no-underline'>", "</a>"]) }}
                        {% endif %}
                    </p>
                </div>

                <div slot="logged-out">
                    <p class="loyalty-program-modal__text size_s">
                        {{ translate('Collect points for buying products included in the loyalty program.') }}
                        {{ translate('Receive rewards or discounts on your future purchases.') }}
                    </p>
                    <p class="loyalty-program-modal__text size_s">
                        {{ translate('Make an account or log in. You will find information about your collected points in the customer account.') }}
                    </p>
                </div>
            </auth-controller>
        </h-modal-body>

        <h-modal-footer>
            <h-modal-close class="modal__btn btn btn_outline loyalty-program-modal__button_secondary">
                {{ translate('Cancel') }}
            </h-modal-close>

            <auth-controller hidden>
                <button class="modal__btn btn btn_primary loyalty-program-modal__button_primary" slot="logged-out">
                    <login-modal-opener>
                        <h-modal-close>
                            {{ translate('Start collecting points') }}
                        </h-modal-close>
                    </login-modal-opener>
                </button>

                {% if loyaltyProgramSettings.productsForThePoints %}
                    <a href="{{ shopUrls.loyaltyProductsListUrl }}" slot="logged-in">
                        <button class="modal__btn btn btn_primary loyalty-program-modal__button_primary">
                            {{ translate('Explore points rewards') }}
                        </button>
                    </a>
                {% else %}
                    <a href="{{ shopUrls.userPanelUrl }}" slot="logged-in">
                        <button class="modal__btn btn btn_primary loyalty-program-modal__button_primary">
                            {{ translate('Go to account') }}
                        </button>
                    </a>
                {% endif %}

            </auth-controller>
        </h-modal-footer>
    </h-modal>
{% endmacro %}

Used ObjectApi methods

• getShopUrls()
• getLoyaltyProgramSettings()

Used macros

• modal_header

Used webcomponents

• h-modal
• auth-controller