Skip to content

product_quantity

The product_quantity macro is used to render a component allowing to choose the quantity of the currently viewed product. This macro can only be used within product card context.

Definition

{% product_quantity(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.instanceId string - yes Unique identifier commonly provided by a special module variable moduleInstance

Example

In this example we render a simple product quantity. To get the product object we use the getProduct() method from ObjectApi. If using the macro inside a module we can pass a moduleInstance as an instanceId parameter.

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

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

{{ product_quantity(product, { instanceId: moduleInstance }) }}

Macro source code

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

    <div class="product-quantity">
        <div class="control">
            {% if not options.noLabel %}
                <div class="control__label">
                    <label for="product-quantity-{{ options.instanceId }}">
                        {{ translate('Quantity') }}
                    </label>
                </div>
            {% endif %}

            {% if product.packageQuantity %}
                {% set step = product.packageQuantity %}
            {% else %}
                {% set step = 1 %}
            {% endif %}

            <div class="control__content">
                <div class="control__element">
                    <product-quantity
                        id="product-quantity-{{ options.instanceId }}"
                        product-id="{{ product.id }}"
                        variant-id="{{ product.variant.id }}"
                        value="{{ step }}"
                        class="product-quantity"
                        on-interaction
                    >
                        <h-input-stepper
                            {% if product.unit.isFloatingPoint == true %} allowed-number-of-fraction-digits="3" {% endif %}
                            class="input-stepper product-quantity__input"
                            min="0"
                            step="{{ step }}"
                            value="{{ step }}"
                            round-to="{{ product.packageQuantity }}"
                            control-id="product-quantity-{{ options.instanceId }}"
                        >
                            <h-button-stepper class="input-stepper__button" type="decrement" aria-label="{{ translate('Remove') }}">
                                <span class="btn-icon btn-icon_outline btn-icon_join-right input-stepper__icon">
                                    {{ icon('icon-minus', {
                                        classNames: ['btn__icon']
                                    }) }}
                                </span>
                            </h-button-stepper>

                            <div class="input-stepper__display-container">
                                <h-display-stepper class="input-stepper__value"></h-display-stepper>
                                <span class="input-stepper__additional-content">{{ product.unit.name }}</span>
                            </div>

                            <h-button-stepper class="input-stepper__button input-stepper_increment" type="increment" aria-label="{{ translate('Add') }}">
                                <span class="btn-icon btn-icon_outline btn-icon_join-left input-stepper__icon">
                                    {{ icon('icon-plus', {
                                        classNames: ['btn__icon']
                                    }) }}
                                </span>
                            </h-button-stepper>
                        </h-input-stepper>
                    </product-quantity>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}

Object Api methods reference

Macros reference

Webcomponents reference