Documentación Bootic

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

El detalle de un producto: product.html

Esta plantilla representa a la ficha de un sólo producto en tu tienda. Los datos e imágenes de cada producto los editas en la sección "productos" de la interfaz de administración de tu tienda.

En la plantilla product.html tienes un objeto product con atributos que puedes usar (ver listado completo de atributos en variables/product).

También existe la etiqueta especial add_to_cart que genera el html del botón para agregar al carro de compra.

Mostrar el precio de un producto

Todo producto en lista o página de detalles tiene un atributoo price con el precio del producto. Mostrarlo en plantillas es sencillo:

  Precio: {{ product.price }}

La función format muestra el precio formateado de acuerdo a moneda actual de la tienda.

  Precio: {{ product.price.format }}

Si no quieres mostrar el precio de productos cuyo precio es 0 (por ejemplo para productos gratuitos), puedes usar lo siguiente:

  {% unless product.price.zero %}
    Precio: {{ product.price.format }}
  {% endunless %}

Precio de comparación de producto

Todos los productos pueden tener un campo opcional de precio de comparación. Muy útil si el producto está en oferta y quieres mostrar el precio anterior. En el panel de administración:

precio de comparación de productos

En las plantillas de producto (product.html para el detalle, products.html u otros para las listas) puedes mostrar el precio de comparación como prefieras, si es que está disponible:

  {% if product.has_price_comparison %}
    Precio anterior: {{ product.price_comparison.format }}
  {% endif %}

También puedes mostrar el porcentaje de descuento del precio actual con respecto al an "anterior" o comparación:

  {% if product.has_price_comparison %}
    Descuento: %{{ product.price_comparison_percentage }}
  {% endif %}

Mostrando imágenes de un producto

La colección product.images contiene las imágenes subidas a un producto por los administradores de la tienda.

Cada imagen tiene atributos que puedes usar para construir una galería o simplemente mostrar la primera.

El siguiente ejemplo muestra las 2 primeras imágenes del producto.

{% if product.has_images %}
  <div id="ficha-right" class="clearfix">
    <!-- big images (2) -->
    <ul id="img-big" class="assets clearfix">
      {% for image in product.images limit:2 %}
      <li class="img-big-{{ forloop.index }}">
        <a href="{{ image.large }}" title="{{product.model}}'s details" rel="lightbox[ficha]">
          <img src="{{ image.small }}" alt="{{ product.model }}" />
        </a>
      </li>
      {% endfor %}
    </ul>
    <!-- /big images -->
  </div>
{% endif %}

Cada imagen muestra el tamaño "small" (240x180px) dentro de un link que apunta a la versión "large" (800x600px). Esto es útil para usar librerías JavaScript para galerías de imágenes (como las excelentes Lightbox o FancyBox) o simplemente mostra la imagen grande en el navegador.

El fragmento a continuación muestra el resto de las imágenes de un producto (si es que tiene) en un tamaño menor ("thumbnail", de 75x75px).

{% if product.images | size > 2 %}
<!-- small images -->
<ul id="img-small" class="assets clearfix">
  {% for image in product.images offset: 2 %}
  <li>
    <a href="{{ image.large }}" title="{{product.model}}'s details" rel="lightbox[ficha]">
      <img src="{{ image.thumbnail }}" alt="{{ product.model }}" />
    </a>
  </li>
  {% endfor %}
</ul>
<!-- /small images -->
{% endif %}

Cada imagen de producto tiene los siguientes tamaños predefinidos:

  • thumbnail: 75x75
  • small: 240x180
  • medium: 500x375
  • large: 800x600

Además de los tamaños predefinidos, puedes asignar dimensiones personalizadas a imágenes de productos usando el filtro resize.

<img src="{{ image | resize: '100x100#c' }}" alt="{{ product.model }}" />

El ejemplo anterior crea un cuadrado de 100x100 px, centrado, a partir de la imagen de un producto.

Para saber más sobre tamaños personalizados de imágenes de productos, lee la sección en "trabajando con imágenes".

Otros archivos

También puedes subir otro tipo de archivos a cada producto (por ejemplo, una ficha en formato PDF).

Para mostrarlos, escribe un loop que recorra la colección product.files.

<!-- archivos -->
{% if product.has_files %}
  <ul class="files">
    {% for file in product.files %}
      <li>
        <a href="{{ file.url }}" class="file {{ file.extension }}">{{ file.file_name }}</a>
        </li>
    {% endfor %}
  </ul>
{% endif %}
<!-- /archivos -->

Cada archivo tiene los siguientes atributos:

  • url: URL del archivo original
  • extension: extensión del archivo, (pdf, xls, etc)
  • file_name: nombre original del archivo
  • title: título opcional asignado al subir
  • description: descripción opcional asignada al subir

Variantes y botón de compra

Agregar al carro de compras

La etiqueta {% add_to_cart %} genera un formulario HTML prediseñado con la lista de variantes del producto, un campo para ingresar la cantidad de unidades y un botón para guardar la variante y cantidad elegida en el carro de compras.

<div id="agregar_al_carro">
  {% add_to_cart %}
</div>

La etiqueta también revisa el estado de cada variante y deshabilita las que esten fuera de "stock". Normalmente esta etiqueta es suficiente para la mayoría de los casos. Con un poco de CSS puedes cambiar el estilo de los elementos generados.

Colecciones

Puedes usar product.collections para listar las colecciones a las que el producto pertenece.

{% if product.has_collections %}
  <h2>Colecciones</h2>
  <ul class="colecciones">
    {% for collection in product.collections %}
    <li>
      <a href="{{ collection.url }}">{{ collection.title }}</a>
    </li>
    {% endfor %}
  </ul>
{% endif %}

También puedes acceder a una colección en particular usando su "manilla"* o título normalizado:

{% if product.collections.catalogo %}
<p>
 Este producto está en la colección {{ product.collections.catalogo.title }}!
</p>
{% endif %}
* Una manilla es la versión sin tildes, mayúsculas ni espacios del título de una colección, producto, página u otro objeto en Bootic. Por ejemplo si el título de una colección es "Catálogo 2011", su manilla es "catalogo-211".

Etiquetas

Al igual que con las colecciones, puedes usar product.tags para listar las etiquetas a las que el producto pertenece.

{% if product.has_tags %}
  <h2>Etiquetas</h2>
  <ul class="colecciones">
    {% for tag in product.tags %}
    <li>
      <a href="{{ tag.url }}">{{ tag.name }}</a>
    </li>
    {% endfor %}
  </ul>
{% endif %}

También puedes acceder a una etiqueta en particular usando su "manilla"* o nombre normalizado:

{% if product.tags.destacados %}
<p>
 Este producto tiene la etiqueta {{ product.tags.destacados.name }}!
</p>
{% endif %}

Crea tu tienda hoy mismo. Sin compromisos. Ver planes