Métodos

Un método en Twig es una función con parámetros creada desde PHP para que pueda ser llamada en el front end usando solo una línea de código.

Por ejemplo usamos métodos para generar las URLs de CSS, pero en este caso lo combinamos con filtros (todo lo que use “|” es un filtro).

{{ 'css/style-colors.scss.tpl' | static_url | css_tag }}

En este ejemplo estamos usando un método para obtener el archivo style-colors.scss.tpl , luego con el filtro “static_url” estamos aclarando que la ubicación del archivo es en la carpeta “static”, y por último con el filtro “css_tag” formateamos todo para que se muestre dentro de un tag link de HTML para CSS:

<link rel="stylesheet" type="text/css" href="//d26lpennugtm8s.cloudfront.net/stores/941/793/themes/new_linkedman/style-colors-09f5cca100005e346657439693d422ac.css?1239532575" media="all">   

Un último ejemplo de un método es como incorporamos Google Fonts.

@import url('{{ [settings.font_headings, settings.font_rest] | google_fonts_url('300, 400, 700') | raw }}');

Podemos ver que primero llamamos a las tipografías guardadas en la sección de Personalizar tu diseño, luego convertimos eso en una URL de Google Fonts (con los pesos tipográficos que necesitamos) y finalmente usamos un raw.

Filtros comunes usados en un theme

raw

Este filtro hace que se muestre el código “en crudo” sin que Twig lo procese. Por ejemplo puede suceder que un nombre de un producto contenga el tag de HTML “strong”:

Camisa <strong>negra</strong>

si no usamos raw Twig procesa ese texto como una string con el HTML mostrando literalmente el tag de HTML como parte del nombre del producto. Pero usando raw se “escapará” a Twig mostrándolo como:

Camisa negra 

Ejemplo:

{{ settings.css_code | raw }}


css_tag

Convierte en un link de HTML con rel=”stylesheet” y type=”text/css”.

{{ 'css/style-colors.scss.tpl' | static_url | css_tag }}

Mostrándolo en el HTML de esta forma:

<link rel="stylesheet" type="text/css" href="//d26lpennugtm8s.cloudfront.net/stores/941/793/themes/base/style-colors-165fc00e9f9b1735e7c765a5c486ffca.css?361907666" media="all">


static_url

Convierte una URL en estática, por ejemplo si necesitamos llamar un archivo dentro de la carpeta “static”.

Ejemplo:

{{ 'css/style-colors.scss.tpl' | static_url | css_tag }}


script_tag

Convierte en un tag “script” de HTML “con type=”text/javascript””. Si le agregamos entre paréntesis la palabra “true” ese script será async. 

Ejemplo:

{{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' | script_tag(true) }}


translate

Traduce todo texto considerando el archivo translations.txt

Ejemplo:

<p>{{ “Hola” | translate }}</p>


money

Convierte un número en la moneda configurada por el administrador de la tienda. Incluye los decimales y el formato de la moneda.

Ejemplo:

{{ product.price | money }}


has_custom_image

Verifica si en la sección de Personalizar tu diseño la funcionalidad tiene una imagen subida. 

Ejemplo:

{% if "seal_img.jpg" | has_custom_image %}


product_image_url

Es la url de la imagen del producto, se pueden agregar los tamaños entre paréntesis, para más información sobre los tamaños ver este artículo.

Ejemplo:

{{ image | product_image_url('huge') }}


settings_image_url

Es la url de una imagen subida en la sección de Personalizar tu diseño. También puede usar distintos tamaños entre paréntesis, para más información sobre los tamaños ver este artículo.

Ejemplo:

{{ slide.image | static_url | settings_image_url('1080p') }}


is_external

Verifica si un link de un menú configurado desde el Administrador nube tiene un “target=”_blank”

Ejemplo:

{% if item.url | is_external %}


a_tag

Convierte en un elemento “a” de HTML. Pasamos los parámetros de la URL del link y una clase.

Ejemplo:

{{ "Mi cuenta" | translate | a_tag(store.customer_home_url, '', 'nav-accounts-link') }}


img_tag

Convierte en un elemento “img” de HTML. Podemos agregar parámetros para un “alt” y una clase. 

Ejemplos:

Sin parámetros:

{{'placeholder-product.png' | static_url | img_tag}}

Con parámetros:

{{ store.logo('medium') | img_tag(store.name, {class: 'logo-img  transition-soft-slow'}) | a_tag(store.url) }}


take

Simplemente toma una determinada cantidad de algo (por ejemplo productos) y la muestra. Entre paréntesis le pasamos esa cantidad que queremos.

Ejemplo:

{% set search_suggestions = products | take(6) %}


shuffle

Mezcla una cantidad de elementos.

Ejemplo:

{% set related_products = sections.primary.products | take(4) | shuffle %}


highlight

Agrega el tag de HTML “strong” a un string

Ejemplo:

{{ product.name | highlight(query) }}


Para más información sobre filtros de Twig recomendamos su sitio oficial