Product Bundles¶
The <product-bundles> webcomponent is used to inform a buy button about potential changes to stock data of the products included in the currently viewed bundle so they are taken into account when adding such bundle to a basket.
Attributes¶
none
Event Bus events¶
This webcomponent listens to the following events with the Event Bus:
Example¶
Here is an example of <product-bundles> element usage from the bundle_items module. We also used bundle-item webcomponents for notifying the product-bundles about each individual potential stock change.
HTML
<product-bundles class="bundle-items">
<div class="bundle-items__list">
<bundle-item product-id="97" variant-id="85" 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/img.png" alt="example alt" title="example title" width="233" height="291">
</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">
Miniwulkan
</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 class="">dostępny na zamówienie</strong>
</div>
</product-availability>
</div>
</div>
</bundle-item>
<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>
</div>
</product-bundles>