Bundle Item¶

The <bundle-item> webcomponent is used to display a single product that is contained inside a bundle and keep track of it's stock data like it's variants or availability in case they change. It is used inside the product_bundle_item_tile macro.

Attributes¶

Attribute name	Type	Default	Description
`product-id`	number	-	Id of the product we want to add to keep track of
`variant-id`	number	-	Id of the product variant we want to keep track of
`has-variants`	boolean	false	If a given product or a product variant has it's own variants this should be set to `true`

Event Bus events¶

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

product.stockChanged

DOM events¶

This webcomponent dispatches the following DOM events:

optionsUpdated

Example¶

Here is an example of <bundle-item> element usage.

HTML

    <bundle-item product-id="12" variant-id="34" class="product-bundle-item-tile grid">
        <div class="grid__row">
            <div class="grid__col grid__col_xs-auto">
                <picture class="image">
                    <img src="/path/to/img2.png" alt="example alt" title="example title" width="100" height="80">
                </picture>
            </div>
            <div class="grid__col grid__col_xs-grow">
                <div class="mt-xs-1 mb-xs-2">
                    <h1 class="label_vcenter">
                        <span class="p p_no-margin color_neutral-800 font_semibold">
                            Example product
                        </span>
                    </h1>                    
                </div>
            <div class="product-availability">
                <product-availability product-id="97" variant-id="85" class="product-availability" on-interaction>
                    <span slot="product-availability-description">Dostępność: </span>
                    <div class="product-availability__image-and-description" slot="product-availability-image">
                        <strong>brak informacji</strong>
                    </div>
                </product-availability>
            </div>
        </div>
    </bundle-item>