Filtros

Filtros são operações simples que formatam uma variável ou expressão para serem exibidos para o usuário.

assets_url

Gera um link completo para um asset(Imagem, arquivo JS, etc.)

{% assets_url(string): string %}

Parâmetros

ParâmetroTipoDescrição
stringstring

Retorno

Tipo: string

bool_text

Renderiza os textos true ou false dependendo da condição informada

{% bool_text(condition): string %}

Parâmetros

ParâmetroTipoDescrição
conditionstring

Retorno

Tipo: string

Textos true ou false

boolean

Converte um valor em texto para booleano

{% boolean(value): bool %}

Parâmetros

ParâmetroTipoDescrição
valuestring

Retorno

Tipo: bool

components_url

Gera um link completo para um componente

{% components_url(string): string %}

Parâmetros

ParâmetroTipoDescrição
stringstring

Retorno

Tipo: string

Gera links para incorporação do Google Fonts para a fonte especificada com todos os pesos conhecidos

{% font_link(font): string %}

Exemplo de uso

<link href="{{ nomeDaFonte | font_link }}" rel="stylesheet">
// https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap

Parâmetros

ParâmetroTipoDescrição
fontstringNome da fonte (ex: Inter)

Retorno

Tipo: string

Link do Google Fonts

json_decode

Leitura de uma string JSON

{% json_decode(value): array %}

Parâmetros

ParâmetroTipoDescrição
valuestring

Retorno

Tipo: array

mask

Formata um texto seguindo a máscara informada

{% mask(string, mask): string %}

Exemplo de uso

{{ cep | mask('#####-###') }}
// 12345-678

Parâmetros

