Cart Item

Default

  • Papírová taška hnědá ExtraTWIST 22x10x28
    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
    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
  •         {% 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>