Product item

Vertical product item

30%

Limitovaná edice Novinka Akce

Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)

Min. 100 ks. 2,75Kč

Od 1 000 ks. 2,65Kč

Od 3 000 ks. 2,50Kč

Od 5 000 ks. 2,40Kč

Od 10 000 ks. 2,00Kč

Vlastní potisk

100

ks

Min. 100 ks

Skladem
( 52265 Ks )

1 ks 20,75 Kč

Celkem: 20,75 Kč bez DPH

Přidáno do košíku

1

Goodrem Delta: I Honestly Love You (Limited Coloured Transparent Magenta)

1 425 Kč

1 ks 1 299 Kč

999 999 Kč bez DPH

Celková cena: 2 299 Kč

Nakupte ještě za 500 Kč a dopravu máte zdarma

Dopravu máte ZDARMA

Pokračovat v nákupu Přejít do košíku

        {% include "@Components/items/product-item/product-item.twig" with {props: {
  id: 1,
  url: "#",
  title: "Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)",
  in_wishlist: false,
  img: {
    src: "https://s3-alpha-sig.figma.com/img/b730/123f/c089b910b8b54b376646bfea9b480b35?Expires=1717372800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Cwa-EHXZ7rzlIYVRxBbaGW95emFCgjM8D13KclhbK2m-T~-i6783ImuALYEgbCVEgV1LHCGWEhEvdiJ7ozQ9H1LWpFB-k7p25doLLB2xiXfaFAEG7-XQd2HV7g4agZokNPmp6u93fS-AT1qm1XxTOT5Vpz6BLEDs~LPtNyM9nHOP-LS~Z28LdpGuV23iqW~2MZ3bXAsslkXVAILuanBYlh8bMiqAgiC7pQz0Tn4mnHO-HdsOI4cVr5aoYhg02baJ41SvJP5vq23QbY0wUH4qHVKqRz8qYCMBoqekgyyeqQH2~zTuhAOuD6BsbGHhkgz28hvD0K-~MnDPLRdVo~2hig__"
  },
  price: {
    main: "20,75",
    currency: "Kč"
  },
  discount: "30%",
  min_order_count: 100,
  max_order_count: 50000,
  availability: {
    title: "Skladem",
    status: "available",
    quantity: 52265
  },
  tags: [
     {
        "title": "Limitovaná edice",
        "color": "support-blue-400"
      },
      {
        "title": "Novinka",
        "color": "support-pink-400"
      },
      {
        "title": "Akce",
        "color": "support-violet-400"
      }
  ],
  pricelist: [
    {
      label: "Min. 100 ks.",
      min_count: 100,
      price: 2.75
    },
    {
      label: "Od 1 000 ks.",
      min_count: 1000,
      price: 2.65
    },
    {
      label: "Od 3 000 ks.",
      min_count: 3000,
      price: 2.50
    },
    {
      label: "Od 5 000 ks.",
      min_count: 5000,
      price: 2.40
    },
    {
      label: "Od 10 000 ks.",
      min_count: 10000,
      price: 2.00
    }
  ]
}} %}

{% include "@Components/modals/add-product-to-cart-modal/add-product-to-cart-modal.twig" with {props: {
  cart_url: "#cart-url",
  progress: {
    currency: "Kč",
    remaining: {
      percentage: "42",
      amount: "500"
    }
  },
  total_price: "2 299 Kč",
  savings: "299 Kč",
  product: {
    id: "1",
    title: "Goodrem Delta: I Honestly Love You (Limited Coloured Transparent Magenta)",
    img: {
      src: "https://s3-alpha-sig.figma.com/img/b730/123f/c089b910b8b54b376646bfea9b480b35?Expires=1717372800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Cwa-EHXZ7rzlIYVRxBbaGW95emFCgjM8D13KclhbK2m-T~-i6783ImuALYEgbCVEgV1LHCGWEhEvdiJ7ozQ9H1LWpFB-k7p25doLLB2xiXfaFAEG7-XQd2HV7g4agZokNPmp6u93fS-AT1qm1XxTOT5Vpz6BLEDs~LPtNyM9nHOP-LS~Z28LdpGuV23iqW~2MZ3bXAsslkXVAILuanBYlh8bMiqAgiC7pQz0Tn4mnHO-HdsOI4cVr5aoYhg02baJ41SvJP5vq23QbY0wUH4qHVKqRz8qYCMBoqekgyyeqQH2~zTuhAOuD6BsbGHhkgz28hvD0K-~MnDPLRdVo~2hig__"
    },
    price: {
      before: "1 425",
      main: "1 299",
    },
    total_price: "999 999",
  },
}} %}

          <article class="i-product u-container-inline u-posr u-border u-border--tertiary-500 u-rounded-3 h-100  --vertical" data-product-id="1">
  <div class="i-product__body d-flex flex-column gap-2 p-2 h-100">
    <figure class="i-product__image d-block u-posr overflow-hidden u-img-hover">
      <a href="#" class="i-product__image-link d-flex align-items-center" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
                  <div class="img u-posr overflow-hidden --cover  --ratio-1-1 i-product__image-full">
  <picture>
    
    <img src="" data-src="https://s3-alpha-sig.figma.com/img/b730/123f/c089b910b8b54b376646bfea9b480b35?Expires=1717372800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Cwa-EHXZ7rzlIYVRxBbaGW95emFCgjM8D13KclhbK2m-T~-i6783ImuALYEgbCVEgV1LHCGWEhEvdiJ7ozQ9H1LWpFB-k7p25doLLB2xiXfaFAEG7-XQd2HV7g4agZokNPmp6u93fS-AT1qm1XxTOT5Vpz6BLEDs~LPtNyM9nHOP-LS~Z28LdpGuV23iqW~2MZ3bXAsslkXVAILuanBYlh8bMiqAgiC7pQz0Tn4mnHO-HdsOI4cVr5aoYhg02baJ41SvJP5vq23QbY0wUH4qHVKqRz8qYCMBoqekgyyeqQH2~zTuhAOuD6BsbGHhkgz28hvD0K-~MnDPLRdVo~2hig__" alt="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)" width="308" height="308" draggable="false">
  </picture>
