Documentación Bootic

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

La plantilla para listar productos: products.html

Esta es la plantilla usada por Bootic para mostrar listas y colecciones de productos. Esta siempre tiene disponible una lista de productos en el objeto products.

Normalmente querrás usar paginación para mostrar tus productos en varias páginas, ya que esa lista podría tener muchos productos (por ejemplo en el caso de /products, que muestra todos los productos visibles de tu tienda).

<ul class="products">
{% paginate products by 5 %}
  {% for product in paginated_list %}
    <li class="clearfix">
      <a href="{{ product.url }}" class="product-image">
        <img src="{{ product.first_image.small }}" alt="{{ product.model }}" />
      </a>

      <h3 class="product-model">
        <a href="{{ product.url }}">{{ product.model }}</a>
      </h3>

      <span class="product-vendor">{{ product.vendor }}</span>

      {% unless product.price.zero %}
        <small class="product-price">{{ product.price.format }}</small>
      {% endunless %}

    </li>
  {% endfor %}
  {{ paginated_list | pagination }}
{% endpaginate %}
</ul>

En este caso iteramos sobre la lista de productos products y generamos HTML para cada producto, mostrando detalles básicos de cada uno como título, imagen pequeña, precio y fabricante.

En este ejemplo estamos mostrando la primera imagen de cada producto dentro de un hipervínculo ("link") a la ficha del producto.

<a href="{{ product.url }}" class="product-image">
  <img src="{{ product.first_image.small }}" alt="{{ product.model }}" />
</a>

Luego mostramos el título o modelo del producto - de nuevo dentro de un link - usando el filtro truncate para asegurarnos de que sólo mostramos los primeros 30 caractéres del título y así evitar romper el diseño.

<h3 class="product-model">
  <a href="{{ product.url }}" title="{{ product.model }}">{{ product.model }}</a>
</h3>
Luego mostramos el nombre de la marca o fabricante del producto ("vendor").
  <span class="product-vendor">{{ product.vendor }}</span>

Por último, mostramos el precio de producto, pero sólo si éste es mayor que 0 (para no mostrar un "0" para productos que pudieran no tener precio o ser gratuitos)

  {% unless product.price.zero %}
   <small class="product-price">{{ product.price.format }}</small>
  {% endunless %}

Usamos el método format en el precio del producto, que despliega la puntuación correcta y el símbolo de la moneda configurada en tu tienda.

En este ejemplo mostramos la imagen pequeña por defecto de cada producto (product.first_image.small), pero también es posible mostrar tamaños personalizados de imágenes

Relacionados:

Crea tu tienda hoy mismo. Sin compromisos. Ver planes