Estás en: Inicio > Partners y Diseñadores > Plantillas > Referencia Liquid

Referencia Liquid

Liquid

Liquid es un lenguaje de plantillas que permite crear y editar de forma sencilla las plantillas en 3sellers.

Subir ^

Basic

Básicamente hay dos tipos de elementos en Liquid: elementos de salida y elementos de Tag.

Los elementos de salida son aquellos que se expresan como texto y se van entre llaves: {{ elemento }}
Los elementos de tag son aquellos que no pueden ser expresados como texto y van entre: {% %}

Subir ^

Elementos de texto

Ejemplos de elementos de texto:

Hola {{user.full_name}}
Hola {{full_name}}

Los elementos de texto pueden enviar su salida a filtros para procesar su resultado. El primer parámetro de los filtros es siempre la salida de su elemento de la izquierda y su salida será el nuevo elemento de la izquierda del siguiente filtro. Cuando no hayan mas filtros la salida del filtro será la cadena que se mostrará.

Por ejemplo, el filtro 'upcase' convierte los caracteres de una cadena a mayúsculas.

# Título de blog: {{blog.name | upcase}}
Resultado => Título de blog: NOMBRE DEL BLOG

El filtro 'strip_html' elimina el contenido html de una cadena y devuelve solamente el texto:

{{ 'google.com' | strip_html | capitalize }}
# Resultado => Google

Listado de filtros disponibles

Subir ^

Tags

Los tags se usan para la lógica de la plantilla.

Ejemplo:

{% if user.logged_in? %}
  Usuario online
{% else %}
  Usuario offline
{% endif %}

{% for product in category.products %}
  {{ product.name }}
{% endfor %}

Listado de tags:

comment

Es el tag mas sencillo. Permite establecer comentarios en la plantilla que no serán mostrados. Este tag necesita la etiqueta de cierre 'endcomment'.

Ejemplo:
```
{% comment %} Inicio de la sección de productos {% endcomment %}
  ...
{% comment %} Fin de la sección productos {% endcomment %}
```

If/Else

Permite expresiones condicionales. La etiqueta de inicio es 'if', puede contener 'else' y debe finalizar con la etiqueta 'endif'.

Ejemplos:

{% if user.logged_in? %}
  Hola {{ user.full_name }}
{% endif %}

{% if category.name == "Productos" %}
   Total: {{ category.total_products }}
{% endif %}

{% if category.name == "Productos" or category.name == "Products" %}
 Total: {{ category.total_products }}
{% endif %}

{% if category.parent? and category.parent.name == "Productos" %}
  Esta categoría pertenece a productos.
{% endif %}

{% if category.parent == null %}
  Categoría padre
{% else %}
  Categorizara
{% endif %}

{% if total_products > 12 %}
  Ver más productos
{% endif %}

# lista = [1,2,3]
{% if lista contains 2 %}
  lista contiene 2
{% endif %}

Cycle

Alterna entre varios elementos cada vez que es llamado.

{% cycle 'grupo1': 'uno', 'dos' %}
{% cycle 'grupo2': '1', '2' %}
{% cycle 'grupo1': 'uno', 'dos' %}
{% cycle 'grupo2': '1', '2' %}

# Resultado => uno 1 dos 2

For Loops

Liquid permite recorrer colecciones. Utiliza el el tag 'for' y necesita ser cerrado con 'endfor'.

{% for item in lista %}
  {{ item }}
{% endfor %}

Durante cada repetición, se encuentran disponibles las siguientes variables:

forloop.length      # => numero de elementos de la colección.
forloop.index       # => índice de la repetición actual.
forloop.index0      # => índice de la repetición actual (empezando desde 0)
forloop.rindex      # => numero de elementos restantes.
forloop.rindex0     # => numero de elementos restantes (empezando desde 0)
forloop.first       # => true si la repetición actual es la primera.
forloop.last        # => true si la repetición actual es la última.

Hay varios atributos adicionales para for:

- limit:{numero}
Especifica el numero de elementos a recorrer.

- offset:{numero}}
Indica desde que posición de la colección empezar.

# lista = [1,2,3,4,5]
{% for item in lista limit:2 offset: 2 %}
  {{ item }}
{% endfor %}

# Resultado => 3,4

- reversed
Invierte la colección antes de recorrerla:

{% for item in lista reversed %}
  {{ item }}
{% endfor %}

Asignacion de variables

Liquid permite asignar contenido a tus propias variables para ser usado en elementos de salida u otros tags.

{% assign name = "productos" %}
{% for category in categories %}
  {% if category.name == name %}
     {% assign found = true %}
  {% endif %}
  ...
{% endfor %}

{% if found %}
  Categoría de productos encontrada.
{% endif %}

También se puede capturar bloques de cadenas en una variable con el tag 'capture':

{% capture lista_de_productos %}
  {% for product in category.products %}
    {{ product }}
  {% end %}
{% endcapture %}

{{ lista_de_productos }}

Subir ^

Filtros

Aparte de los drops Liquid nos ofrece una serie de filtros para modificar o procesar el resultado sus atributos.

Subir ^

Filtros Standard

