templates/components/add-to-cart.html.twig line 1

Open in your IDE?
  1. <template x-if="currentIsInStock()">
  2.     <div class="flex flex-row items-center justify-center gap-3 mb-0 max-w-lg">
  3.         {% if quantity|default %}
  4.             <div>
  5.                 <div class="group relative w-fit flex border border-gray-300 rounded-none items-center p-1 h-12 text-black">
  6.                     <button @click="remove()" :disabled="amount === 1" aria-label="Decrement"
  7.                             class="appearance-none bg-transparent rounded-none border-0 hover:bg-gray-50 disabled:opacity-30 active:bg-gray-100 disabled:hover:bg-transparent disabled:cursor-not-allowed motion-safe:transition-all p-3">
  8.                         {% include 'assets/minus.svg' %}
  9.                     </button>
  10.                     <input class="!w-10 h-full text-center outline-none border-none {% if unit|default %} !pt-0 {% endif %}"
  11.                            min="1" name="quantity" value="1" type="text" x-model="amount">
  12.                     {% if unit|default %}
  13.                         <div class="absolute bottom-1 start-1/2 -translate-x-1/2 flex items-center text-xs space-x-1 user-select-none -z-1 text-black">
  14.                             <span x-text="amount > 1 ? '{{ unit }}' + 's' : '{{ unit }}'">{{ unit }}</span>
  15.                         </div>
  16.                     {% endif %}
  17.                     <button @click="add()" aria-label="Increment"
  18.                             class="appearance-none bg-transparent rounded-none border-0 hover:bg-gray-50 disabled:opacity-30 active:bg-gray-100 disabled:hover:bg-transparent disabled:cursor-not-allowed motion-safe:transition-all p-3">
  19.                         {% include 'assets/plus.svg' %}
  20.                     </button>
  21.                 </div>
  22.             </div>
  23.         {% endif %}
  24.         <button id="addToCart"
  25.                 data-redirect-to-cart="{{ cart_url }}"
  26.                 class="w-full flex flex-row justify-center items-center gap-3 rounded-none bg-primary p-3 text-white text-center"
  27.                 @click="addToCart()">
  28.             <svg id="loading_buy" class="hidden animate-spin h-5 w-5 text-white"
  29.                  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  30.                 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
  31.                         stroke-width="4"></circle>
  32.                 <path class="opacity-75" fill="currentColor"
  33.                       d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  34.             </svg>
  35.             <span id="loading_buy_text">Añadir a la cesta</span>
  36.         </button>
  37.     </div>
  38. </template>
  39. <template x-if="!currentIsInStock()">
  40.     <div class="flex flex-row items-center gap-3 mt-6">
  41.         <button id="addToCart"
  42.                 class="no-stock w-full flex flex-row justify-center items-center gap-3 rounded-none bg-black p-3 text-white text-center">
  43.             <span>Producto agotado</span>
  44.         </button>
  45.     </div>
  46. </template>