Documentación Bootic

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

Liquid: El lenguaje de las plantillas Bootic

Bootic utiliza Liquid como lenguaje para crear y modificar las plantillas que generan el HTML de una tienda. Al igual que otros sistemas de templating, Liquid permite combinar código HTML con etiquetas especiales para desplegar el contenido.

Por ejemplo, para mostrar una lista de productos en la plantilla products.html, usaríamos el siguiente código:

<ul class="products">
  {% for product in products %}
  <li class="product">
    <h3><a href="{{ product.url }}">{{ product.model }}</a></h3>
    <span class="price">{{ product.price.format }}</span>
  </li>
  {% endfor %}
</ul>

La sintaxis de Liquid define tres tipos de elementos: variables, filtros y etiquetas.

Variables

Una variable está rodeada por {{ y }} e inserta texto directamente en tu plantilla.

{{ product.url }}

Esto resulta en:

/products/producto-de-ejemplo

Más información sobre las variables disponibles aquí.

Filtros

Un filtro modifica o agrega al valor de una variable o expresión. La sintáxis de un filtro es expresión | filtro. La barra vertical quiere decir "toma el valor de la expresión y pásalo a través del filtro".

Un ejemplo usando el filtro ´truncate´:

{{ 'Esta frase es muy larga así que la cortaremos' | truncate:20 }}

Esto resulta en:

Esta frase es muy l...

Más información sobre las filtros disponibles aquí.

Etiquetas

Una etiqueta esta rodeada por {% y %} y no retorna texto directamente, sino que modifica el contenido que rodea. Este ejemplo itera una lista de 3 productos y genera HTML para cada producto en la lista.

{% for product in products limit:3 %}
  <a href="{{ product.url }}">{{ product.model }}</a>
{% endfor %}

El resultado será:

<a href="/products/xbox-one">Xbox One</a>
<a href="/products/psx4">Sony Playstation 4</a>
<a href="/products/gameboy">Gameboy</a>

Más información sobre las etiquetas disponibles aquí.

Liquid es un motor de plantillas muy completo y este wiki sólo nos enfocamos en los aspectos que tienen relación directa con plantillas de tiendas Bootic. Para uso general te recomendamos que revises la documentación oficial de liquid.

Crea tu tienda hoy mismo. Sin compromisos. Ver planes