Loyalty Product Actions

loyalty_product_actions module is used to display product actions like adding a product to basket, marking it as a favourite or signing up for notifications about its availability in a loyalty program context.

Configuration parameters

shouldDisplayAddToBasketButton

boolean if set to true a button allowing to add the product to the basket will be displayed.

shouldDisplayAddToFavouritesIcon

boolean if set to true a button allowing to add the product to the favourites list will be displayed.

Module source code

{% from "@macros/icon.twig" import icon %}
{% from "@macros/add_to_favourites_button.twig" import add_to_favourites_button %}

{% set product = ObjectApi.getProduct(product_id) %}
{% set globalPricesSettings = ObjectApi.getProductPricesSettings() %}
{% set notificationSettings = ObjectApi.getNotificationSettings() %}
{% set basketSettings = ObjectApi.getBasketSettings() %}
{% set moduleInstanceId = 'loyalty-product-actions-' ~ moduleInstance %}
{% set shopUrls = ObjectApi.getShopUrls() %}

{% set loyaltyAddToBasketButton %}
    {% if product.packageQuantity %}
        {% set quantity = product.packageQuantity %}
    {% else %}
        {% set quantity = 1 %}
    {% endif %}

    <loyalty-buy-button
            product-id="{{ product.id }}"
            variant-id="{{ product.variant.id }}"
            is-buyable="{{ product.availability.isAvailable }}"
            quantity="{{ quantity }}"
            {% if product.options.count > 0 %}
                has-product-variants
            {% endif %}
            {% if basketSettings.redirectToBasketAfterAdding %}
                basket-path="{{ shopUrls.basketUrl }}"
            {% elseif not basketSettings.showConfirmationMessage %}
                has-flash-message
            {% endif %}
            {% if not product.isAvailable and not product.options.count > 0 %}
                hidden
            {% endif %}
            points-cost="{{ product.variant.loyaltyPointsCost.points }}"
    >
    </loyalty-buy-button>
{% endset %}

<div class="product-actions loyalty-product-actions">
    {% if moduleConfig.shouldDisplayAddToBasketButton %}
        {% if basketSettings.isBuyingEnabled %}
            {% if product.variant.isAvailable or not product.hasOnlyDefaultVariant %}
                <auth-controller class="product-actions__wrapper">
                    <div slot="logged-in" hidden>
                        {{ loyaltyAddToBasketButton }}
                    </div>
                    <div slot="logged-out">
                        <span class="btn btn_full-width btn_special btn_special-disabled">{{ translate('Not enough points') }}</span>
                    </div>
                </auth-controller>
            {% elseif not notificationSettings.getIsProductNotificationEnabled() or not product.availability.isNotificationEnabled %}
                <span class="btn btn_full-width btn_special btn_special-disabled">
                    {{ translate('Unavailable') }}
                </span>
            {% endif %}

            {% if notificationSettings.getIsProductNotificationEnabled() %}
                <availability-notifier-btn
                        product-name="{{ product.name }}"
                        product-image="{{ product.featuredImage.webpThumbnailUrl(120, 120) }}"
                        product-id="{{ product.id }}"
                        product-variant-id="{{ product.variant.id }}"
                        {% if not product.availability.isNotificationEnabled %}
                hidden
                        {% endif %}>
                    <button class="btn btn_secondary" slot="subscribe">
                        {{ icon('icon-bell', {
                            classNames: ['btn__icon', 'btn__icon_left']
                        }) }}
                        {{ translate('Notify me when available') }}
                    </button>
                    <button class="btn btn_outline" slot="unsubscribe" hidden>
                        {{ icon('icon-bell-off', {
                            classNames: ['btn__icon', 'btn__icon_left']
                        }) }}
                        {{ translate('Opt out of notifications') }}
                    </button>
                </availability-notifier-btn>
            {% endif %}
        {% else %}
            <span class="btn btn_full-width btn_special btn_special-disabled">
                {{ translate('Cart disabled') }}
            </span>
        {% endif %}
    {% endif %}

    {% if moduleConfig.shouldDisplayAddToFavouritesIcon %}
        <div class="product-actions__add-to-favorites loyalty-product-actions__add-to-favorites">
            {{ add_to_favourites_button(product, { instanceId: moduleInstanceId }) }}
        </div>
    {% endif %}
</div>

The module uses JSON-LD and Microdata from schema.org to optimize search results in browsers.

Webcomponents reference

• loyalty-buy-button
• availability-notifier-btn
• auth-controller

Macros reference

• icon
• add_to_favourites_button

ObjectApi methods reference

• getProduct()
• getProductPricesSettings()
• getNotificationSettings()
• getBasketSettings()

Used styles

• Product Actions
• Buttons

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- enabling the purchase option in [the orders settings](%s)%s- enabling notifications of product availability in [the orders settings](%s)%s- setting the \"Add to cart\" button depending on [availability statuses](%s)",
                    "placeholderValues": [
                        "\n",
                        "\/admin\/configLanguages\/list",
                        "\n",
                        "\/admin\/configShopping\/list",
                        "\n",
                        "\/admin\/configShopping\/list",
                        "\n",
                        "\/admin\/configAvailabilities\/list"
                    ]
                }
            },
            {
                "type": "checkbox",
                "name": "shouldDisplayAddToBasketButton",
                "label": "Display \"Add to cart\" \/ \"Notify me when available\" button",
                "defaultValue": 1,
                "hint": {
                    "message": "If the product is out of stock and [availability notifications are enabled](%s), a \"Notify when available\" or \"Opt out of notifications\" button will be displayed instead of \"Add to cart\" (according to [the availability status settings](%s)).",
                    "placeholderValues": [
                        "\/admin\/configShopping\/list",
                        "\/admin\/configAvailabilities\/list"
                    ]
                }
            },
            {
                "type": "checkbox",
                "name": "shouldDisplayAddToFavouritesIcon",
                "label": "Display \"Add to favorites\" icon",
                "defaultValue": 1
            },
            {
                "type": "infobox",
                "name": "infobox-bottom",
                "options": {
                    "type": "info",
                    "message": "The display of the \"Add to wishlist\" icon can also be found in the \"Product tile\" settings in the \"Product list\" module and carousel-type product modules (e.g., Related products, New arrivals, Products on sale)."
                }
            }
        ]
    }
]