Skip to content

Instantly share code, notes, and snippets.

@juque
Forked from ismasan/custom_add_to_cart.html
Last active August 29, 2015 14:06
Show Gist options
  • Save juque/c6dbdd762a380e4b40a5 to your computer and use it in GitHub Desktop.
Save juque/c6dbdd762a380e4b40a5 to your computer and use it in GitHub Desktop.
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 }} - {{ variant.stock }}</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 }} - {{ variant.stock }}</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="Agregar al carro" 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-->
<form action="{{ add_to_cart_url }}" method="post">
<input type="hidden" name="cart_item[product_id]" value="{{ product.id }}" />
<!-- lista de variantes con radio buttons -->
<p>
<span>Cantidad</span>
<input type="text" name="cart_item[quantity]" value="1" />
<span> x talla </span>
<select name="cart_item[variant_id]">
{% for variant in product.variants %}
<option id="i-{{ variant.id }}" value="{{ variant.id }}" {% unless variant.is_available %}disabled="disabled"{% endunless %}>{{ variant.title }} {% if variant.is_available != true %} - agotado {% endif %}</option>
{% endfor %}
</select>
</p>
<input type="submit" value="Comprar" />
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment