{% include "@Components/widgets/cart-overview-widget/cart-overview-widget.twig" with {props: {
title: "V košíku máte",
products: [
{
id: "ETHN01",
title: "Papírová taška hnědá ExtraTWIST 22x10x28",
img: {
src: "https://placehold.co/64x64",
srcset: [
"https://placehold.co/64x64 1x",
"https://placehold.co/112x112 2x"
]
},
color: {
title: "Hnědá",
name: "color-checkbox",
colors: [
"#CFAF8A"
],
},
price: {
main_title: "1 ks",
main: "20,75",
},
total_price: "999 999",
},
{
id: "ETHN01",
title: "Papírová taška hnědá ExtraTWIST 22x10x28",
img: {
src: "https://placehold.co/64x64",
srcset: [
"https://placehold.co/64x64 1x",
"https://placehold.co/112x112 2x"
]
},
color: {
title: "Hnědá",
name: "color-checkbox",
colors: [
"#CFAF8A"
],
},
price: {
main_title: "1 ks",
main: "20,75",
},
total_price: "999 999",
},
{
id: "ETHN01",
title: "Papírová taška hnědá ExtraTWIST 22x10x28",
img: {
src: "https://placehold.co/64x64",
srcset: [
"https://placehold.co/64x64 1x",
"https://placehold.co/112x112 2x"
]
},
color: {
title: "Hnědá",
name: "color-checkbox",
colors: [
"#CFAF8A"
],
},
price: {
main_title: "1 ks",
main: "20,75",
},
total_price: "999 999",
},
{
id: "ETHN01",
title: "Papírová taška hnědá ExtraTWIST 22x10x28",
img: {
src: "https://placehold.co/64x64",
srcset: [
"https://placehold.co/64x64 1x",
"https://placehold.co/112x112 2x"
]
},
tags: [
{
title: "Potisk",
icon: { src: "@Images/svg/printer.svg",
},
},
],
color: {
title: "Hnědá",
name: "color-checkbox",
colors: [
"#CFAF8A"
],
},
price: {
main_title: "1 ks",
main: "20,75",
},
total_price: "999 999",
},
],
shipment: {
label: "Způsob dopravy",
title: "Česká pošta - Balík do ruky",
img: {
src: "images/svg/ceska-posta.svg",
},
price: {
main: "200 199",
},
},
payment: {
label: "Způsob platby",
title: "Dobírka",
img: {
src: "images/svg/cash-payment-method.svg",
},
price: {
main: "200 199",
},
},
coupon: {
label: "Promokód",
title: "Jaro2024",
price: {
main: "-129",
},
img: {
src: "images/svg/logo-horizontal.svg",
},
},
total: {
main_title: "Celkem s DPH 21 %",
main: "99 999 999",
base_title: "Celkem bez DPH",
base: "10 056 990",
},
}} %}
<div class="d-flex flex-column gap-3">
<h2 class="base-heading mb-0 u-fw-700 u-h4">
V košíku máte
</h2>
<div class="w-cart-overview d-flex flex-column gap-2 p-2 u-bg-tertiary-300 u-rounded-3">
<section class="w-cart-overview__products d-grid gap-1 --js-products">
<div class="i-product-overview d-flex align-items-center gap-2" data-product-id="ETHN01">
<div class="i-product-overview__image u-rounded-1 overflow-hidden flex-shrink-0">
<div class="img u-posr overflow-hidden --cover --placeholder --ratio-1-1 d-block">
<picture>
<img src="https://placehold.co/64x64" alt="Papírová taška hnědá ExtraTWIST 22x10x28" width="56" height="56" loading="lazy" draggable="false" srcset="https://placehold.co/64x64 1x, https://placehold.co/112x112 2x">
</picture>
</div>
</div>
<div class="i-product-overview__content d-flex flex-column gap-05 flex-grow-1">
<div class="i-product-overview__id u-fw-500 u-fz-xs u-color-text-400">ETHN01</div>
<div class="i-product-overview__title u-fz-sm u-clamp u-fw-600" title="Papírová taška hnědá ExtraTWIST 22x10x28">Papírová taška hnědá ExtraTWIST 22x10x28</div>
<div class="i-product-overview__variants d-flex gap-1 flex-wrap align-items-center">
<label class="f-color u-posr u-rounded-full --sm --checkbox --readonly" style="--background-color:conic-gradient(
#CFAF8A
0deg
355deg
)">
<span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>
</label>
</div>
</div>
<div class="d-flex flex-shrink-0 justify-content-end flex-column align-items-end gap-1">
<div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400">
<div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">
<span class="i-price__title u-fz-md u-fw-700">1 ks</span>
<span class="i-price__main u-fw-700">
<span class="">
20,75
</span>
Kč </span>
</div>
</div>
<span class="u-fw-500 u-fz-xs d-inline">
<span>999 999</span>
Kč
bez DPH
</span>
</div>
</div>
<div class="i-product-overview d-flex align-items-center gap-2" data-product-id="ETHN01">
<div class="i-product-overview__image u-rounded-1 overflow-hidden flex-shrink-0">
<div class="img u-posr overflow-hidden --cover --placeholder --ratio-1-1 d-block">
<picture>
<img src="https://placehold.co/64x64" alt="Papírová taška hnědá ExtraTWIST 22x10x28" width="56" height="56" loading="lazy" draggable="false" srcset="https://placehold.co/64x64 1x, https://placehold.co/112x112 2x">
</picture>
</div>
</div>
<div class="i-product-overview__content d-flex flex-column gap-05 flex-grow-1">
<div class="i-product-overview__id u-fw-500 u-fz-xs u-color-text-400">ETHN01</div>
<div class="i-product-overview__title u-fz-sm u-clamp u-fw-600" title="Papírová taška hnědá ExtraTWIST 22x10x28">Papírová taška hnědá ExtraTWIST 22x10x28</div>
<div class="i-product-overview__variants d-flex gap-1 flex-wrap align-items-center">
<label class="f-color u-posr u-rounded-full --sm --checkbox --readonly" style="--background-color:conic-gradient(
#CFAF8A
0deg
355deg
)">
<span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>
</label>
</div>
</div>
<div class="d-flex flex-shrink-0 justify-content-end flex-column align-items-end gap-1">
<div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400">
<div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">
<span class="i-price__title u-fz-md u-fw-700">1 ks</span>
<span class="i-price__main u-fw-700">
<span class="">
20,75
</span>
Kč </span>
</div>
</div>
<span class="u-fw-500 u-fz-xs d-inline">
<span>999 999</span>
Kč
bez DPH
</span>
</div>
</div>
<div class="i-product-overview d-flex align-items-center gap-2" data-product-id="ETHN01">
<div class="i-product-overview__image u-rounded-1 overflow-hidden flex-shrink-0">
<div class="img u-posr overflow-hidden --cover --placeholder --ratio-1-1 d-block">
<picture>
<img src="https://placehold.co/64x64" alt="Papírová taška hnědá ExtraTWIST 22x10x28" width="56" height="56" loading="lazy" draggable="false" srcset="https://placehold.co/64x64 1x, https://placehold.co/112x112 2x">
</picture>
</div>
</div>
<div class="i-product-overview__content d-flex flex-column gap-05 flex-grow-1">
<div class="i-product-overview__id u-fw-500 u-fz-xs u-color-text-400">ETHN01</div>
<div class="i-product-overview__title u-fz-sm u-clamp u-fw-600" title="Papírová taška hnědá ExtraTWIST 22x10x28">Papírová taška hnědá ExtraTWIST 22x10x28</div>
<div class="i-product-overview__variants d-flex gap-1 flex-wrap align-items-center">
<label class="f-color u-posr u-rounded-full --sm --checkbox --readonly" style="--background-color:conic-gradient(
#CFAF8A
0deg
355deg
)">
<span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>
</label>
</div>
</div>
<div class="d-flex flex-shrink-0 justify-content-end flex-column align-items-end gap-1">
<div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400">
<div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">
<span class="i-price__title u-fz-md u-fw-700">1 ks</span>
<span class="i-price__main u-fw-700">
<span class="">
20,75
</span>
Kč </span>
</div>
</div>
<span class="u-fw-500 u-fz-xs d-inline">
<span>999 999</span>
Kč
bez DPH
</span>
</div>
</div>
<div class="i-product-overview d-flex align-items-center gap-2" data-product-id="ETHN01">
<div class="i-product-overview__image u-rounded-1 overflow-hidden flex-shrink-0">
<div class="img u-posr overflow-hidden --cover --placeholder --ratio-1-1 d-block">
<picture>
<img src="https://placehold.co/64x64" alt="Papírová taška hnědá ExtraTWIST 22x10x28" width="56" height="56" loading="lazy" draggable="false" srcset="https://placehold.co/64x64 1x, https://placehold.co/112x112 2x">
</picture>
</div>
</div>
<div class="i-product-overview__content d-flex flex-column gap-05 flex-grow-1">
<div class="i-product-overview__id u-fw-500 u-fz-xs u-color-text-400">ETHN01</div>
<div class="i-product-overview__title u-fz-sm u-clamp u-fw-600" title="Papírová taška hnědá ExtraTWIST 22x10x28">Papírová taška hnědá ExtraTWIST 22x10x28</div>
<div class="i-product-overview__variants d-flex gap-1 flex-wrap align-items-center">
<label class="f-color u-posr u-rounded-full --sm --checkbox --readonly" style="--background-color:conic-gradient(
#CFAF8A
0deg
355deg
)">
<span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>
</label>
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --color-secondary-500 --icon-before i-product-overview__tag">
<span class="i-tag__title">Potisk</span>
<div class="i-tag__icon">
<span class="icon d-flex align-items-center justify-content-center --colored --text">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#15324F" fill-rule="evenodd" d="M13.56 5.44A1.5 1.5 0 0 1 14 6.5V12h-2v2H4v-2H2V6.5A1.5 1.5 0 0 1 3.5 5H4V2h8v3h.5a1.5 1.5 0 0 1 1.06.44ZM11 3H5v2h6V3ZM5 13h6v-3H5v3Zm7-2h1V6.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5V11h1V9h8v2Zm0-3V7h-2v1h2Z" clip-rule="evenodd"/></svg> </span>
</div>
</span>
</div>
</div>
<div class="d-flex flex-shrink-0 justify-content-end flex-column align-items-end gap-1">
<div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400">
<div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">
<span class="i-price__title u-fz-md u-fw-700">1 ks</span>
<span class="i-price__main u-fw-700">
<span class="">
20,75
</span>
Kč </span>
</div>
</div>
<span class="u-fw-500 u-fz-xs d-inline">
<span>999 999</span>
Kč
bez DPH
</span>
</div>
</div>
</section>
<div class="g-overview d-flex flex-column gap-2">
<div class="w-cart-overview__shipment">
<div class="i-overview d-flex --default gap-1">
<div class="i-overview__label d-flex align-items-center w-100 flex-grow-1 u-fz-sm u-fw-600">Způsob dopravy</div>
<div class="i-overview__image">
<div class="img u-posr overflow-hidden --contain">
<picture>
<img src="" data-src="images/svg/ceska-posta.svg" alt="Česká pošta - Balík do ruky" width="40" height="24" draggable="false">
</picture>
</div>
</div>
<div class="i-overview__description">
<div class="i-overview__title u-fz-sm u-fw-600">Česká pošta - Balík do ruky</div>
<div class="i-overview__subtitle u-fz-sm"></div>
</div>
<div class="i-overview__price ms-auto">
<div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 p-0">
<div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">
<span class="i-price__main u-fw-700">
<span class="">
200 199
</span>
Kč </span>
</div>
</div>
</div>
</div>
</div>
<div class="w-cart-overview__payment">
<div class="i-overview d-flex --default gap-1">
<div class="i-overview__label d-flex align-items-center w-100 flex-grow-1 u-fz-sm u-fw-600">Způsob platby</div>
<div class="i-overview__image">
<div class="img u-posr overflow-hidden --contain">
<picture>
<img src="" data-src="images/svg/cash-payment-method.svg" alt="Dobírka" width="40" height="24" draggable="false">
</picture>
</div>
</div>
<div class="i-overview__description">
<div class="i-overview__title u-fz-sm u-fw-600">Dobírka</div>
<div class="i-overview__subtitle u-fz-sm"></div>
</div>
<div class="i-overview__price ms-auto">
<div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 p-0">
<div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">
<span class="i-price__main u-fw-700">
<span class="">
200 199
</span>
Kč </span>
</div>
</div>
</div>
</div>
</div>
<div class="w-cart-overview__coupon">
<div class="i-overview d-flex --default gap-1">
<div class="i-overview__label d-flex align-items-center w-100 flex-grow-1 u-fz-sm u-fw-600">Promokód</div>
<div class="i-overview__image">
<div class="img u-posr overflow-hidden --contain">
<picture>
<img src="" data-src="images/svg/logo-horizontal.svg" alt="Jaro2024" width="40" height="24" draggable="false">
</picture>
</div>
</div>
<div class="i-code u-fz-sm u-fw-600 u-rounded-5 u-bg-primary-400 flex-shrink-0 py-1 px-2 ms-1">
Jaro2024
</div>
<div class="i-overview__price ms-auto">
<div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 p-0">
<div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">
<span class="i-price__main u-fw-700">
<span class="">
-129
</span>
Kč </span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="i-total-price --size-sm">
<div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400">
<div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">
<span class="i-price__title u-fz-md u-fw-700">Celkem s DPH 21 %</span>
<span class="i-price__main u-fw-700">
<span class="">
99 999 999
</span>
Kč </span>
</div>
<div class="i-price__row i-price__base d-flex justify-content-end align-items-center gap-1">
<span class="i-price__title u-fz-sm u-fw-500 u-color-tertiary-600">Celkem bez DPH</span>
<span class="i-price__base u-fw-500 u-color-tertiary-600">
10 056 990
Kč </span>
</div>
</div>
</div>
</div>
</div>