</div>
              </a>

              <div class="i-discount d-flex flex-column justify-content-center align-items-center  i-product__discount u-posa u-top-0 u-right-0 my-1 me-1">
  <div class="i-discount__value u-fw-700 u-fz-sm">30%</div>
</div>
      
                <div class="g-tags d-flex flex-wrap gap-1 i-product__tags u-posa u-top-0 u-left-0 mt-1 ms-1 align-items-start flex-column">
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-blue-400 --sm    i-product__tag">
      <span class="i-tag__title">Limitovaná edice</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-pink-400 --sm    i-product__tag">
      <span class="i-tag__title">Novinka</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-violet-400 --sm    i-product__tag">
      <span class="i-tag__title">Akce</span>
    </span>
      </div>
          </figure>

    <div class="i-product__header d-flex flex-column">
      <h2 class="i-product__title u-fz-md u-fw-700">
        <a class="link d-inline-flex u-fw-600 align-items-center      i-product__link u-fz-md u-clamp" href="#" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
      <span class="link__title">Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)</span>
  
  
  </a>
      </h2>
    </div>

    <div class="i-product__content mt-auto --js-pricelist-controler">
      <div class="row gx-0 mb-2">

                  <div class="i-pricelist u-fz-xs i-product__pricelist col-12 mb-2">
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                --active --first
                
              "
         data-price="2.75"
         data-min-count="100"
         data-index="0"
    >
              <span>Min. 100 ks.</span>
      
              <span>2,75Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.65"
         data-min-count="1000"
         data-index="1"
    >
              <span>Od 1 000 ks.</span>
      
              <span>2,65Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.5"
         data-min-count="3000"
         data-index="2"
    >
              <span>Od 3 000 ks.</span>
      
              <span>2,50Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.4"
         data-min-count="5000"
         data-index="3"
    >
              <span>Od 5 000 ks.</span>
      
              <span>2,40Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                --last
              "
         data-price="2"
         data-min-count="10000"
         data-index="4"
    >
              <span>Od 10 000 ks.</span>
      
              <span>2,00Kč</span>
          </div>
  </div>
        
        <div class="col-6 d-flex i-product__print-checkbox-wrapper">
          <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   i-product__print-checkbox --js-product-item-checkbox u-fw-600">
  <input class="f-checkbox__input u-posa" type="checkbox">
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <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>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Vlastní potisk
              
          </span>

    
      </div>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</label>
        </div>
        <div class="col-6 i-product__print-counter-wrapper">
          
<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  product-quantity --js-product-counter">

  <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="product-quantity" value="100" min="100" max="50000">
</div>
        </div>
      </div>

      <div class="d-flex flex-row gap-2 justify-content-between flex-grow-1 align-items-center flex-wrap">
                  <div class="i-availability u-fz-sm d-flex flex-column --available  i-product__availability">  
  <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">
          ( 52265 Ks )
      </span>

  </div>
        
                  <div class="d-flex justify-content-end flex-column align-items-end">
            <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 i-product__price">
        <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="--js-product-item-price">
          20,75
        </span>
                  Kč              </span>
    </div>
  
  </div>
            <span class="u-fw-500 u-fz-sm d-inline">Celkem:
              <span class="--js-product-total-price">20,75</span>
              Kč
              bez DPH
            </span>
          </div>
              </div>
    </div>
    <div class="i-product__buttons d-flex gap-2 justify-content-between">
      <div class="i-add-wishlist-button    i-product__wishlist flex-shrink-0">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__add js-wishlist-add" type="button" aria-label="Přidat do wishlistu" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg>      </span>
    </span>
  
  </button>

  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__remove js-wishlist-remove" type="button" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg>      </span>
    </span>
  
  </button>
</div>

        <div class="i-add-cart-buttons u-posr text-center flex-grow-1  flex-grow-1 i-product__cart-add">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__cart-add js-cart-add --shown u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Přidat do košíku" data-product-id="1" data-modal-target="add-product-to-cart-modal">
      <span class="btn__title u-z-index-1">
      Přidat do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --sm">
          <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="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>

      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__print js-print-add --hidden u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Chci vlastní potisk" data-product-id="1" data-modal-target="product-print-modal">
      <span class="btn__title u-z-index-1">
      Chci vlastní potisk
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white">
          <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>
    </span>
  
  </button>
  
  
  <div class="i-add-cart-button__animation u-posa u-top-50-p u-left-50-p u-translate-middle btn --primary u-posa --icon-only --js-product-button-animation --sm">
    <svg width="26" height="12" viewbox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6C4.65685 6 6 7.34315 6 9C6 10.6569 4.65685 12 3 12C1.34315 12 0 10.6569 0 9C0 7.34315 1.34315 6 3 6Z" fill="currentColor"/>
      <path d="M13 6C14.6569 6 16 7.34315 16 9C16 10.6569 14.6569 12 13 12C11.3431 12 10 10.6569 10 9C10 7.34315 11.3431 6 13 6Z" fill="currentColor"/>
      <path d="M23 6C24.6569 6 26 7.34315 26 9C26 10.6569 24.6569 12 23 12C21.3431 12 20 10.6569 20 9C20 7.34315 21.3431 6 23 6Z" fill="currentColor"/>
    </svg>
  </div>
</div>
    </div>
  </div>
