Loyalty Number Of Points

Use loyalty_number_of_points module to display a box with the amount of points belonging to the currently authenticated user along with links that open modals with informations about how to collect and redeem points in your store.

Configuration parameters

none

Module source code

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

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

{% set shouldDisplayExchangeGuideModal = loyaltyProgramSettings.ordersMode or loyaltyProgramSettings.feedbackMode or loyaltyProgramSettings.newsletterMode %}
{% set shouldDisplayExchangeTermsModal =
    productsForThePoints.exchangeDuringShopping or
    productsForThePoints.exchangeMinimumBasket or
    productsForThePoints.exchangeProductsLimit or
    productsForThePoints.exchangePointsLimit
%}

{% set guideModalName = 'loyalty-number-of-points-guide-modal' ~ moduleInstance %}
{% set termsModalName = 'loyalty-number-of-points-terms-modal-' ~ moduleInstance %}

<section
    class="
        info-box
        info-box__content
        info-box__content_flex
        loyalty-number-of-points
        grid__row_xs-hbetween
        grid__row_sm-vcenter
        grid__row_xs-vtop
    "
>
    <div
        class="
            labeled-icon
            labeled-icon_horizontal
            loyalty-number-of-points__icon-wrapper
            grid__col_xs-12
            grid__col_sm-auto
        "
    >
        {{ icon('icon-gift', {
            size: 'xxl',
            classNames: 'loyalty-number-of-points__icon'
        }) }}
        <div class="loyalty-number-of-points__icon-label ml-xs-2">
            <p class="p p_no-margin">{{ translate('Available points') }}:</p>
            <p class="align_left loyalty-number-of-points__points">
                <user-loyalty-points></user-loyalty-points>
            </p>
        </div>
    </div>

    {% if shouldDisplayExchangeGuideModal or shouldDisplayExchangeTermsModal %}
        <div class="loyalty-number-of-points__links-wrapper grid__col_xs-12 grid__col_sm-auto">
            {% if shouldDisplayExchangeGuideModal %}
                <div class="grid__row grid__row_xs-hleft grid__row_sm-hright">
                    <div class="grid__col">
                        <p class="p_s p_no-margin align_left loyalty-number-of-points__link">
                            {{
                                translate('Find out %show to get more points%s', [
                                    "<h-modal-opener class='link link_no-underline' name='#{guideModalName}'>",
                                    "</h-modal-opener>"
                                ])
                            }}
                        </p>
                    </div>
                </div>
            {% endif %}
            {% if shouldDisplayExchangeTermsModal %}
                <div class="grid__row grid__row_xs-hleft grid__row_sm-hright">
                    <div class="grid__col">
                        <h-modal-opener
                            class="p_s align_left link link_no-underline loyalty-number-of-points__link"
                            name="{{ termsModalName }}"
                        >
                            {{ translate('Terms of redeeming points') }}
                        </h-modal-opener>
                    </div>
                </div>
            {% endif %}
        </div>
    {% endif %}
</section>

{% if shouldDisplayExchangeGuideModal %}
    {{ loyalty_exchange_guide_modal({
        modalName: guideModalName
    }) }}
{% endif %}

{% if shouldDisplayExchangeTermsModal %}
    {{ loyalty_exchange_terms_modal({
        modalName: termsModalName
    }) }}
{% endif %}

Macros reference

• icon
• modal_header
• loyalty_exchange_guide_modal
• loyalty_exchange_terms_modal

Module configuration schema

[{
    "state":"unfolded",
    "label":"General settings",
    "elements":[
        {
            "type":"infobox",
            "name":"infobox",
            "options":{
                "type":"blank",
                "message":"#### Related settings in the admin panel%s- changing phrases in [translations](%s)%s- conditions for earning and redeeming points in [the loyalty program settings](%s)",
                "placeholderValues":[
                    "\n",
                    "\/admin\/configLanguages\/list",
                    "\n",
                    "\/admin\/configLoyalty"
                ]
            }
        }
    ]
}]