A estrutura de pastas padrão inclui layouts (ex.:
layouts/layout.tpl),
templates de páginas (home, categoria, produto, etc.),
snipplets (componentes reutilizáveis) e a pasta static (imagens, CSS, JS). Consulte a documentação das páginas em
docs.nuvemshop.com.br.
Variáveis e interpolação
TWIG
{% set nome = 'Camisa' %}
<p>{{ nome }}</p>
{% set produto = { 'nome': 'Camisa', 'preco': 99.9 } %}
<p>{{ produto.nome }} - R$ {{ produto.preco }}</p>JavaScript
const nome = 'Camisa';
document.body.innerHTML += `${nome}
`;
const produto = { nome: 'Camisa', preco: 99.9 };
document.body.innerHTML += `${produto.nome} - R$ ${produto.preco}
`;PHP
$nome = 'Camisa';
echo "$nome
";
$produto = [ 'nome' => 'Camisa', 'preco' => 99.9 ];
echo "{$produto['nome']} - R$ {$produto['preco']}
";Condicionais (if / elseif / else)
TWIG
{% set estoque = 5 %}
{% set pre_venda = false %}
{% if estoque > 0 %}
Em estoque
{% elseif pre_venda %}
Pré-venda
{% else %}
Esgotado
{% endif %}JavaScript
const estoque = 5;
const preVenda = false;
let status;
if (estoque > 0) status = 'Em estoque';
else if (preVenda) status = 'Pré-venda';
else status = 'Esgotado';PHP
$estoque = 5;
$preVenda = false;
if ($estoque > 0) {
$status = 'Em estoque';
} elseif ($preVenda) {
$status = 'Pré-venda';
} else {
$status = 'Esgotado';
}Ternário e valor padrão (null coalescing)
TWIG
{# Ternário #}
{% set badge = (estoque > 0) ? 'success' : 'danger' %}
{# Valor padrão com default #}
{{ titulo | default('Sem título') }}
{# Null coalescing (quando disponível) #}
{{ subtitulo ?? 'Opcional' }}JavaScript
const badge = estoque > 0 ? 'success' : 'danger';
const tituloExibido = titulo ?? 'Sem título';PHP
$badge = $estoque > 0 ? 'success' : 'danger';
$tituloExibido = $titulo ?? 'Sem título';Iterar lista (arrays)
TWIG
{% set tags = 'promoção,camisas,verão' | split(',') %}
<ul>
{% for tag in tags %}
<li>{{ tag }}</li>
{% endfor %}
</ul>JavaScript
const tags = 'promoção,camisas,verão'.split(',');
const ul = document.createElement('ul');
for (const tag of tags) {
const li = document.createElement('li');
li.textContent = tag;
ul.appendChild(li);
}PHP
$tags = explode(',', 'promoção,camisas,verão');
echo '';
foreach ($tags as $tag) {
echo "- $tag
";
}
echo '
';Loop por faixa (range)
TWIG
{% for i in 1..5 %}
{{ i }}
{% endfor %}JavaScript
for (let i = 1; i <= 5; i += 1) {
console.log(i);
}PHP
for ($i = 1; $i <= 5; $i += 1) {
echo $i;
}Vazio / Existência
TWIG
{% if tags is empty %}
Sem tags
{% endif %}
{% if produto is defined %}
{{ produto.nome }}
{% endif %}JavaScript
if (!tags || tags.length === 0) {
console.log('Sem tags');
}
if (typeof produto !== 'undefined') {
console.log(produto.nome);
}PHP
if (empty($tags)) {
echo 'Sem tags';
}
if (isset($produto)) {
echo $produto['nome'];
}Comparações e operadores úteis
TWIG
{% set preco = 120 %}
{% set tags = ['promoção', 'camisas'] %}
{% if preco >= 100 and preco < 200 %}Faixa média{% endif %}
{% if 'promoção' in tags %}Tem promoção{% endif %}
{% if 'inverno' not in tags %}Sem inverno{% endif %}JavaScript
const preco = 120;
const tags = ['promoção', 'camisas'];
if (preco >= 100 && preco < 200) console.log('Faixa média');
if (tags.includes('promoção')) console.log('Tem promoção');
if (!tags.includes('inverno')) console.log('Sem inverno');PHP
$preco = 120;
$tags = ['promoção', 'camisas'];
if ($preco >= 100 && $preco < 200) echo 'Faixa média';
if (in_array('promoção', $tags, true)) echo 'Tem promoção';
if (!in_array('inverno', $tags, true)) echo 'Sem inverno';Render condicional de atributos/estilos (com settings)
TWIG (Nuvemshop)
{# classes condicionais #}
<button class="btn {{ settings.header_colors ? 'btn-primary' : 'btn-secondary' }}"
style="color: {{ settings.text_color }}; background-color: {{ settings.background_color }};">
Comprar
</button>
{# atributo existente somente se houver link #}
<a {% if settings.menu_banner_mobile_url %}href="{{ settings.menu_banner_mobile_url }}"{% endif %}>
Banner
</a>JavaScript
const settings = {
header_colors: true,
text_color: '#111',
background_color: '#f2f2f2',
menu_banner_mobile_url: 'https://exemplo.com'
};
const cls = `btn ${settings.header_colors ? 'btn-primary' : 'btn-secondary'}`;
const style = `color:${settings.text_color};background-color:${settings.background_color};`;
const href = settings.menu_banner_mobile_url ? ` href="${settings.menu_banner_mobile_url}"` : '';
const html = `` +
`Banner`;PHP
$settings = [
'header_colors' => true,
'text_color' => '#111',
'background_color' => '#f2f2f2',
'menu_banner_mobile_url' => 'https://exemplo.com',
];
$cls = 'btn ' . ($settings['header_colors'] ? 'btn-primary' : 'btn-secondary');
$style = 'color:' . $settings['text_color'] . ';background-color:' . $settings['background_color'] . ';';
$href = !empty($settings['menu_banner_mobile_url']) ? ' href="' . $settings['menu_banner_mobile_url'] . '"' : '';
echo '';
echo 'Banner';Alguns outros pontos importantes
{{ product.name | raw }}
{# Se product.name = "<b>Camisa</b>", renderiza Camisa em negrito #}
{{ product.name | upper }} {# CAMISA POLO #}
{{ product.name | lower }} {# camisa polo #}
{% set tags = product.tags | split(',') %}
<ul>
{% for tag in tags %}
<li>{{ tag }}</li>
{% endfor %}
</ul>
{# Se product.tags = "promoção,camisas,verão" #}
{{ (product.tags | split(','))[0] | capitalize }} {# Primeira tag em maiúscula #}
{{ (product.tags | split(',')) | last | lower }} {# Última tag em minúscula #}
{# Loop com filtro aplicado #}
{% for tag in product.tags | split(',') %}
<span class="tag">{{ tag | trim | upper }}</span>
{% endfor %}