</article>


  <div class="c-modal --size-sm m-add-product-to-cart --hidden" id="add-product-to-cart-modal">
  <div class="c-modal__dialog">

    <div class="c-modal__content u-rounded-4">
      <div class="c-modal__inner d-flex flex-column">

        
        <div class="c-modal__body ">
              <div class="d-flex flex-column gap-2 mb-2">
      <div class="m-add-product-to-cart__message d-flex gap-1 align-items-center u-fz-md u-fw-700 p-1 u-rounded-1">
          
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M14.522 3 16 4.5 7.901 12.51a2.107 2.107 0 0 1-2.972-.005L0 7.664l1.467-1.513 4.94 4.85L14.522 3Z"/></svg>      </span>

        Přidáno do košíku
      </div>

      <div class="m-add-product-to-cart__cart-list-wrapper">
        <div class="i-cart-list d-flex flex-column gap-2">
      <div class="u-scrollbar pe-2" data-scrollbar-y>
        <div class="g-product-overviews d-flex flex-column gap-2 i-cart-list__products">
          <div class="i-product-overview d-flex align-items-center --cart gap-2" data-product-id="1">
      <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://s3-alpha-sig.figma.com/img/b730/123f/c089b910b8b54b376646bfea9b480b35?Expires=1717372800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Cwa-EHXZ7rzlIYVRxBbaGW95emFCgjM8D13KclhbK2m-T~-i6783ImuALYEgbCVEgV1LHCGWEhEvdiJ7ozQ9H1LWpFB-k7p25doLLB2xiXfaFAEG7-XQd2HV7g4agZokNPmp6u93fS-AT1qm1XxTOT5Vpz6BLEDs~LPtNyM9nHOP-LS~Z28LdpGuV23iqW~2MZ3bXAsslkXVAILuanBYlh8bMiqAgiC7pQz0Tn4mnHO-HdsOI4cVr5aoYhg02baJ41SvJP5vq23QbY0wUH4qHVKqRz8qYCMBoqekgyyeqQH2~zTuhAOuD6BsbGHhkgz28hvD0K-~MnDPLRdVo~2hig__" alt="Goodrem Delta: I Honestly Love You (Limited Coloured Transparent Magenta)" width="56" height="56" loading="lazy" draggable="false">
  </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">1</div>
    
    <div class="i-product-overview__title u-fz-sm u-clamp u-fw-600" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transparent Magenta)">Goodrem Delta: I Honestly Love You (Limited Coloured Transparent Magenta)</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__before d-flex justify-content-end align-items-center gap-1">
      
      <span class="i-price__before u-fw-500 text-decoration-line-through u-color-secondary">
        1 425 Kč
      </span>
    </div>
        <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="">
          1 299
        </span>
                  Kč              </span>
    </div>
  
  </div>
              <span class="u-fw-500 u-fz-xs d-inline">
          <span>999 999</span>
          Kč
          bez DPH
        </span>
          </div>

  
      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --xs    --icon-only     i-product-overview__action js-cart-remove" type="button" aria-label="Odstranit" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <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.037 0A1.456 1.456 0 0 0 4.58 1.456v1.162H1.309V4.22h1.308v9.669A2.11 2.11 0 0 0 4.727 16h6.545a2.11 2.11 0 0 0 2.11-2.11V4.22h1.309V2.619h-3.272V1.456A1.456 1.456 0 0 0 9.963 0H6.037Zm.147 2.618V1.603h3.632v1.015H6.184ZM4.22 13.89V4.22h7.558v9.67a.507.507 0 0 1-.507.507H4.728a.507.507 0 0 1-.507-.507Zm1.816-7.2h1.308v5.236H6.037V6.691Zm3.926 0H8.654v5.236h1.31V6.691Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
  </div>
      </div>
    </div>

    <div class="i-cart-list__price d-flex flex-column mt-2 pe-6">
      <div class="i-cart-list__total-price d-flex justify-content-between u-fz-lg u-fw-700">
        Celková cena:
        <span>2 299 Kč</span>
      </div>
    </div>
  
      <div class="i-progress d-flex flex-column flex-grow-1 justify-content-center gap-2 p-2 u-rounded-2 --incomplete">
  <header class="i-progress__header d-flex gap-1 align-items-center justify-content-center u-fz-sm">
      
  <span class="icon d-flex align-items-center justify-content-center  --xl i-progress__icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><mask id="mask0_3554_68154" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M24 0H0v24h24V0Z"/></mask><g fill-rule="evenodd" clip-rule="evenodd" mask="url(#mask0_3554_68154)"><path fill="#15324F" d="m7.504 25.766-1.048-3.91 3.155-.846-.216-.804a2.84 2.84 0 0 1-.096-.827l.004-.124-8.87-4.993-.086-.319-.003-.012C-1.212 8.122 2.668 2.215 9.162.475c6.494-1.74 12.808 1.436 14.364 7.245l.089.331-5.185 8.76.065.104c.143.231.256.487.33.764l.216.804 2.853-.764 1.96 7.314-1.547.414-1.545-5.769-12.347 3.308.634 2.366-1.545.414Zm9.965-6.862-.216-.804a1.221 1.221 0 0 0-1.494-.863l-3.93 1.053a1.22 1.22 0 0 0-.862 1.495l.215.804 6.287-1.685ZM8.239 8.701l.026.45.32-.317c.633-.622 1.449-1.223 2.419-1.483s1.978-.148 2.837.075l.435.113-.202-.402c-1.24-2.45-3.141-3.952-4.217-4.654l-.191-.125-.102.203c-.582 1.146-1.477 3.397-1.325 6.14Zm.509 2.48 3.833 5.223 1.583-.424.708-6.44-.131-.063c-.821-.386-2.214-.849-3.317-.554-1.103.296-2.075 1.392-2.594 2.14l-.082.118Zm7.803-2.02-.704 6.408h.227c.317 0 .628.052.92.153l.158.053 4.716-7.968-.108-.112c-.398-.408-1.344-1.18-2.476-.878-1.19.32-2.226 1.568-2.706 2.303l-.027.041ZM7.495 3.205l.186-.492-.47.24C4.332 4.415 2.364 6.915 1.799 9.7l-.095.472.405-.26a3.63 3.63 0 0 1 1.038-.456c1.132-.303 2.315-.102 3.254.195l.298.094-.034-.31c-.275-2.516.246-4.69.83-6.23Zm-5.671 9.973 8.069 4.542.109-.125c.203-.233.446-.435.72-.593l.198-.113-3.815-5.197-.043-.022c-.782-.395-2.306-.96-3.495-.64-1.134.302-1.566 1.445-1.706 1.998l-.037.15Zm18.165-8.057.48.023-.317-.36c-1.882-2.13-4.836-3.31-8.064-3.139l-.525.028.408.333c1.276 1.04 2.815 2.664 3.834 4.98l.126.286.21-.23c.666-.727 1.589-1.493 2.722-1.796a3.652 3.652 0 0 1 1.126-.125Z"/><path fill="#FFF27D" d="m8.239 8.702.026.45.32-.317c.633-.622 1.449-1.223 2.419-1.483s1.978-.148 2.837.075l.435.113-.202-.402c-1.24-2.45-3.141-3.952-4.217-4.654l-.191-.125-.102.203c-.582 1.146-1.477 3.397-1.325 6.14Z"/></g></svg>      </span>

    <div class="i-progress__text --incomplete d-block">
      Nakupte ještě za
      <strong class="i-progress__remaining u-fw-700">500</strong>
      <strong class="i-progress__currency u-fw-700">Kč</strong>
      a dopravu máte <strong>zdarma</strong>
    </div>

    <div class="i-progress__text u-fw-700 --complete d-none">
      Dopravu máte ZDARMA
    </div>
  </header>

  <div class="i-progress__bar">
    <progress class="i-progress__input d-block w-100 overflow-hidden u-bg-white" max="100" value="42"></progress>
  </div>
