Skip to main content
A CentralCart utiliza a engine Liquid para renderizar os templates. Porém, os delimitadores são diferentes do Liquid padrão. Em vez de {% %} e {{ }}, utilizamos delimitadores personalizados.

Delimitadores

TipoSintaxe CentralCartLiquid Padrão
Tags (lógica)<% tag %>{% tag %}
Output (exibição)<%= variavel %>{{ variavel }}
A CentralCart não utiliza a sintaxe padrão do Liquid ({% %} e {{ }}). Sempre use <% %> e <%= %> nos seus templates.

Blocos de código

Além dos delimitadores padrão, você pode usar a sintaxe de bloco com o alias centralcart:
<% centralcart
  assign title = "Minha Loja"
  assign description = "Bem-vindo!"
centralcart %>
Isso é equivalente a escrever múltiplas tags separadas. É útil para agrupar lógica em um único bloco.

Exibindo variáveis

Para exibir o valor de uma variável, use os delimitadores de output:
<h1><%= store.name %></h1>
<p>Bem-vindo à <%= store.name %>!</p>

Condicionais

Use if, elsif, else e unless para lógica condicional:
<% if user %>
  <p>Olá, <%= user.name %>!</p>
<% else %>
  <p>Faça login para continuar.</p>
<% endif %>

<% unless store.maintenance %>
  <main>Conteúdo da loja</main>
<% endunless %>

Loops

Use for para iterar sobre listas:
<% for category in categories %>
  <div class="category">
    <h2><%= category.name %></h2>
    <p><%= category.slug %></p>
  </div>
<% endfor %>
Variáveis especiais dentro de loops:
VariávelDescrição
forloop.indexÍndice atual (começa em 1)
forloop.index0Índice atual (começa em 0)
forloop.firsttrue se for a primeira iteração
forloop.lasttrue se for a última iteração
forloop.lengthNúmero total de iterações

Atribuição de variáveis

Use assign para criar variáveis locais:
<% assign formatted_price = package.pricing.price | format_price %>
<p>Preço: <%= formatted_price %></p>
Use capture para capturar um bloco de texto em uma variável:
<% capture greeting %>
  Olá, <%= user.name %>! Bem-vindo à <%= store.name %>.
<% endcapture %>

<div class="banner"><%= greeting %></div>

Filtros

Filtros transformam o valor de uma variável. São aplicados com o caractere |:
<%= "texto em maiúsculas" | upcase %>
<%= package.pricing.price | format_price %>
<%= "imagem.png" | cdn %>
Você pode encadear múltiplos filtros:
<%= store.name | upcase | truncate: 20 %>
Veja todos os filtros customizados disponíveis na página de Filtros.

Operadores de comparação

OperadorDescrição
==Igual
!=Diferente
>Maior que
<Menor que
>=Maior ou igual
<=Menor ou igual
containsContém (para strings e arrays)
andE lógico
orOu lógico

Exemplo completo

<% layout 'layouts/main' %>

<div class="products">
  <% for category in categories %>
    <section>
      <h2><%= category.name %></h2>

      <% if category.sub_categories.size > 0 %>
        <div class="subcategories">
          <% for sub in category.sub_categories %>
            <a href="/category/<%= sub.slug %>"><%= sub.name %></a>
          <% endfor %>
        </div>
      <% endif %>
    </section>
  <% endfor %>
</div>
Se você tiver qualquer dúvida, entre em contato com a nossa equipe de suporte em nosso WhatsApp e Discord.