Product Quantity¶

This webcomponent is responsible for rendering product quantity on the product card.

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
value	`number`	0	no	Initial value of the webcomponent

Synchronization¶

When multiple <product-quantity> elements referencing the same product-id and variant-id are present on a page, they will be synchronize with each other. If one element's value changes, the others will automatically update to reflect the same value.

DOM events¶

This webcomponent listens to the following DOM events:

valueChanged

Event Bus events¶

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

product.quantityChanged

This webcomponent also dispatches the following events with the Event Bus:

product.quantityChanged

Example¶

Here is an example of <product-quantity> element usage. We have also used the Input Stepper webcomponent which allows for more control over the <product-quantity>.

<div class="control">
    <div class="control__label">
        <label for="product-quantity-1">Quantity</label>
    </div>

    <div class="control__content">
        <div class="control__element">
            <product-quantity class="product-quantity">
                <h-input-stepper class="input-stepper" min="0" max="9999">
                    <h-button-stepper type="decrement" class="input-stepper__button">
                        Button visualization 1
                    </h-button-stepper>

                    <h-display-stepper control-id="product-amount-123"  class="input-stepper__value"></h-display-stepper>
                    Unit name

                    <h-button-stepper type="increment" class="input-stepper__button input-stepper_increment">
                        Button visualization 2
                    </h-button-stepper>
                </h-input-stepper>
            </product-quantity>
        </div>
    </div>
</div>