custom_add_to_cart.html

<!-- Formulario y botón "agregar al carro" en plantilla product.html. 
Los data-attributes son necesarios para la API Ajax del carrito (opcional) -->
<form class="add_to_cart" action="{{ add_to_cart_url }}" method="post" data-bootic-cart-add="add" data-bootic-productId="{{ product.id }}"> 
  <!-- si hay más de 1 variante, muéstralas en una lista -->
  {% if product.variants_count > 1 %}
    <h4>{{ 'activerecord.models.variant' | t }}</h4>
    <ul class="variants">
      <!-- primero las variantes disponibles -->
      {% for variant in product.available_variants %}
      <li class="bootic_variant available {% cycle 'odd', 'even' %} av-variant-{{ forloop.index }}">
        <input type="radio" name="cart_item[variant_id]" value="{{ variant.id }}" id="cart_item_variant_id_{{ variant.id }}" />
        <label for="cart_item_variant_id_{{ variant.id }}">
          <span class="bootic_variant_title">{{ variant.title | strip_html }}</span>
        </label>
      </li>
      {% endfor %}
      <!-- ahora las variantes agotadas, inputs deshabilitados -->
      {% for variant in product.unavailable_variants %}
      <li class="bootic_variant unavailable {% cycle 'odd', 'even' %} un-variant-{{ forloop.index }}">
        <input type="radio" name="cart_item[variant_id]" value="{{ variant.id }}" disabled="disabled" id="cart_item_variant_id_{{ variant.id }}" {% if forloop.index == 1 %}checked="checked"{% endif %} />
        <label for="cart_item_variant_id_{{ variant.id }}">
          <span class="bootic_variant_title">{{ variant.title | strip_html }}</span>
          <em class="bootic_variant_price">
            {{ 'orders.titles.sold_out' | t }}
          </em>
        </label>
      </li>
      {% endfor %}
    </ul>
  {% else %}
    <!-- si hay sólo 1 variante, pon su ID en un campo oculto -->
    <input type="hidden" name="cart_item[variant_id]" value="{{ product.default_variant_id }}" />
  {% endif %}
  <!-- si hay variantes disponibles, muestra selector de cantidad y botón de carro -->
  {% if product.any_available %}
  <!-- Botón de envío al carro -->
  <input type="text" name="cart_item[quantity]" size="4" value="1" id="cart_item_quantity" />
  <span class="loading">&hellip;</span>
  <input type="submit" value="{{ button_text }}" class="submit" data-out-of-stock="{{ 'js_cart.unavailable' | t }}" data-in-cart="{{ 'js_cart.button_in_cart' | t }}" />
  {% else %}
    <!-- no hay niuna variante disponible. Muestra mensaje de producto agotado -->
    <p class="outofstock">{{ 'orders.messages.sold_out' | t }}.</p>
  {% endif %}
</form><!--/form-->