Basket Summary¶
The <basket-summary> webcomponent is used to render a summary of a basket including detailed information about the prices, products inside the basket and coupon codes.
Attributes¶
| Attribute name | Type | Default | Description |
|---|---|---|---|
mode |
string |
basket |
Determines which view mode of basket summary should be used. Possible values are basket and checkout |
hasContent |
boolean |
true |
If set to true an additional content for basket summary containing coupon code and prices sections will be displayed |
url |
string |
'' | Link to a delivery and payment view of the basket, necessary when using basket mode |
basket-url |
string |
'' | Link to a view with a list of products inside the cart, necessary when using basket mode |
Example¶
<basket-summary class="basket-module" mode="checkout">
<div class="basket-module__content">
<p class="section-title section-title_s">Podsumowanie</p>
<div class="basket-summary__coupon">
<p><b>Kupon rabatowy</b></p>
<basket-summary-coupon-codes>
<div class="control__additional-content">
<p>
<span class="tag tag_l font_semibold font_size-s mb-xs-1 basket-summary__coupon-code">
mycoupon
</span>
<br>
<span class="font_size-s font_semibold color_primary">Rabat 15%</span>
<br>
</p>
<button type="submit" class="btn btn_outline btn_xs">
Usuń kod z zamówienia
</button>
</div>
</basket-summary-coupon-codes>
</div>
<basket-summary-checkout-prices>
<div class="basket-summary__prices">
<p><b>Wartość zamówienia</b></p>
<ul class="price-list price-list_s">
<li class="price-list__item">
<span class="price-list__label">Produkty</span>
<span class="price-list__value">4,99 zł</span>
</li>
<li>
<basket-discounts-list>
<h-accordion lazy class="basket-discounts-list">
<h-accordion-group opened>
<h-accordion-toggler
class="accordion__toggler p_s mb-xs-1"
tabindex="0"
role="button"
id="50nhq74qa"
aria-expanded="true"
aria-controls="bx9ovrt9d"
aria-disabled="false"
>
<span>
Rabaty i zniżki
<svg class="icon accordion__toggler-icon accordion__toggler-icon_secondary">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-down"></use>
</svg>
</span>
<span>
<span class="price__value price__value_special">
1,00 zł
</span>
</span>
</h-accordion-toggler>
<h-accordion-content
role="region"
id="bx9ovrt9d"
labelledby="50nhq74qa"
class="accordion-toggle-transition-end"
style="height: auto;"
>
<ul class="price-list price-list_secondary price-list_s">
<li class="price-list__item">
<span class="price-list__label price_s">
<span class="tag font_semibold tag_promotion">
- 15%
</span>
Rabat - kupon rabatowy
</span>
<span class="price-list__value price__value price__value_special price_s">
0,75 zł
</span>
</li>
<li class="price-list__item">
<span class="price-list__label price_s">
<span class="tag font_semibold tag_promotion">
- 5%
</span>
Rabat - dla Ciebie
</span>
<span class="price-list__value price__value price__value_special price_s">
0,25 zł
</span>
</li>
</ul>
</h-accordion-content>
</h-accordion-group>
</h-accordion>
</basket-discounts-list>
</li>
<li class="price price_s price-list__item">
<span class="price__label price-list__label">
Dostawa
<br>
<small class="color_secondary">
odbiór osobisty
</small>
</span>
<span class="price__value price-list__value">Darmowa</span>
</li>
<li class="price price_s price-list__item">
<span class="price__label price-list__label">
Metoda płatności
<br>
<small class="color_secondary">
Przelewy24
</small>
</span>
<span class="price__value price-list__value">Darmowa</span>
</li>
</ul>
</div>
</basket-summary-checkout-prices>
</div>
<basket-summary-checkout-footer>
<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">Do zapłaty</span>
<span class="price-list__value price price_m">
<span class="p price__value">
<strong class="p_l font_semibold price__value_special">
3,99zł
</strong>
</span>
<br>
<span class="p_s color_tertiary">
Zawiera VAT
</span>
</span>
</li>
</ul>
<div>
<p>
<a class="btn btn_primary btn_full-width">
<h-icon icon-name="icon-basket" 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-basket"></use>
</svg>
</h-icon>
Zamawiam i płacę
</a>
</p>
</div>
</footer>
</div>
</basket-summary-checkout-footer>
</basket-summary>