</div>
  </div>
      </div>
    </div>
          </div>

                  <footer class="c-modal__footer d-flex flex-shrink-0 flex-wrap gap-2 align-items-center --between">
                <a class="link d-inline-flex u-fw-600 align-items-center --primary --icon-before  --underline-initial  c-modal__close u-fw-600 u-fz-md u-font-secondary" href="#" title="Pokračovat v nákupu">
      <span class="link__title">Pokračovat v nákupu</span>
  
      <span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --primary --md">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>      </span>
    </span>
  
  </a>

    <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm" href='#cart-url'>
      <span class="btn__title u-z-index-1">
      Přejít do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <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="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </a>
            </footer>
        
        <div class="c-modal__button-container">
          <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --transparent --sm    --icon-only     c-modal__close c-modal__close-cross" aria-label="close modal">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#15324F" fill-rule="evenodd" d="M10.869 12 5.435 6.565l1.13-1.13L12 10.867l5.435-5.434 1.13 1.131L13.133 12l5.434 5.434-1.131 1.131L12 13.131l-5.434 5.434-1.131-1.13L10.869 12Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
        </div>

      </div>
    </div>

  </div>

</div>

Vertical product item wishlisted

Preview

Twig

Html

30%

Limitovaná edice Novinka Akce

Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)

Min. 100 ks. 2,75Kč

Od 1 000 ks. 2,65Kč

Od 3 000 ks. 2,50Kč

Od 5 000 ks. 2,40Kč

Od 10 000 ks. 2,00Kč

Vlastní potisk

100

ks

Min. 100 ks

Na dotaz
( 0 )

13 000 Kč

1 ks 20,75 Kč

Celkem: 20,75 Kč bez DPH

        {% include "@Components/items/product-item/product-item.twig" with {props: {
  id: 1,
  url: "#",
  title: "Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)",
  in_wishlist: true,
  img: {
    src: "https://s3-alpha-sig.figma.com/img/b730/123f/c089b910b8b54b376646bfea9b480b35?Expires=1717372800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Cwa-EHXZ7rzlIYVRxBbaGW95emFCgjM8D13KclhbK2m-T~-i6783ImuALYEgbCVEgV1LHCGWEhEvdiJ7ozQ9H1LWpFB-k7p25doLLB2xiXfaFAEG7-XQd2HV7g4agZokNPmp6u93fS-AT1qm1XxTOT5Vpz6BLEDs~LPtNyM9nHOP-LS~Z28LdpGuV23iqW~2MZ3bXAsslkXVAILuanBYlh8bMiqAgiC7pQz0Tn4mnHO-HdsOI4cVr5aoYhg02baJ41SvJP5vq23QbY0wUH4qHVKqRz8qYCMBoqekgyyeqQH2~zTuhAOuD6BsbGHhkgz28hvD0K-~MnDPLRdVo~2hig__"
  },
  price: {
    main: "20,75",
    before: "13 000",
    currency: "Kč"
  },
  min_order_count: 100,
  max_order_count: 50000,
  discount: "30%",
  availability: {
    title: "Na dotaz",
    status: "default",
    description: "0"
  },
  tags: [
     {
        "title": "Limitovaná edice",
        "color": "support-blue-400"
      },
      {
        "title": "Novinka",
        "color": "support-pink-400"
      },
      {
        "title": "Akce",
        "color": "support-violet-400"
      }
  ],
  pricelist: [
    {
      label: "Min. 100 ks.",
      min_count: 100,
      price: 2.75
    },
    {
      label: "Od 1 000 ks.",
      min_count: 1000,
      price: 2.65
    },
    {
      label: "Od 3 000 ks.",
      min_count: 3000,
      price: 2.50
    },
    {
      label: "Od 5 000 ks.",
      min_count: 5000,
      price: 2.40
    },
    {
      label: "Od 10 000 ks.",
      min_count: 10000,
      price: 2.00
    }
  ]
}} %}

          <article class="i-product u-container-inline u-posr u-border u-border--tertiary-500 u-rounded-3 h-100  --vertical" data-product-id="1">
  <div class="i-product__body d-flex flex-column gap-2 p-2 h-100">
    <figure class="i-product__image d-block u-posr overflow-hidden u-img-hover">
      <a href="#" class="i-product__image-link d-flex align-items-center" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
                  <div class="img u-posr overflow-hidden --cover  --ratio-1-1 i-product__image-full">
  <picture>
    
    <img src="" data-src="https://s3-alpha-sig.figma.com/img/b730/123f/c089b910b8b54b376646bfea9b480b35?Expires=1717372800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Cwa-EHXZ7rzlIYVRxBbaGW95emFCgjM8D13KclhbK2m-T~-i6783ImuALYEgbCVEgV1LHCGWEhEvdiJ7ozQ9H1LWpFB-k7p25doLLB2xiXfaFAEG7-XQd2HV7g4agZokNPmp6u93fS-AT1qm1XxTOT5Vpz6BLEDs~LPtNyM9nHOP-LS~Z28LdpGuV23iqW~2MZ3bXAsslkXVAILuanBYlh8bMiqAgiC7pQz0Tn4mnHO-HdsOI4cVr5aoYhg02baJ41SvJP5vq23QbY0wUH4qHVKqRz8qYCMBoqekgyyeqQH2~zTuhAOuD6BsbGHhkgz28hvD0K-~MnDPLRdVo~2hig__" alt="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)" width="308" height="308" draggable="false">
  </picture>
</div>
              </a>

              <div class="i-discount d-flex flex-column justify-content-center align-items-center  i-product__discount u-posa u-top-0 u-right-0 my-1 me-1">
  <div class="i-discount__value u-fw-700 u-fz-sm">30%</div>
</div>
      
                <div class="g-tags d-flex flex-wrap gap-1 i-product__tags u-posa u-top-0 u-left-0 mt-1 ms-1 align-items-start flex-column">
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-blue-400 --sm    i-product__tag">
      <span class="i-tag__title">Limitovaná edice</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-pink-400 --sm    i-product__tag">
      <span class="i-tag__title">Novinka</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-violet-400 --sm    i-product__tag">
      <span class="i-tag__title">Akce</span>
    </span>
      </div>
          </figure>

    <div class="i-product__header d-flex flex-column">
      <h2 class="i-product__title u-fz-md u-fw-700">
        <a class="link d-inline-flex u-fw-600 align-items-center      i-product__link u-fz-md u-clamp" href="#" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
      <span class="link__title">Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)</span>
  
  
  </a>
      </h2>
    </div>

    <div class="i-product__content mt-auto --js-pricelist-controler">
      <div class="row gx-0 mb-2">

                  <div class="i-pricelist u-fz-xs i-product__pricelist col-12 mb-2">
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                --active --first
                
              "
         data-price="2.75"
         data-min-count="100"
         data-index="0"
    >
              <span>Min. 100 ks.</span>
      
              <span>2,75Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.65"
         data-min-count="1000"
         data-index="1"
    >
              <span>Od 1 000 ks.</span>
      
              <span>2,65Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.5"
         data-min-count="3000"
         data-index="2"
    >
              <span>Od 3 000 ks.</span>
      
              <span>2,50Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.4"
         data-min-count="5000"
         data-index="3"
    >
              <span>Od 5 000 ks.</span>
      
              <span>2,40Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                --last
              "
         data-price="2"
         data-min-count="10000"
         data-index="4"
    >
              <span>Od 10 000 ks.</span>
      
              <span>2,00Kč</span>
          </div>
  </div>
        
        <div class="col-6 d-flex i-product__print-checkbox-wrapper">
          <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   i-product__print-checkbox --js-product-item-checkbox u-fw-600">
  <input class="f-checkbox__input u-posa" type="checkbox">
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <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>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Vlastní potisk
              
          </span>

    
      </div>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</label>
        </div>
        <div class="col-6 i-product__print-counter-wrapper">
          
<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  product-quantity --js-product-counter">

  <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="product-quantity" value="100" min="100" max="50000">
</div>
        </div>
      </div>

      <div class="d-flex flex-row gap-2 justify-content-between flex-grow-1 align-items-center flex-wrap">
                  <div class="i-availability u-fz-sm d-flex flex-column --default  i-product__availability">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-text-500">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --text --sm">
          <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="M9.05 5h-2.1V3h2.1v2ZM6 6v2.099h.95v2.8H6V13h.95v.002h2.1v-.002H10v-2.1h-.95V6H6Z" clip-rule="evenodd"/></svg>      </span>

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

  </div>
        
                  <div class="d-flex justify-content-end flex-column align-items-end">
            <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 i-product__price">
      <div class="i-price__row i-price__before d-flex justify-content-end align-items-center gap-1">
      
      <span class="i-price__before u-fw-500 text-decoration-line-through u-color-secondary">
        13 000 Kč
      </span>
    </div>
        <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="--js-product-item-price">
          20,75
        </span>
                  Kč              </span>
    </div>
  
  </div>
            <span class="u-fw-500 u-fz-sm d-inline">Celkem:
              <span class="--js-product-total-price">20,75</span>
              Kč
              bez DPH
            </span>
          </div>
              </div>
    </div>
    <div class="i-product__buttons d-flex gap-2 justify-content-between">
      <div class="i-add-wishlist-button --wishlisted   i-product__wishlist flex-shrink-0">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__add js-wishlist-add" type="button" aria-label="Přidat do wishlistu" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg>      </span>
    </span>
  
  </button>

  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__remove js-wishlist-remove" type="button" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg>      </span>
    </span>
  
  </button>
</div>

        <div class="i-add-cart-buttons u-posr text-center flex-grow-1  flex-grow-1 i-product__cart-add">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__cart-add js-cart-add --shown u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Přidat do košíku" data-product-id="1" data-modal-target="add-product-to-cart-modal">
      <span class="btn__title u-z-index-1">
      Přidat do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --sm">
          <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="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>

      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__print js-print-add --hidden u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Chci vlastní potisk" data-product-id="1" data-modal-target="product-print-modal">
      <span class="btn__title u-z-index-1">
      Chci vlastní potisk
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white">
          <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>
    </span>
  
  </button>
  
  
  <div class="i-add-cart-button__animation u-posa u-top-50-p u-left-50-p u-translate-middle btn --primary u-posa --icon-only --js-product-button-animation --sm">
    <svg width="26" height="12" viewbox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6C4.65685 6 6 7.34315 6 9C6 10.6569 4.65685 12 3 12C1.34315 12 0 10.6569 0 9C0 7.34315 1.34315 6 3 6Z" fill="currentColor"/>
      <path d="M13 6C14.6569 6 16 7.34315 16 9C16 10.6569 14.6569 12 13 12C11.3431 12 10 10.6569 10 9C10 7.34315 11.3431 6 13 6Z" fill="currentColor"/>
      <path d="M23 6C24.6569 6 26 7.34315 26 9C26 10.6569 24.6569 12 23 12C21.3431 12 20 10.6569 20 9C20 7.34315 21.3431 6 23 6Z" fill="currentColor"/>
    </svg>
  </div>
</div>
    </div>
  </div>
</article>

Vertical product item out of stock

Preview

Twig

Html

30%

Limitovaná edice Novinka Akce

Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)

Min. 100 ks. 2,75Kč

Od 1 000 ks. 2,65Kč

Od 3 000 ks. 2,50Kč

Od 5 000 ks. 2,40Kč

