Documentación Bootic

Todo la información para empezar a vender en línea.

Listando variantes de producto

También puedes usar la colección product.variants para listar las variantes fuera del formulario o en otro contexto.

<ul class="variantes">
  {% for variant in product.variants %}
  <li class="v-{{ variant.title }}">
    <span class="color">{{ variant.title }}</span>
    <h4>{{ variant.title }}</h4>
  </li>
  {% endfor %}
</ul>

En el ejemplo anterior usamos el título de cada variante como valor del atributo class de cada elemento. Con un poco de CSS podemos usar la lista de variantes para mostrar una paleta de colores disponibles.

Asumiendo que nuestros productos tienen variantes llamadas "rojo", "azul", "verde" y "cafe":

.variantes li {
  margin-bottom: 4px;
}
.variantes .color {
  display: inline-block;
  width: 20px;
  height: 20px;
  box-shadow: 1px 2px 3px #888;
  text-indent: -500px;
  overflow: hidden;
  margin-right: 5px
}
.variantes h4 { display: inline-block; }
.v-rojo .color {background-color: red;}
.v-azul .color {background-color: blue;}
.v-verde .color {background-color: green;}
.v-naranjo .color {background-color: orange;}

Variantes personalizadas

Otras opciones son usar los nombres de variantes para cargar imágenes, etc.

Lista de variantes y botón de compra personalizado

El siguiente ejemplo muestra cómo construir una lista de variantes dentro del formulario "agregar al carro" de forma personalizada. Lee los comentarios en el código para entender cada parte.

<!-- Formulario para agregar productos al carro. Los campos requeridos son:
     - cart_item[product_id] ID del producto actual
     - cart_item[variant_id] ID de variante elegida
     - cart_item[quantity] cantidad de unidades a agregar -->

<!-- La variable {{ add_to_cart_url }} genera la URL necesaria para agregar productos al carro -->
<form class="add_to_cart" action="{{ add_to_cart_url }}" method="post">

  <input type="hidden" name="cart_item[product_id]" value="{{ product.id }}" />
  <p>

<!-- Solo mostramos las opciones en caso de que haya mas de una variante para elegir -->

    {% if product.variants.size > 1 %}
    <select name="cart_item[variant_id]">

<!-- variant.is_available nos permite saber si la variante esta disponible.
     Si no lo esta, deshabilitamos el campo (en vez de simplemente no mostrarlo) -->

    {% for variant in product.variants %}
      <option value="{{ variant.id }}" id="i-{{ variant.id }}"
        {% unless variant.is_available %} disabled="disabled"{% endunless %}
      >{{ variant.title }}</option>
    {% else %}

<!-- Solo hay una variante disponible, asi que incluimos su ID en un campo oculto -->
      <input type="hidden" name="cart_item[variant_id]" value="{{ product.variants.first.id }}" />

    {% endfor %}

    </select>
    {% endif %}

    <!-- Cantidad (unidades) -->
    <input type="text" id="cart_item_quantity" name="cart_item[quantity]" value="1" />
    <!-- Botón de envío al carro -->
    <input type="submit" value="Agregar al carro" />

  </p>
</form>

Crea tu tienda hoy mismo. Sin compromisos. Ver planes