Filtros Liquid

Você pode utilizar :

Você pode utilizar dos filtros nativos do Liquid e dos filtros criados por Olist Ecommerce no seu projeto.

Filtros nativos

Você pode utilizar os filtros nativos do Liquid na sua loja. Para auxiliar na utilização, confira a tabela abaixo com filtros do Liquid e como utilizá-los.

Filtro	Uso	Exemplo
abs	Retorna o valor absoluto de um número. Pode ser utilizado em strings que contenham apenas números.	• Valor absoluto de -17: {{ -17 | abs }} (Resultado: 17) • Valor absoluto de 4: {{ 4 | abs }} (Resultado: 4) • Valor absoluto de -19.86: {{ -19.86 | abs }} (Resultado: 19.86)
append	Concatena duas strings. Pode ser usado com variáveis via assign.	• {{ "/minha/url" | append: ".html" }} • {% assign filename = "/index.html" %} {{ "vnda.com.br" | append: filename }}
at_least	Limita um número a ter um valor mínimo.	• {{ 4 | at_least: 5 }} (Resultado: 5) • {{ 4 | at_least: 3 }} (Resultado: 4)
at_most	Limita um número a ter um valor máximo.	• {{ 4 | at_most: 5 }} (Resultado: 4) • {{ 4 | at_most: 3 }} (Resultado: 3)
capitalize	Passa o primeiro caractere de uma string para maiúsculo. Altera apenas o primeiro caractere.	• {{ "título" | capitalize }} (Resultado: Título)
ceil	Arredonda um número para o número inteiro superior mais próximo.	• Arredondando 1.2: {{ 1.2 | ceil }} (Resultado: 2)
compact	Remove os valores nil de um vetor (array).	-

Filtros de Olist Ecommerce

A Olist Ecommerce possui filtros próprios criados para serem utilizados nas customizações das lojas. Confira a seguir a lista com os filtros próprios e exemplos de uso:

• apply_discount e installments:
  • installments retorna o valor da parcela do produto conforme a quantidade máxima de parcelas.
  • apply_discount considera o preço promocional do produto caso tenha promoção.

{% if product.installments.size > 1 %}
  <p class="parcels">
    {% if product.on_sale %}
      ou {{ product.installments.size }}x de {{ product | apply_discount | installments | money_format }}
    {% else %}
      ou {{ product.installments.size }}x de {{ product.price | installments | money_format }}
    {% endif %}
  </p>
{% endif %}

• client_price: cria promoções para clientes categorizados por alguma tagde cliente.
  Exemplo:

{% assign client_price = product | client_price %}
{% assign product_price = product.price %}
{% if client_price != product_price %}
  {{ product | client_price | money_format }}
  {{ product_price | money_format }}
{% else %}
  {{ product | client_price | money_format }}
{% endif %}

• to_json: passa um objeto liquid no formato objeto json

{% capture javascripts %}
    <script>
      variants_products.push({{ product.variants | to_json }});
    </script>
  {% endcapture %}

• group_images_by_url: agrupa as imagens do produto pela url.

{% assign product_images = product.images | group_images_by_url %}

{% for image in product_images %}
  {{ image }}
{% endfor %}

• max_with_interest e max_without_interest: retorna as parcelas do preço do produto com e sem juros, baseando nos métodos de pagamento da loja

{% assign installments_without_insterest = product.installments | max_without_interest %}
{% assign installments_with_insterest = product.installments | max_with_interest %}

{{ installments_without_insterest.number }}x de {{ installments_without_insterest.price | money_format }} sem juros
ou {{ installments_with_insterest.number }}x de {{ installments_with_insterest.price | money_format }} com juros

• money_format: formata um valor para dinheiro com R$.

{{ product.price | money_format }}

• plural: aplica plural ou singular a partir de um número.

{{ tag.products_count | plural: "item", "itens" }}

• resize: redimensiona uma imagem cadastrada no admin.

<img src="{{ image.url | resize: "50x50" }}" />
<img src="{{ image.url | resize: "50x" }}" />
<img src="{{ image.url | resize: "x50" }}" />

📘 Saiba mais sobre os filtros de Liquid em Liquid Filters.