Loyalty Buy Button

The <loyalty-buy-button> webcomponent is used to display a button that allows to add a product in the loyalty program context to the basket. This webcomponent is an extension of buy-button webcomponent. If a user has enough points the button allowing to add product to basket will be displayed. Otherwise the information about insufficient points will be displayed.

Attributes

Attribute name	Type	Default	Description
points-cost	number	null	A cost of a given product in points

Note that all the attributes from the buy-button also apply in this webcomponent and should be added in order to make it work properly.

Example

Here is an example of <loyalty-buy-button> element usage on a loyalty product card. To get the necessary data we use three methods from the ObjectApi: getProduct(), getBasketSettings() and getShopUrls().

Twig

    {% set product = ObjectApi.getProduct(product_id) %}
    {% set basketSettings = ObjectApi.getBasketSettings() %}
    {% set shopUrls = ObjectApi.getShopUrls() %}

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

Webcomponents reference

• buy-button