Buy Button¶

The <buy-button> webcomponent is used to display a button allowing to add a product to the basket.

Attributes¶

Attribute name	Type	Default	Description
`product-id`	number	-	Id of the product we want to add to the basket
`variant-id`	number	-	Id of the product variant we want to add to the basket
`variant-options`	Record<string, string	number	unknown>
`has-product-variants`	boolean	-	Set to `true` if a product has variants. It is mandatory for a correct validation of a product containing variants.
`has-bundle-items`	boolean	-	Set to `true` if a product has variants. It is mandatory for a correct validation of a bundle.
`basket-tracking-params`	string	-	Id of the product variant we want to add to the basket
`is-buyable`	boolean	-	Set to `true` if a product is available for buying. It is important for a correct error handling.
`is-disabled`	boolean	-	Set to `true` if a product is disabled. It is important for a correct error handling.
`product-path`	string	-	Url to a product card for a given product. If specified and the user could not add a product to a basket, they will be redirected to this url.
`basket-path`	string	-	Url to a basket. If specified, adding a product to card will redirect a user to this url.
`is-exchanged-with-loyalty-points`	boolean	-	Set to `true` if a product is exchanged within loyalty points. It is responsible for telling the basket that such product is exchanged.
`bundle-items`	BundleItem[]	-	Use outside a product card to set the items of a bundle. It not specified and we are within a product card, the items will be calculated automatically and there is no need to specify them by hand.

BundleItem¶

The bundle-items attribute has a type of BundleItem[] which represents an array of BundleItem models.

Event Bus events¶

This webcomponent listens to the following events with the Event Bus:

Example¶

Here is an example of <buy-button> element usage on a 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() %}

    <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 %}
    >
        <button type="button" class="btn btn_primary">{{ translate('Add to cart') }}</button>
    </buy-button>

Example¶

Here is an example of rendering a <buy-button> element for every product on a product list page. To get the necessary data we use three methods from the ObjectApi that we used in the example above: getProduct(), getBasketSettings() and getShopUrls(). Besides that we specify two additional props: product-path that redirects to a product page in case a product has variants and bundle-items which specifies products inside a bundle if they don't have variants. Otherwise if a product is a bundle containing products with variants a link redirecting to it's bundle page will be displayed.

Twig

    {% set productList = ObjectApi.getProducts(systemConfig.productsCount) %}
    {% set basketSettings = ObjectApi.getBasketSettings() %}
    {% set shopUrls = ObjectApi.getShopUrls() %}

    {% if product.isBundle and not product.bundle.hasItemWithNotStockOption %}
        {% set bundleItems = [] %}
        {% for item in product.bundle.items %}
            {% set bundleItems = bundleItems|merge([{ variantId: item.variant.id, options: null }]) %}
        {% endfor %}
    {% endif %}

    {% for product in productList %}
        {% if product.isBundle and product.bundle.hasItemWithNotStockOption %}
            <a class="btn btn_s btn_special" href="{{ product.url }}">
                {{ translate('Set up bundle') }}
            </a>
        {% else %}
            <buy-button
                product-id="{{ product.id }}"
                variant-id="{{ product.variant.id }}"
                is-buyable="{{ product.availability.isAvailable }}"
                product-path="{{ productUrl }}"
                {% if basketSettings.redirectToBasketAfterAdding %}
                    basket-path="{{ shopUrls.basketUrl }}"
                {% endif %}
                {% if product.options.count > 0 %}
                    has-product-variants
                {% endif %}
                {% if not product.isAvailable %}
                    hidden
                {% endif %}
                {% if product.isBundle and not product.bundle.hasItemWithNotStockOption %}
                    bundle-items="{{ bundleItems|json_encode }}"
                {% endif %}
            >
                <button class="btn btn_s btn_primary">{{ translate('To cart') }}</button>
            </buy-button>
        {% endif %}
    {% endfor %}