Counter

Default; max value: 10

  • 1
    ks
  •         {% include "@Components/counter/counter.twig" with {props: {
  name: "product-quantity",
  max: 10,
}} %}

      
  •           
<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">

  <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">1</div>
          <div class="c-counter__units">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="1" min="1" max="10">
</div>