Product Availability

This webcomponent is responsible for rendering product availability on the product card based on the selected product variant.

Additional Feature

This web component fully interacts with Object API data related to the product quantity. This means that if there is no product available, the font color will change to the current error color set in the shop. Additionally, if an image is uploaded for visualizing the available quantity of the product, it will be displayed on the left-hand side next to the quantity textual information.

Attributes

Attribute name	Type	Default	Required	Description
product-id	number	null	yes	Id of the product to which this webcomponent should refer
variant-id	number	null	yes	Id of the product variant to which this webcomponent should refer

Example

Here is an example of <product-availability> element usage taken from the product_availability macro.

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

{% set product = ObjectApi.getProduct(product_id) %}

<product-availability product-id="1" variant-id="234" class="product-availability">
    <span slot="product-availability-description">{{ translate('Availability') }}: </span>

    <div class="product-availability__image-and-description" slot="product-availability-image">
        {% if product.availability.imageUrl %}
            {{ image({
                src: product.availability.imageUrl,
                alt: "product-availability-module",
                title: "product-availability-module",
                class: "product-availability__image",
                loading: 'lazy'
            }
            ) }}
        {% endif %}

        <strong
            class="{{
                product.availability.isAvailable ?
                '' :
                'product-availability__description_unavailable'
            }}"
        >
            {{ product.availability.name }}
        </strong>
    </div>
</product-availability>