Um método no Twig é uma função com parâmetros criados a partir do PHP para que ele possa ser chamado no front end usando apenas uma linha de código.
Por exemplo, usamos métodos para gerar URLs de CSS, mas, neste caso, combinamos isso com filtros (tudo o que usa "|" é um filtro):
{{ 'css/style-colors.scss.tpl' | static_url | css_tag }}Neste exemplo estamos usando um método para obter o arquivo style-colors.scss.tpl, então com o filtro “static_url” estamos esclarecendo que a localização do arquivo está na pasta “static”, e por último, com o filtro “css_tag”, formatamos tudo para ser mostrado com um link de HTML para o CSS:
<link rel="stylesheet" type="text/css" href="//d26lpennugtm8s.cloudfront.net/stores/941/793/themes/new_linkedman/style-colors-09f5cca100005e346657439693d422ac.css?1239532575" media="all">
Um último exemplo de um método é como incorporamos o Google Fonts.
@import url('{{ [settings.font_headings, settings.font_rest] | google_fonts_url('300, 400, 700') | raw }}');Podemos ver que primeiro chamamos as fontes armazenadas na seção “Personalizar seu layout atual”, depois as convertemos em uma URL do Google Fonts (com os pesos tipográficos necessários) e por fim usamos o filtro “raw”.
Filtros comuns usados em um layout
raw
Este filtro faz com que o código "bruto" seja exibido sem que o Twig o processe. Por exemplo, pode acontecer que o nome de um produto contenha a tag HTML "strong":
Camisa <strong>preta</strong>
Se não usarmos o Twig bruto, ele processará esse texto como uma string com o HTML exibindo literalmente a tag de HTML como parte do nome do produto. Usando o raw irá "escapar" o Twig, mostrando-o como:
Camisa preta
Exemplo:
{{ settings.css_code | raw }}css_tag
Converte em um link de HTML com rel=”stylesheet” e type=”text/css”.
{{ 'css/style-colors.scss.tpl' | static_url | css_tag }}Mostrando em HTML assim:
<link rel="stylesheet" type="text/css" href="//d26lpennugtm8s.cloudfront.net/stores/941/793/themes/base/style-colors-165fc00e9f9b1735e7c765a5c486ffca.css?361907666" media="all">
static_url
Converte uma URL para estática, por exemplo, se precisarmos chamar um arquivo dentro da pasta "static".
Exemplo:
{{ 'css/style-colors.scss.tpl' | static_url | css_tag }}script_tag
Converte para uma tag HTML "script" com type=”text/javascript”. Se adicionarmos entre parênteses a palavra "true", esse script será async.
Exemplo:
{{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' | script_tag(true) }}translate
Traduz todo o texto considerando o arquivo translations.txt
Exemplo:
<p>{{ “Hola” | translate }}</p>money
Converte um número na moeda definida pelo administrador da loja. Inclui decimais e formato monetário.
Exemplo:
{{ product.price | money }}has_custom_image
Verifique se na seção “Personalizar seu layout atual”, a funcionalidade tem uma imagem carregada.
Exemplo:
{% if "seal_img.jpg" | has_custom_image %}product_image_url
É a URL da imagem do produto. Você pode adicionar os tamanhos entre parênteses para obter mais informações sobre os tamanhos. Consulte este artigo.
Exemplo:
{{ image | product_image_url('huge') }}settings_image_url
É a URL de uma imagem carregada na seção “Personalizar seu layout atual”. Você também pode usar tamanhos diferentes entre parênteses. Para obter mais informações sobre tamanhos, consulte este artigo.
Exemplo:
{{ slide.image | static_url | settings_image_url('1080p') }}is_external
Verifica se um link em um menu configurado no Administrador Nuvem tem um “target=”_blank”
Exemplo:
{% if item.url | is_external %}a_tag
Converte em um elemento "a" do HTML . Nós passamos como parâmetros a URL do link e uma classe.
Exemplo:
{{ "Mi cuenta" | translate | a_tag(store.customer_home_url, '', 'nav-accounts-link') }}img_tag
Converte o elemento img do HTML. Podemos adicionar como parâmetros um "alt" e uma classe.
Exemplos:
Sem parâmetros:
{{'placeholder-product.png' | static_url | img_tag}}Com parâmetros:
{{ store.logo('medium') | img_tag(store.name, {class: 'logo-img transition-soft-slow'}) | a_tag(store.url) }}take
Simplesmente pega uma certa quantidade de algo (por exemplo, produtos) e a exibe. Entre parênteses, passamos a quantidade que queremos.
Exemplo:
{% set search_suggestions = products | take(6) %}shuffle
Mistura uma quantidade de elementos.
Exemplo:
{% set related_products = sections.primary.products | take(4) | shuffle %}highlight
Adiciona a tag HTML "strong" a uma string
Exemplo:
{{ product.name | highlight(query) }}Para mais informações sobre os filtros Twig recomendamos o seu site oficial