size(input)
Devuelve el tamaño de una lista o de una cadena.
downcase(input)
Convierte una cadena a minúsculas.
upcase(input)
Convierte una cadena a mayúsculas.
capitalize(input)
Convierte la primera letra de una cadena en mayúscula.
escape(input)
Escapa una cadena a formato HTML.
truncate(input, length = 50, truncate_string = "...")
Trunca una cadena en x carácteres.
truncatewords(input, words = 15, truncate_string = "...")
Trunca una cadena en x palabras.
strip_html(input)
Elimina los tags html de una cadena.
strip_newlines(input)
Elimina todos los caracteres de nueva linea (\n) de una cadena.
join(input, glue = '')
Concatena elementos de una lista con un determinado carácter entre ellos.
sort(input, property = nil)
Ordena elementos de una lista. Proporciona una propiedad opcional con la que ordenar una lista de hashes o drops.
map(input, property)
Extrae las propiedades de una entrada.
replace(input, string, replacement = '')
Sustituye todas las apariciones de una cadena con otra.
replace_first(input, string, replacement = '')
Sustituye la primera aparición de una cadena con otra.
remove(input, string)
Elimina una subcadena de una cadena.
remove_first(input, string)
Elimina la primera aparición de una subcadena.
append(input, string)
Añade una cadena al final otra.
prepend(input, string)
Añade una cadena al inicio de otra.
newline_to_br(input)
Añade tags
antes de cada carácter de nueva linea de una cadena.

date(input, format)

# Formato de fecha
#
#   %a - Día de la semana abreviado ('Sun')
#   %A - Día de la semana ('Sunday')
#   %b - Nombre del mes abreviado ('Jan')
#   %B - Nombre del mes ('January')
#   %c - Fecha local preferida y representación de tiempo
#   %d - Día del mes (01..31)
#   %H - Hora del día, reloj 24 horas (00..23)
#   %I - Hora del día, reloj 12 horas (01..12)
#   %j - Día del año (001..366)
#   %m - Mes del año (01..12)
#   %M - Minuto de la hora (00..59)
#   %p - Indicador de AM/PM ( 'AM'  or  'PM')
#   %S - Segundo del minuto (00..60)
#   %U - Numero de semana del año actual,
#           empezando con el primer Domingo como el
#           primer día de la primera semana (00..53)
#   %W - Numero de semana del año actual,
#           empezando con el primer Lunes como el
#           primer día de la primera semana (00..53)
#   %w - Día de la semana (Domingo es 0, 0..6)
#   %x - Representación preferida del día, sin hora
#   %X - Representación preferida de la hora, sin fecha
#   %y - Año sin centenario (00..99)
#   %Y - Año con centenario
#   %Z - Time zone
#   %% - Carácter '%'

first(array)
Devuelve el primer elemento de una lista.
last(lista)
Devuelve el ultimo elemento de una lista.
plus(input, operand)
Suma 2 números.
minus(input, operand)
Resta 2 números.
times(input, operand)
Multiplica dos números.
divided_by(input, operand)
Divide dos números.

Subir ^

Filtros de Texto

translate(text)
Traduce un texto.
t(text)
Alias de translate.
localize(localizable, format)
Localiza la fecha según el formato.
loc(localizable, format)
Alias de localize.
javascript_tag(names)
Devuelve el tag html de javascript con la ruta del fichero indicado.
stylesheet_tag(names, media='screen')
Devuelve los tags de estilos css con la ruta del fichero indicado.
date_format(str_format)
Da formato a una fecha.
url_format(str_format)
Formatea una fecha para la url de un artículo.
image_url(url, tipo = nil)
Genera la url de un determinado tamaño de imagen a partir de una url de imagen.
image_tag(url, titulo, tipo = nil, width = nil, height = nil, clas = nil, id_ = nil, method_ = nil)
Genera el tag img según la url de una imagen.
format_price(price)
Formatea el precio según el standard de dos decimales.
link_archives(key, value, fecha_comparativa)
Genera el enlace de acceso a los archivos. Si pasamos una fecha como argumento final marcará en negrita la fecha que coincida con la pasada.
tags_with_prefix(prefix, products = nil)
Devuelve una lista de todos los tags que empiezan por un determinado prefijo, de una tienda o de una lista de productos si es pasado como último parámetro.
assign_to(value, name)
Crea una variable 'value' con contenido 'name'.
get_category(name)
Obtiene una categoría a partir del id nombre de la misma.
get_page(name)
Obtiene una página a partir de su nombre.
get_blog(name)
Obtiene un blog a partir se su nombre.
get_product(name)
Obtiene el producto a partir del id o nombre del mismo.
difference_in_days(time1, time2)
Devuelve la diferencia en días entre dos fechas.
strip(text)
Elimina los carácteres en blanco de los extremos de una cadena.

Subir ^

Filtros de Paginación

paginate_links(order_link, limit=12, order_by="nombre ASC", offset=0, last_page=0)
Devuelve los links de paginación de la colección de productos.
paginate_orderresults_links(order_link, limit=nil, order_by="nombre ASC", custom_params = nil)
Devuelve los enlaces de ordenación de resultados de listados.
paginate_numproducts_links(enlace_ordenar, limit, order_by, custom_params = nil)
Devuelve los enlaces de número de productos a mostrar en la paginación de productos.

Subir ^

Tutoriales, vídeos y recursos relacionados

Estás en: Inicio > Partners y Diseñadores > Plantillas > Referencia Liquid

Inicio