Skip to content

product_availability

The product_availability macro is used to render the availability status of the currently viewed product. This macro can only be used within product card context.

Definition

{% product_availability(product, options) %}

Input parameters

product

Product parameter represents a Product object from ObjectApi.

options

object represents an object of product quantity options

Option key Type Default Required Description
options.classNames string - no Set of classes that will be added to the input

Example

In this example we render a simple product availability. To get the product object we use the getProduct() method from ObjectApi.

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

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

{{ product_availability(product) }}

Example

In this example we render a product availability with additional styling classes.

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

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

{{ product_availability(product, { classNames: 'color_primary-700 mb-xs-2' }) }}

Macro source code

{% macro product_availability(product, options) %}
    {% from "@macros/image.twig" import image %}

    {% set shopUrls = ObjectApi.getShopUrls() %}

    <div class="product-availability {{ options.classNames }}">
        <product-availability
            product-id="{{ product.id }}"
            variant-id="{{ product.variant.id }}"
            {% if not product.hasOnlyDefaultVariant %}
                has-stocks-variants
            {% endif %}
            class="product-availability {{ options.classNames }}"
            on-interaction
        >
            <span slot="product-availability-description">{{ translate('Availability') }}: </span>
            <div class="product-availability__image-and-description" slot="product-availability-image">
                {% if product.availability.imageUrl %}
                    {{ image({
                        img: {
                            src: product.availability.imageUrl,
                            alt: "product-availability-module",
                            title: "product-availability-module",
                            class: "product-availability__image",
                            loading: 'lazy'
                        }
                    }
                    ) }}
                {% endif %}
                <strong
                    {% if not product.availability.isAvailable %}
                        class="product-availability__description_unavailable"
                    {% endif %}
                >
                    {{ product.availability.name }}
                </strong>
            </div>
        </product-availability>

        {% set availabilitySchema =  product.availability.isAvailable ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock' %}
        <script type="application/ld+json">
            {
                "@context": [
                    "http://schema.org/",
                    { "@base": "{{ shopUrls.mainPageUrl.absolute }}" }
                ],
                "@id": "{{ product.url.relative }}",
                "offers": {
                    "@id": "{{ product.url.relative }}",
                    "@type": "Offer",
                    "availability": "{{ availabilitySchema }}"
                }
            }
        </script>
    </div>
{% endmacro %}

Object Api methods reference

Webcomponents reference