Documentación Bootic

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

Reutilizando HTML en listas de productos con la etiqueta loop

En la mayoría de los casos, el HTML utilizado para mostrar un producto dentro de un listado (en products.html, o los destacados en home.html o los similares en product.html) es el mismo.

Para esto es muy conveniente utilizar una misma plantilla e incluirla en cada listado utilizando la etiqueta loop.

Plantilla reutilizable product_item.html

Por ejemplo, podríamos crear una plantilla HTML llamada product_item.html con el siguiente código:

<!-- product_item.html -->
<li class="item-{{ product_item_counter }} clearfix">

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

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

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

  <span class="product-vendor">{{ product_item.vendor }}</span>
</li>
Nótese que el nombre de la variable es product_item. Idéntico nombre que la plantilla (product_item.html)

Ejemplo de uso

Usamos la etiqueta especial loop para llamar nuestra plantilla product_item.html con cada producto en la lista:

<!-- products.html -->
{% paginate products by 20 %}
  <ul class="products clearfix">
  {% loop paginated_list in 'product_item' %}
  </ul>
  {{ paginated_list | pagination }}
{% endpaginate %}

De esta manera podemos reutilizar el mismo HTML para productos desde distintas plantillas. Estas plantillas reutilizables a veces son llamadas «parciales», porque muestran sólo una parte de la información de una página.

Asimismo, ahora podemos incluir esta misma plantilla en el listado de productos similares en product.html:

<!-- product.html -->
{% if product.has_similar_products %}
  <div id="similar-products">
    <h2>Productos similares</h2>
      <ul class="products">
        {% loop product.similar_products in 'product_item' limit:3 %}
      </ul>
  </div>
{% endif %}

Crea tu tienda hoy mismo. Sin compromisos. Ver planes