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
| Tipo | Sintaxe CentralCart | Liquid 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ável | Descrição |
|---|
forloop.index | Índice atual (começa em 1) |
forloop.index0 | Índice atual (começa em 0) |
forloop.first | true se for a primeira iteração |
forloop.last | true se for a última iteração |
forloop.length | Nú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
| Operador | Descrição |
|---|
== | Igual |
!= | Diferente |
> | Maior que |
< | Menor que |
>= | Maior ou igual |
<= | Menor ou igual |
contains | Contém (para strings e arrays) |
and | E lógico |
or | Ou 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.