Basket Preview¶
The <basket-preview> webcomponent is used to render a dropdown containing a list of items currently in the basket.
Attributes¶
| Attribute name | Type | Default | Description |
|---|---|---|---|
basket-url |
string | '' | Link to a basket products summary page |
basket-delivery-payment-url |
string | '' | Link to delivery and payment page |
is-with-value |
boolean | false | Decide whether a cart value or a Cart label should be displayed |
Event Bus events¶
This webcomponent emits the following events with the Event Bus:
Example¶
<basket-preview is-with-value basket-url="/pl/basket" basket-delivery-payment-url="/pl/basket/step2">
<h-dropdown name="basket-preview" direction="bottom-right">
<h-dropdown-toggler
name="basket-preview"
class="dropdown__toggler"
tabindex="0"
role="button"
aria-expanded="false"
>
<div class="labeled-icon">
<div class="indicator" data-value="1">
<h-icon icon-name="icon-basket" css-classes="labeled-icon__icon">
<svg class="icon labeled-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-basket"></use>
</svg>
</h-icon>
</div>
<div class="labeled-icon__signature font_bold">
4,99 zł
</div>
</div>
</h-dropdown-toggler>
<h-portal hidden disabled to="dropdown-portal">
<h-dropdown-content name="basket-preview" class="dropdown__content" role="menu">
<div class="basket-preview" role="menuitem">
<header class="grid__row">
<div class="grid__col grid__col_xs-12 grid__col_sm-grow mb-xs-2">
<h2 class="section-title section-title_s">Produkty w koszyku</h2>
</div>
<div class="grid__col grid__col_xs-12 grid__col_sm-auto">
<button class="btn btn_outline btn_xs">
<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>
Wyczyść
</button>
</div>
</header>
<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="/alt/of/image">
</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-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 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>
</div>
<confirm-modal
title="Czy na pewno chcesz usunąć produkt z koszyka?"
confirmtext="Usuń produkt"
canceltext="Anuluj"
>
</confirm-modal>
</basket-products-list>
<basket-summary url="/pl/basket/step2" basket-url="/pl/basket">
<basket-summary-basket-footer basket-url="/pl/basket" url="/pl/basket/step2">
<div class="basket-module__content basket-module__content_secondary">
<footer class="basket-summary__footer">
<ul class="price-list">
<li class="price-list__item">
<span class="price-list__label">Suma</span>
<span class="price-list__value price price_m">
<span class="p price__value">
<strong class="p_l font_semibold price__value_special">
3,84 zł
</strong>
</span>
<br>
<span class="p_s color_tertiary">
Zawiera VAT
</span>
</span>
</li>
</ul>
<p>
<a class="btn btn_primary btn_full-width" href="/pl/basket/step2">
<h-icon icon-name="icon-truck" 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-truck"></use>
</svg>
</h-icon>
Dostawa i płatność
</a>
</p>
<p>
<a class="btn btn_outline btn_full-width" href="/pl/basket">
Zobacz produkty w koszyku
</a>
</p>
<small>Koszt dostawy w następnym kroku.</small>
</footer>
</div>
</basket-summary-basket-footer>
</basket-summary>
</div>
<div role="menuitem"></div>
</h-dropdown-content>
</h-portal>
</h-dropdown>
</basket-preview>