Od 10 000 ks. 2,00Kč

Vlastní potisk

100

ks

Min. 100 ks

Nedostupné
( Zpět 24.5. )

13 000 Kč

1 ks 20,75 Kč

Celkem: 20,75 Kč bez DPH

        {% include "@Components/items/product-item/product-item.twig" with {props: {
  id: 1,
  url: "#",
  title: "Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)",
  perex: "Krátký popis produktu",
  in_wishlist: false,
  img: {
    src: "https://s3-alpha-sig.figma.com/img/b730/123f/c089b910b8b54b376646bfea9b480b35?Expires=1717372800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Cwa-EHXZ7rzlIYVRxBbaGW95emFCgjM8D13KclhbK2m-T~-i6783ImuALYEgbCVEgV1LHCGWEhEvdiJ7ozQ9H1LWpFB-k7p25doLLB2xiXfaFAEG7-XQd2HV7g4agZokNPmp6u93fS-AT1qm1XxTOT5Vpz6BLEDs~LPtNyM9nHOP-LS~Z28LdpGuV23iqW~2MZ3bXAsslkXVAILuanBYlh8bMiqAgiC7pQz0Tn4mnHO-HdsOI4cVr5aoYhg02baJ41SvJP5vq23QbY0wUH4qHVKqRz8qYCMBoqekgyyeqQH2~zTuhAOuD6BsbGHhkgz28hvD0K-~MnDPLRdVo~2hig__"
  },
  price: {
    main: "20,75",
    before: "13 000",
    currency: "Kč"
  },
  min_order_count: 100,
  max_order_count: 50000,
  discount: "30%",
  availability: {
    title: "Nedostupné",
    status: "unavailable",
    description: "Zpět 24.5."
  },
  tags: [
     {
        "title": "Limitovaná edice",
        "color": "support-blue-400"
      },
      {
        "title": "Novinka",
        "color": "support-pink-400"
      },
      {
        "title": "Akce",
        "color": "support-violet-400"
      }
  ],
  pricelist: [
    {
      label: "Min. 100 ks.",
      min_count: 100,
      price: 2.75
    },
    {
      label: "Od 1 000 ks.",
      min_count: 1000,
      price: 2.65
    },
    {
      label: "Od 3 000 ks.",
      min_count: 3000,
      price: 2.50
    },
    {
      label: "Od 5 000 ks.",
      min_count: 5000,
      price: 2.40
    },
    {
      label: "Od 10 000 ks.",
      min_count: 10000,
      price: 2.00
    }
  ]
}} %}

          <article class="i-product u-container-inline u-posr u-border u-border--tertiary-500 u-rounded-3 h-100  --vertical" data-product-id="1">
  <div class="i-product__body d-flex flex-column gap-2 p-2 h-100">
    <figure class="i-product__image d-block u-posr overflow-hidden u-img-hover">
      <a href="#" class="i-product__image-link d-flex align-items-center" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
                  <div class="img u-posr overflow-hidden --cover  --ratio-1-1 i-product__image-full">
  <picture>
    
    <img src="" data-src="https://s3-alpha-sig.figma.com/img/b730/123f/c089b910b8b54b376646bfea9b480b35?Expires=1717372800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Cwa-EHXZ7rzlIYVRxBbaGW95emFCgjM8D13KclhbK2m-T~-i6783ImuALYEgbCVEgV1LHCGWEhEvdiJ7ozQ9H1LWpFB-k7p25doLLB2xiXfaFAEG7-XQd2HV7g4agZokNPmp6u93fS-AT1qm1XxTOT5Vpz6BLEDs~LPtNyM9nHOP-LS~Z28LdpGuV23iqW~2MZ3bXAsslkXVAILuanBYlh8bMiqAgiC7pQz0Tn4mnHO-HdsOI4cVr5aoYhg02baJ41SvJP5vq23QbY0wUH4qHVKqRz8qYCMBoqekgyyeqQH2~zTuhAOuD6BsbGHhkgz28hvD0K-~MnDPLRdVo~2hig__" alt="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)" width="308" height="308" draggable="false">
  </picture>
</div>
              </a>

              <div class="i-discount d-flex flex-column justify-content-center align-items-center  i-product__discount u-posa u-top-0 u-right-0 my-1 me-1">
  <div class="i-discount__value u-fw-700 u-fz-sm">30%</div>
</div>
      
                <div class="g-tags d-flex flex-wrap gap-1 i-product__tags u-posa u-top-0 u-left-0 mt-1 ms-1 align-items-start flex-column">
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-blue-400 --sm    i-product__tag">
      <span class="i-tag__title">Limitovaná edice</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-pink-400 --sm    i-product__tag">
      <span class="i-tag__title">Novinka</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-violet-400 --sm    i-product__tag">
      <span class="i-tag__title">Akce</span>
    </span>
      </div>
          </figure>

    <div class="i-product__header d-flex flex-column">
      <h2 class="i-product__title u-fz-md u-fw-700">
        <a class="link d-inline-flex u-fw-600 align-items-center      i-product__link u-fz-md u-clamp" href="#" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
      <span class="link__title">Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)</span>
  
  
  </a>
      </h2>
    </div>

    <div class="i-product__content mt-auto --js-pricelist-controler">
      <div class="row gx-0 mb-2">

                  <div class="i-pricelist u-fz-xs i-product__pricelist col-12 mb-2">
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                --active --first
                
              "
         data-price="2.75"
         data-min-count="100"
         data-index="0"
    >
              <span>Min. 100 ks.</span>
      
              <span>2,75Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.65"
         data-min-count="1000"
         data-index="1"
    >
              <span>Od 1 000 ks.</span>
      
              <span>2,65Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.5"
         data-min-count="3000"
         data-index="2"
    >
              <span>Od 3 000 ks.</span>
      
              <span>2,50Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.4"
         data-min-count="5000"
         data-index="3"
    >
              <span>Od 5 000 ks.</span>
      
              <span>2,40Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                --last
              "
         data-price="2"
         data-min-count="10000"
         data-index="4"
    >
              <span>Od 10 000 ks.</span>
      
              <span>2,00Kč</span>
          </div>
  </div>
        
        <div class="col-6 d-flex i-product__print-checkbox-wrapper">
          <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   i-product__print-checkbox --js-product-item-checkbox u-fw-600">
  <input class="f-checkbox__input u-posa" type="checkbox">
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <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>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Vlastní potisk
              
          </span>

    
      </div>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</label>
        </div>
        <div class="col-6 i-product__print-counter-wrapper">
          
