Product Quantity and Availability¶

Use product_quantity_and_availability module to insert information about the product's quantity and availability statuses as well as an input that allows to choose a certain quantity of items that should be added to cart.

Configuration parameters¶

isProductQuantityVisible¶

int if set to 1 a quantity information will be displayed.

isProductAvailabilityVisible¶

int if set to 1 an availability information will be displayed.

Module source code¶

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

{% set product = ObjectApi.getProduct(product_id) %}
{% set basketSettings = ObjectApi.getBasketSettings() %}
{% set globalPricesSettings = ObjectApi.getProductPricesSettings() %}

{% set instanceId = 'product-quantity-and-availability-' ~ moduleInstance %}

{% set hasMultipleVariants = not product.hasOnlyDefaultVariant %}
{% set isBuyingAvailable = (product.isAvailable and basketSettings.isBuyingEnabled) or hasMultipleVariants %}

{% set shouldShowProductQuantity = moduleConfig.isProductQuantityVisible and isBuyingAvailable %}

{% set productAvailabilityClassNames = shouldShowProductQuantity ?: 'product-availability_flex' %}

<div class="product-quantity-and-availability grid">
    <div class="grid__row grid__row_md-vbottom">
        {% if shouldShowProductQuantity %}
            <auth-controller class="grid__col grid__col_md-auto grid__col_xs-12">
                <div slot="logged-in" hidden>
                    {{ product_quantity(product, { instanceId }) }}
                </div>
                <div slot="logged-out">
                    {% if globalPricesSettings.showPricesToUnregistered %}
                        {{ product_quantity(product, { instanceId }) }}
                    {% endif %}
                </div>
            </auth-controller>
        {% endif %}

        {% if moduleConfig.isProductAvailabilityVisible and basketSettings.isBuyingEnabled %}
            <div class="grid__col grid__col_md-auto grid__col_xs-12">
                {{ product_availability(product, {
                    classNames: productAvailabilityClassNames
                }) }}
            </div>
        {% endif %}
    </div>

    {% if moduleConfig.isProductInBasketVisible %}
        <product-in-basket
            class="product-in-basket mt-xs-2"
            product-id="{{ product.id }}"
            variant-id="{{ product.variant.id }}"
            hidden>
                <div class="flash-message flash-message__success flash-message_no-animation">
                    <h-icon
                        icon-name="icon-check"
                        css-classes="flash-message__icon"
                    ></h-icon>

                    <p>{{ translate('In cart') }}: <span class="js__product-in-basket-count"></span> {{ product.unit.name }}</p>
                </div>
        </product-in-basket>
    {% endif %}
</div>

Webcomponents reference¶

auth-controller

Macros reference¶

Used Object Api methods¶

Used styles¶

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- changing [the measurement units](%s) in the quantity field%s- setting [product availability statuses](%s)",
                    "placeholderValues": [
                        "\n",
                        "\/admin\/configLanguages\/list",
                        "\n",
                        "\/admin\/configShopping\/list",
                        "\n",
                        "\/admin\/configUnits\/list",
                        "\n",
                        "\/admin\/configAvailabilities\/list"
                    ]
                }
            },
            {
                "type": "checkbox",
                "name": "isProductQuantityVisible",
                "label": "Display the \"Quantity\" field",
                "defaultValue": 1,
                "hint": "If the \"Quantity\" field is hidden, each click on the \"Add to Cart\" button will add one product (or product unit). The customer will be able to change this quantity in the cart."
            },
            {
                "type": "checkbox",
                "name": "isProductAvailabilityVisible",
                "label": "Display availability status",
                "defaultValue": 1
            },
            {
                "type": "checkbox",
                "name": "isProductInBasketVisible",
                "label": "Display the message \"In cart: x pc.\" when your cart contains this product",
                "defaultValue": 1
            }
        ]
    }
]