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