<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  product-quantity --js-product-counter">

  <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="product-quantity" value="100" min="100" max="50000">
</div>
        </div>
      </div>

      <div class="d-flex flex-row gap-2 justify-content-between flex-grow-1 align-items-center flex-wrap">
                  <div class="i-availability u-fz-sm d-flex flex-column --unavailable  i-product__availability">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-danger">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <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.495 8.002 3.203 4.746l1.478-1.5 3.32 3.272 3.317-3.272 1.478 1.5-3.292 3.256 3.292 3.246-1.494 1.507L8 9.489l-3.303 3.266-1.494-1.507 3.292-3.246Z" clip-rule="evenodd"/></svg>      </span>

    Nedostupné
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( Zpět 24.5. )
      </span>

  </div>
        
                  <div class="d-flex justify-content-end flex-column align-items-end">
            <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 i-product__price">
      <div class="i-price__row i-price__before d-flex justify-content-end align-items-center gap-1">
      
      <span class="i-price__before u-fw-500 text-decoration-line-through u-color-secondary">
        13 000 Kč
      </span>
    </div>
        <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="--js-product-item-price">
          20,75
        </span>
                  Kč              </span>
    </div>
  
  </div>
            <span class="u-fw-500 u-fz-sm d-inline">Celkem:
              <span class="--js-product-total-price">20,75</span>
              Kč
              bez DPH
            </span>
          </div>
              </div>
    </div>
    <div class="i-product__buttons d-flex gap-2 justify-content-between">
      <div class="i-add-wishlist-button    i-product__wishlist flex-shrink-0">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__add js-wishlist-add" type="button" aria-label="Přidat do wishlistu" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg>      </span>
    </span>
  
  </button>

  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__remove js-wishlist-remove" type="button" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg>      </span>
    </span>
  
  </button>
</div>

        <div class="i-add-cart-buttons u-posr text-center flex-grow-1  flex-grow-1 i-product__cart-add">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__cart-add js-cart-add --shown u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Přidat do košíku" data-product-id="1" data-modal-target="add-product-to-cart-modal">
      <span class="btn__title u-z-index-1">
      Přidat do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --sm">
          <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="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>

      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__print js-print-add --hidden u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Chci vlastní potisk" data-product-id="1" data-modal-target="product-print-modal">
      <span class="btn__title u-z-index-1">
      Chci vlastní potisk
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white">
          <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>
    </span>
  
  </button>
  
  
  <div class="i-add-cart-button__animation u-posa u-top-50-p u-left-50-p u-translate-middle btn --primary u-posa --icon-only --js-product-button-animation --sm">
    <svg width="26" height="12" viewbox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6C4.65685 6 6 7.34315 6 9C6 10.6569 4.65685 12 3 12C1.34315 12 0 10.6569 0 9C0 7.34315 1.34315 6 3 6Z" fill="currentColor"/>
      <path d="M13 6C14.6569 6 16 7.34315 16 9C16 10.6569 14.6569 12 13 12C11.3431 12 10 10.6569 10 9C10 7.34315 11.3431 6 13 6Z" fill="currentColor"/>
      <path d="M23 6C24.6569 6 26 7.34315 26 9C26 10.6569 24.6569 12 23 12C21.3431 12 20 10.6569 20 9C20 7.34315 21.3431 6 23 6Z" fill="currentColor"/>
    </svg>
  </div>
</div>
    </div>
  </div>
</article>

Inline product item

Preview

Twig

Html

Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)

Min. 100 ks. 2,75Kč

Od 1 000 ks. 2,65Kč

Od 3 000 ks. 2,50Kč

Od 5 000 ks. 2,40Kč

Od 10 000 ks. 2,00Kč

30%

Limitovaná edice Novinka Akce

Nedostupné
( Zpět 24.5. )

13 000 Kč

1 ks 20,75 Kč

Celkem: 20,75 Kč bez DPH

Vlastní potisk

100

ks

Min. 100 ks

        {% set product_item = {
  id: 1,
  url: "#",
  title: "Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)",
  perex: "Krátký popis produktu",
  in_wishlist: false,
  img: {
    src: "https://i.imgur.com/BaxqHkN.png"
  },
  price: {
    main: "20,75",
    before: "13 000",
    currency: "Kč"
  },
  min_order_count: 100,
  max_order_count: 50000,
  discount: "30%",
  availability: {
    title: "Nedostupné",
    status: "unavailable",
    description: "Zpět 24.5."
  },
  tags: [
     {
        "title": "Limitovaná edice",
        "color": "support-blue-400"
      },
      {
        "title": "Novinka",
        "color": "support-pink-400"
      },
      {
        "title": "Akce",
        "color": "support-violet-400"
      }
  ],
  pricelist: [
    {
      label: "Min. 100 ks.",
      min_count: 100,
      price: 2.75
    },
    {
      label: "Od 1 000 ks.",
      min_count: 1000,
      price: 2.65
    },
    {
      label: "Od 3 000 ks.",
      min_count: 3000,
      price: 2.50
    },
    {
      label: "Od 5 000 ks.",
      min_count: 5000,
      price: 2.40
    },
    {
      label: "Od 10 000 ks.",
      min_count: 10000,
      price: 2.00
    }
  ]
} %}

{% include "@Components/items/product-item/product-item--inline.twig" with {props: product_item} %}

          
<article class="i-product --inline u-container-inline u-posr u-border u-border--tertiary-500 u-rounded-3 row mx-0 mt-0 gy-2 pb-2 --js-pricelist-controler  --vertical" data-product-id="1">
  <div class="col-xl-5 d-flex flex-wrap justify-content-center">
    <div class="col-md-4 d-flex align-items-center">
      <figure class="i-product__image d-block u-posr overflow-hidden u-img-hover">
        <a href="#" class="i-product__image-link d-flex align-items-center" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
                      <div class="img u-posr overflow-hidden --cover  --ratio-1-1">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/BaxqHkN.png" alt="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)" width="172" height="172" draggable="false">
  </picture>
