Cart Item

Default

ETHN01

Papírová taška hnědá ExtraTWIST 22x10x28

Potisk

100

ks

Min. 100 ks

Skladem
( 99 999 Ks )

Dodání do 3 pracovních dnů.

1 ks 20,75 Kč

99 999 Kč bez DPH

        {% include "@Components/items/cart-item/cart-item.twig" with {props: {
  id: "ETHN01",
  url: "#",
  title: "Papírová taška hnědá ExtraTWIST 22x10x28",
  img: {
    "src": "https://placehold.co/70x70",
    "srcset": [
      "https://placehold.co/70x70 1x",
      "https://placehold.co/140x140 2x"
    ]
  },
  tags: [
    {
      title: "Potisk",
      icon: {
        src: "@Images/svg/print.svg",
      },
    },
  ],
  color: {
    title: "Hnědá",
    name: "color-checkbox",
    colors: [
      "#CFAF8A"
    ],
  },
  counter: {
    min_order_count: 100,
    max_order_count: 50000,
    label: "Min. 100 ks",
  },
  availability: {
    title: "Skladem",
    status: "available",
    quantity: "99 999"
  },
  expected_delivery: "Dodání do 3 pracovních dnů.",
  price: {
    main: "20,75",
  },
  total_price: "99 999",
  count: 9999,
},} %}

          



<article class="i-cart d-grid gap-1 align-items-center u-posr u-bg-white" data-product-id="ETHN01">
  <figure class="i-cart__image u-rounded-1 overflow-hidden">
    <a href="#" class="i-cart-image-link u-img-hover" title="Papírová taška hnědá ExtraTWIST 22x10x28">
              <div class="img u-posr overflow-hidden --cover --placeholder --ratio-1-1">
  <picture>
    
    <img src="" data-src="https://placehold.co/70x70" alt="Papírová taška hnědá ExtraTWIST 22x10x28" width="80" height="80" draggable="false" srcset="" data-srcset="https://placehold.co/70x70 1x, https://placehold.co/140x140 2x">
  </picture>
</div>
          </a>
  </figure>

  <div class="i-cart__content d-flex flex-grow-1 flex-column">
                  <div class="i-cart__id u-fw-500 u-fz-xs u-color-text-400">ETHN01</div>
      
      <div class="i-cart__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-cart__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    --icon-before   i-cart__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="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M6 19.572H3.92a2.419 2.419 0 0 1-2.42-2.418v-6.737A2.418 2.418 0 0 1 3.918 8H6V1.5h12V8h2.082a2.418 2.418 0 0 1 2.418 2.417v6.737a2.418 2.418 0 0 1-2.418 2.418H18V22.5H6v-2.928Zm12-1.538h2.082a.88.88 0 0 0 .88-.88v-6.737a.88.88 0 0 0-.881-.88H3.919a.88.88 0 0 0-.88.88v6.737c0 .486.394.88.88.88H6v-2.496H4.59V14h14.82v1.538H18v2.496ZM7.537 8h8.926V3.039l-8.926-.001V8ZM15 11h4v1.539h-4V11Zm-7.463 4.538v5.424h8.926v-5.424H7.537Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </span>
                              </div>
            </div>

      <div class="i-cart__counter">
              
<div class="c-counter u-fw-700 u-fz-14 u-bg-white u-posr d-flex align-items-center justify-content-between p-1 flex-shrink-0 u-border u-border--tertiary-500   --js-cart-counter" data-id="ETHN01" data-name="product-quantity" data-min_price_limit="100" data-max_price_limit="">

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --minus u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#B0B2D4" fill-rule="evenodd" d="M4 12a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <div class="c-counter__value-visual d-flex">
    <div class="c-counter__value" contenteditable="true">100</div>
          <div class="c-counter__units">ks</div>
              <div class="c-counter__label u-posa u-top-0 u-left-50-p u-fz-xs px-1 u-bg-white text-nowrap">Min. 100 ks</div>
      </div>

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --plus">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.975 6.975V3h2.05v3.975H13v2.05H9.025V13h-2.05V9.025H3v-2.05h3.975Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <input class="c-counter__input d-none" type="number" name="" value="100" min="100" max="50000">
</div>
          </div>
  
      <div class="i-cart__availability d-flex flex-column row-gap-1">
              <div class="i-availability u-fz-sm d-flex flex-column --available  flex-direction-row">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>      </span>

    Skladem
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( 99 999 Ks )
      </span>

  </div>
      
              <div class="d-flex align-items-center column-gap-1 u-fw-600">
            
  <span class="icon d-flex align-items-center justify-content-center  --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 16a7.995 7.995 0 0 1-7.391-4.94 8.005 8.005 0 0 1 1.734-8.717A8.005 8.005 0 0 1 11.06.609a7.995 7.995 0 0 1 2.593 13.045A8.005 8.005 0 0 1 8 16ZM8 1.824A6.177 6.177 0 1 0 14.176 8 6.183 6.183 0 0 0 8 1.824Z"/><path fill="currentColor" d="M7.732 12.779V8.268H6.444V6.444H8A1.558 1.558 0 0 1 9.556 8v4.779H7.732ZM8 5.69a1.235 1.235 0 1 1 0-2.469 1.235 1.235 0 0 1 0 2.47Z"/></svg>      </span>

          Dodání do 3 pracovních dnů.
        </div>
          </div>
  
  <div class="i-cart__price">
          <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-sm">
          <span>99 999</span>
          Kč
            bez DPH
        </span>
              </div>
      </div>

  <div class="i-cart__action">
    <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --transparent --xs  --animation-zoom  --icon-only     --js-remove-cart-item" href='#'>
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"/></svg>      </span>
    </span>
  
  </a>
  </div>

</article>

As a gift code

Dárkový poukaz
JARO2023

-129 Kč

        {% include "@Components/items/cart-item/cart-item.twig" with {props: {
  id: "JARO2023",
  coupon: {
    label: "Dárkový poukaz",
    title: "JARO2023"
  },
  img: {
    "src": "images/svg/logo-horizontal.svg",
  },
  price: {
      main: "-129",
  },
}} %}

          



<article class="i-cart d-grid gap-1 align-items-center u-posr u-bg-white --voucher" data-product-id="JARO2023">
  <figure class="i-cart__image u-rounded-1 overflow-hidden">
    <a href="" class="i-cart-image-link u-img-hover" title="">
              <div class="img u-posr overflow-hidden --cover --placeholder --ratio-1-1">
  <picture>
    
    <img src="" data-src="images/svg/logo-horizontal.svg" alt="" width="80" height="80" draggable="false">
  </picture>
</div>
          </a>
  </figure>

  <div class="i-cart__content d-flex flex-grow-1 align-items-center ms-2">
          Dárkový poukaz
        <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">
  JARO2023
</div>
      </div>

  
  
  <div class="i-cart__price">
          <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__main u-fw-700">
        <span class="">
          -129
        </span>
                  Kč              </span>
    </div>
  
  </div>
              </div>
      </div>

  <div class="i-cart__action">
    <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --transparent --xs  --animation-zoom  --icon-only     --js-remove-cart-item" href='#'>
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"/></svg>      </span>
    </span>
  
  </a>
  </div>

</article>