Basket Products List¶
The <basket-products-list> webcomponent is used to render a list of products currently in a basket.
Attributes¶
| Attribute name | Type | Default | Description |
|---|---|---|---|
mode |
basket or checkout |
basket |
Display mode of a basket. Both modes reder different details along with products |
has-additional-info |
boolean | true | If set to true renders buttons that allow to add products from the cart to a wishlist |
DOM events¶
This webcomponent listens to the following DOM events:
Example¶
<basket-products-list mode="basket">
<div class="basket-products__list">
<div class="basket-product">
<div class="basket-product__image">
<a class="basket-product__image-border" href="/link/to/product">
<img src="/link/to/image" alt="image alt">
</a>
</div>
<div class="basket-product__wrapper">
<div class="basket-product__content">
<div class="basket-product__info">
<div class="basket-product__name">
<p>
<a class="basket-product__link" href="/link/to/product">Banany</a>
</p>
<button class="btn btn_ghost btn_xs visible-xs-only">
<h-icon icon-name="icon-trash" css-classes="btn__icon btn__icon_left">
<svg class="icon btn__icon btn__icon_left">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-trash"></use>
</svg>
</h-icon>
Usuń
</button>
</div>
<div class="basket-product__actions">
<h-input-stepper
class="input-stepper"
product-id="product-id"
allowed-number-of-fraction-digits="3"
min="0.01"
step="1"
round-to="0"
value="1" control-id="control-id"
max="Infinity"
>
<h-button-stepper
class="input-stepper__button"
type="decrement"
tabindex="0"
role="button"
aria-label="Usuń"
>
<span class="btn-icon btn-icon_outline btn-icon_join-right input-stepper__icon">
<h-icon
icon-name="icon-minus"
role="button"
size="xs"
clickable
aria-label="Minus icon"
css-classes="btn__icon"
>
<svg class="icon undefined icon_clickable btn__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-minus"></use>
</svg>
</h-icon>
</span>
</h-button-stepper>
<div class="input-stepper__display-container">
<h-display-stepper class="input-stepper__value" aria-label="Ilość">
<input
type="text"
inputmode="numeric"
class="input-stepper__value_input"
aria-label="Ilość"
id="input-stepper-id">
</h-display-stepper>
<span class="input-stepper__additional-content">kg</span>
</div>
<h-button-stepper
class="input-stepper__button input-stepper_increment"
type="increment"
tabindex="0"
role="button"
aria-label="Dodaj"
>
<span class="btn-icon btn-icon_outline btn-icon_join-left input-stepper__icon">
<h-icon
icon-name="icon-plus"
role="button"
size="xs"
clickable
aria-label="Plus icon"
css-classes="btn__icon"
>
<svg class="icon undefined icon_clickable btn__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-plus"></use>
</svg>
</h-icon>
</span>
</h-button-stepper>
</h-input-stepper>
<button class="btn btn_ghost btn_xs hidden-xs-only">
<h-icon icon-name="icon-trash" css-classes="btn__icon btn__icon_left">
<svg class="icon btn__icon btn__icon_left">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-trash"></use>
</svg>
</h-icon>
Usuń
</button>
</div>
</div>
</div>
</div>
<div class="basket-product__prices">
<div class="price basket-product__price">
<span class=" price__value price__value_bold ">4,99 zł</span>
<span class="vat-info">z 23% VAT</span>
</div>
</div>
</div>
<div class="basket-product">
<div class="basket-product__image">
<a class="basket-product__image-border" href="/link/to/product">
<img src="/link/to/image" alt="image alt">
</a>
</div>
<div class="basket-product__wrapper">
<div class="basket-product__content">
<div class="basket-product__info">
<div class="basket-product__name">
<p>
<a class="basket-product__link" href="/link/to/product">Kiwi</a>
</p>
<button class="btn btn_ghost btn_xs visible-xs-only">
<h-icon icon-name="icon-trash" css-classes="btn__icon btn__icon_left">
<svg class="icon btn__icon btn__icon_left">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-trash"></use>
</svg>
</h-icon>
Usuń
</button>
</div>
<div class="basket-product__actions">
<h-input-stepper
class="input-stepper"
product-id="product-id"
allowed-number-of-fraction-digits="3"
min="0.01"
step="1"
round-to="0"
value="1"
control-id="control-id"
max="Infinity"
>
<h-button-stepper
class="input-stepper__button"
type="decrement"
tabindex="0"
role="button"
aria-label="Usuń"
>
<span class="btn-icon btn-icon_outline btn-icon_join-right input-stepper__icon">
<h-icon
icon-name="icon-minus"
role="button"
size="xs"
clickable
aria-label="Minus icon"
css-classes="btn__icon"
>
<svg class="icon undefined icon_clickable btn__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-minus"></use>
</svg>
</h-icon>
</span>
</h-button-stepper>
<div class="input-stepper__display-container">
<h-display-stepper class="input-stepper__value" aria-label="Ilość">
<input
type="text"
inputmode="numeric"
class="input-stepper__value_input"
aria-label="Ilość"
id="input-stepper-id"
>
</h-display-stepper>
<span class="input-stepper__additional-content">kg</span>
</div>
<h-button-stepper
class="input-stepper__button input-stepper_increment"
type="increment"
tabindex="0"
role="button"
aria-label="Dodaj"
>
<span class="btn-icon btn-icon_outline btn-icon_join-left input-stepper__icon">
<h-icon
icon-name="icon-plus"
role="button"
size="xs"
clickable
aria-label="Plus icon"
css-classes="btn__icon"
>
<svg class="icon undefined icon_clickable btn__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-plus"></use>
</svg>
</h-icon>
</span>
</h-button-stepper>
</h-input-stepper>
<button class="btn btn_ghost btn_xs hidden-xs-only">
<h-icon icon-name="icon-trash" css-classes="btn__icon btn__icon_left">
<svg class="icon btn__icon btn__icon_left">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-trash"></use>
</svg>
</h-icon>
Usuń
</button>
</div>
</div>
</div>
</div>
<div class="basket-product__prices">
<div class="price basket-product__price">
<span class=" price__value price__value_bold ">3,99 zł</span>
<span class="vat-info">z 23% VAT</span>
</div>
</div>
</div>
</div>
<confirm-modal
title="Czy na pewno chcesz usunąć produkt z koszyka?"
confirmtext="Usuń produkt"
canceltext="Anuluj"
>
</confirm-modal>
</basket-products-list>