</div>
                  </a>
      </figure>
    </div>

    <div class="i-product__content col-md-8 d-flex flex-column gap-1 p-1">
      <h2 class="i-product__title u-fz-md u-fw-700">
        <a class="link d-inline-flex u-fw-600 align-items-center      i-product__link u-fz-md u-clamp" href="#" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
      <span class="link__title">Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)</span>
  
  
  </a>
      </h2>
              <div class="i-pricelist u-fz-xs i-product__pricelist">
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                --active --first
                
              "
         data-price="2.75"
         data-min-count="100"
         data-index="0"
    >
              <span>Min. 100 ks.</span>
      
              <span>2,75Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.65"
         data-min-count="1000"
         data-index="1"
    >
              <span>Od 1 000 ks.</span>
      
              <span>2,65Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.5"
         data-min-count="3000"
         data-index="2"
    >
              <span>Od 3 000 ks.</span>
      
              <span>2,50Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.4"
         data-min-count="5000"
         data-index="3"
    >
              <span>Od 5 000 ks.</span>
      
              <span>2,40Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                --last
              "
         data-price="2"
         data-min-count="10000"
         data-index="4"
    >
              <span>Od 10 000 ks.</span>
      
              <span>2,00Kč</span>
          </div>
  </div>
          </div>
  </div>

  <div class="col-xl-7 d-flex flex-column flex-lg-row gap-2 gap-lg-4">
    <div class="d-flex flex-column gap-2 justify-content-between flex-wrap w-100 w-lg-50 p-1">

      <div class="d-flex align-items-top gap-1">
                  <div class="i-discount d-flex flex-column justify-content-center align-items-center --lg i-product__discount">
  <div class="i-discount__value u-fw-700 u-fz-sm">30%</div>
</div>
        
                    <div class="g-tags d-flex flex-wrap gap-1 align-items-start">
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-blue-400 --sm    i-product__tag">
      <span class="i-tag__title">Limitovaná edice</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-pink-400 --sm    i-product__tag">
      <span class="i-tag__title">Novinka</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-violet-400 --sm    i-product__tag">
      <span class="i-tag__title">Akce</span>
    </span>
      </div>
              </div>
      <div class="d-flex align-items-center justify-content-between  w-100 gap-2">
                  <div class="i-availability u-fz-sm d-flex flex-column --unavailable  i-product__availability">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-danger">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <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.495 8.002 3.203 4.746l1.478-1.5 3.32 3.272 3.317-3.272 1.478 1.5-3.292 3.256 3.292 3.246-1.494 1.507L8 9.489l-3.303 3.266-1.494-1.507 3.292-3.246Z" clip-rule="evenodd"/></svg>      </span>

    Nedostupné
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( Zpět 24.5. )
      </span>

  </div>
        
                  <div class="d-flex justify-content-end flex-column align-items-end">
            <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 i-product__price">
      <div class="i-price__row i-price__before d-flex justify-content-end align-items-center gap-1">
      
      <span class="i-price__before u-fw-500 text-decoration-line-through u-color-secondary">
        13 000 Kč
      </span>
    </div>
        <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="--js-product-item-price">
          20,75
        </span>
                  Kč              </span>
    </div>
  
  </div>
            <span class="u-fw-500 u-fz-sm d-inline text-end">Celkem:
              <span class="--js-product-total-price">20,75</span>
              Kč
              bez DPH
            </span>
          </div>
              </div>
    </div>

    <div class="w-100 w-lg-50 p-1 d-flex flex-column justify-content-between">
      <div class="row gx-0 mb-2">
        <div class="col-6 d-flex i-product__print-checkbox-wrapper">
          <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   i-product__print-checkbox --js-product-item-checkbox u-fw-600">
  <input class="f-checkbox__input u-posa" type="checkbox">
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <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>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Vlastní potisk
              
          </span>

    
      </div>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</label>
        </div>
        <div class="col-6 i-product__print-counter-wrapper">
          
<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  product-quantity --js-product-counter">

  <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="product-quantity" value="100" min="100" max="50000">
</div>
        </div>
      </div>
      <div class="i-product__buttons d-flex gap-2 justify-content-between">
        <div class="i-add-wishlist-button    i-product__wishlist flex-shrink-0">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__add js-wishlist-add" type="button" aria-label="Přidat do wishlistu" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg>      </span>
    </span>
  
  </button>

  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__remove js-wishlist-remove" type="button" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg>      </span>
    </span>
  
  </button>
</div>

          <div class="i-add-cart-buttons u-posr text-center flex-grow-1  flex-grow-1 i-product__cart-add">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__cart-add js-cart-add --shown u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Přidat do košíku" data-product-id="1" data-modal-target="add-product-to-cart-modal">
      <span class="btn__title u-z-index-1">
      Přidat do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --sm">
          <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="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>

      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__print js-print-add --hidden u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Chci vlastní potisk" data-product-id="1" data-modal-target="product-print-modal">
      <span class="btn__title u-z-index-1">
      Chci vlastní potisk
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white">
          <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>
    </span>
  
  </button>
  
  
  <div class="i-add-cart-button__animation u-posa u-top-50-p u-left-50-p u-translate-middle btn --primary u-posa --icon-only --js-product-button-animation --sm">
    <svg width="26" height="12" viewbox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6C4.65685 6 6 7.34315 6 9C6 10.6569 4.65685 12 3 12C1.34315 12 0 10.6569 0 9C0 7.34315 1.34315 6 3 6Z" fill="currentColor"/>
      <path d="M13 6C14.6569 6 16 7.34315 16 9C16 10.6569 14.6569 12 13 12C11.3431 12 10 10.6569 10 9C10 7.34315 11.3431 6 13 6Z" fill="currentColor"/>
      <path d="M23 6C24.6569 6 26 7.34315 26 9C26 10.6569 24.6569 12 23 12C21.3431 12 20 10.6569 20 9C20 7.34315 21.3431 6 23 6Z" fill="currentColor"/>
    </svg>
  </div>
</div>
      </div>
    </div>
  </div>

</article>