ParâmetroTipoDescrição
stringstringTexto a ser formatado
maskstringMáscara (utilize # para representar um dígito)

Retorno

Tipo: string

only_numbers

Remove todos os caracteres não-numéricos de um texto

{% only_numbers(string): string %}

Parâmetros

ParâmetroTipoDescrição
stringstring

Retorno

Tipo: string

vendor_url

Gera um link completo para um arquivo estático

{% vendor_url(file): string %}

Exemplo de uso

<link rel="stylesheet" href="{{ '/css/style.css' | vendor_url }}" media="screen">

Parâmetros

ParâmetroTipoDescrição
filestringNome do arquivo estático

Retorno

Tipo: string

URL completa para o arquivo

youtube_url

Gera links para incorporar vídeos do YouTube, junto com uma thumbnail

{% youtube_url(url): array %}

Parâmetros

ParâmetroTipoDescrição
urlstring

Retorno

Tipo: array

Um array com os campos video com o link de embed do vídeo e thumbnail com o link da thumb

Funções

Funções podem ser usadas para executar cálculos ou ações mais complexas que filtros, retornando valores mais elaborados ou manipulando dados de uma maneira mais específica.

button_bg_color

Retorna a cor para um botão

{% button_bg_color(type, color): string %}

Parâmetros

ParâmetroTipoDescrição
typestringTipo da cor (aceita apenas solid)
colorstringCor desejada

Retorno

Tipo: string

A cor informada se $type for solid ou transparent senão

calculate_colors_contrast

Dados as luminancias relativas das cores primarycoloreprimary_color e secondary_color, calcula qual o contraste entre elas seguindo o guia: https://www.accessibility-developer-guide.com/knowledge/colours-and-contrast/how-to-calculate/#the-formula

{% calculate_colors_contrast(primary_color_luminance, secondary_color_luminance): float %}

Parâmetros

ParâmetroTipoDescrição
primary_color_luminancestring
secondary_color_luminancefloat

Retorno

Tipo: float

color_is_light

Verifica se a cor é clara (true) ou escura (false)

{% color_is_light(color): bool %}

Exemplo de uso

<div class="{{ color_is_light(background_color) ? '-light' : '-dark' }}">

Parâmetros

ParâmetroTipoDescrição
colorstringCor em formato hexadecimal

Retorno

Tipo: bool

font_weight

Retorna o valor do font-weight de uma determinada fonte

{% font_weight(font, weight): int %}

Parâmetros

ParâmetroTipoDescrição
fontstringNome da fonte
weightstringVariação da fonte (regular, medium, bold, black, etc)

Retorno

Tipo: int|null

generate_seo

Gera as tags necessárias para o SEO da página

{% generate_seo(): string %}

Retorno

Tipo: string

get_contrasting_color

Determina qual cor entre defaultcoloredefault_color e alternative_color contrasta mais a cor $primary_color

{% get_contrasting_color(primary_color, default_color, alternative_color): string %}

Parâmetros

ParâmetroTipoDescrição
primary_colorstring
default_colorstring
alternative_colorstring

Retorno

Tipo: string

get_section_file

Retorna o arquivo da respectiva seção

{% get_section_file(section, page): string %}

Exemplo de uso

{{ get_section_file('main_product_content') }}

Parâmetros

ParâmetroTipoDescrição
sectionstring
pagestring

Retorno

Tipo: string

hex_to_rgb

Converte um código em hexa para RGB

{% hex_to_rgb(hex): string %}

Exemplo de uso

{% hex_to_rgb("#000000") %}
"0, 0, 0"

{% hex_to_rgb("#ffffff") %}
"255, 255, 255"

Parâmetros

ParâmetroTipoDescrição
hexstringCódigo hexa

Retorno

Tipo: string

Código RGB

hex_to_rgba

Converte uma cor hexadecimal em RGBA

{% hex_to_rgba(hex, opacity): string %}

Exemplo de uso

{% hex_to_rgba("#000000", 0.5) %}
"0, 0, 0, 0.5"

Parâmetros

ParâmetroTipoDescrição
hexstringCor em hexadecimal
opacityfloatOpacidade desejada (entre 0 e 1)

Retorno

Tipo: string

RGBA calculado

is_color_contrasting

Calcula se as cores primarycoloreprimary_color e secondary_color contrastam, dado um limite default de 10.

{% is_color_contrasting(primary_color, secondary_color, threshold): bool %}

Parâmetros

ParâmetroTipoDescrição
primary_colorstring
secondary_colorfloat

Retorno

Tipo: bool

mix

Retorna o caminho para um arquivo estático a ser compilado

{% mix(path): string %}

Parâmetros

ParâmetroTipoDescrição
pathstring

Retorno

Tipo: string

relative_luminance

Calcula a luminância relativa de uma cor, de acordo com a especificação em https://www.w3.org/TR/WCAG20/#relativeluminancedef

{% relative_luminance(hex_color): float %}

Parâmetros

ParâmetroTipoDescrição
hex_colorstring

Retorno

Tipo: float

social_media_fa

{% social_media_fa(mediaUrl): string %}

Parâmetros

ParâmetroTipoDescrição
mediaUrlstring

Retorno

Tipo: string

strip_mustache

Retira tags específicas da engine de templates Mustache

{% strip_mustache(string): string %}

Parâmetros

ParâmetroTipoDescrição
stringstring

Retorno

Tipo: string

thumborize

Gera uma thumbnail para uma determinada imagem

{% thumborize(url, params): string %}

Exemplo de uso

<img src="{{ thumborize(imageUrl, {"resize": "300x300"}) }}">

Parâmetros

ParâmetroTipoDescrição
urlstringURL da imagem
paramsarrayParâmetros opcionais (para redimensionamento, por exemplo)

Retorno

Tipo: string

type_border_radius

Retorna o border-radius em pixels para determinados formatos

{% type_border_radius(type): string %}

Parâmetros

ParâmetroTipoDescrição
typestringsquare, rounded ou pill

Retorno

Tipo: string

vuetify

Retorna uma propriedade a partir do array informado

{% vuetify(array, varName, path, useMustacheSyntax): string %}

Exemplo de uso

{{ vuetify(product, 'product', 'name') }}

Parâmetros

ParâmetroTipoDescrição
arrayarray
varNamestring
pathstring
useMustacheSyntaxbool

Retorno

Tipo: string