Página do Produto

Componentes prontos (`<fz-*>`)

Cada bloco pode aparecer no máximo 1 vez, em qualquer ordem e posição:

Bloco	O que exibe
`<fz-produto-galeria>`	Fotos do produto (carrossel com zoom)
`<fz-produto-identificacao>`	Nome, categoria, SKU e avaliações do cabeçalho
`<fz-produto-precos>`	Preço, descontos e simulador de parcelas
`<fz-produto-selecao>`	Variações, grade, kit e quantidade
`<fz-produto-frete>`	Simulador de frete
`<fz-produto-acoes-compra>`	Botão de comprar e ações (carrinho, WhatsApp, compartilhar)
`<fz-produto-descricao>`	Descrição, guia de medidas e widgets
`<fz-produto-relacionados>`	Vitrine oficial de produtos relacionados
`<fz-produto-cupons>`	Cupons divulgáveis da loja
`<fz-produto-comentarios>`	Perguntas e respostas (respeita a config da loja)
`<fz-produto-avaliacoes>`	Avaliações verificadas

Três blocos são obrigatórios e únicos: precos, selecao e acoes-compra (exatamente 1× cada, fora de @if/@foreach). Os demais são opcionais (0..1) — ausente significa seção oculta.

Props visuais por bloco

Atributos no bloco viram props do componente (="false" funciona como falso). Valores fora do permitido caem no padrão:

Bloco	Prop	Valores	Padrão	Efeito
`galeria`	`altura-fixa`	`true`/`false`	`false`	Altura fixa do carrossel em vez de automática
`galeria`	`miniaturas-horizontais`	`true`/`false`	`false`	Miniaturas sempre horizontais (padrão: vertical no desktop)
`precos`	`alinhamento`	`centro`/`esquerda`/`direita`	`esquerda`	Alinhamento do bloco de preço
`precos`	`variacao`	`completo`/`compacto`	`completo`	`compacto` resume preço antigo/“a partir de”/badge
`precos`	`modelo-melhor-desconto`	`padrao`/`compacto`	`padrao`	Densidade do bloco de melhor desconto
`precos`	`exibir-simulador-melhor-desconto`	`true`/`false`	`true`	Mostra/oculta o bloco de melhor desconto
`precos`	`abrir-modal`	`true`/`false`	`true`	Clique no simulador abre o modal de parcelas
`selecao`	`exibir-preco`	`true`/`false`	`true`	Mostra/oculta preço nas variações
`selecao`	`exibir-sku`	`true`/`false`	`true`	Mostra/oculta tag de SKU
`selecao`	`exibir-divisoria`	`true`/`false`	`false`	Divisória “Escolha as Variações”
`selecao`	`exibir-descontos`	`true`/`false`	`true`	Ícones de desconto
`selecao`	`modelo-condensado`	`true`/`false`	`false`	Versão compacta do seletor
`selecao`	`variacoes-isoladas`	`true`/`false`	`false`	Cartão com sombra/borda (`true`) ou integrado (`false`)
`selecao`	`rolar-aba-ativa`	`true`/`false`	`true`	Rola até a aba ativa (grade com abas)
`frete`	`exibir-titulo`	`true`/`false`	`true`	Divisória “Simular Frete”
`descricao`	`exibir-titulo`	`true`/`false`	`true`	Títulos de descrição/guia/widgets
`relacionados`	`exibir-titulo`	`true`/`false`	`true`	Título da vitrine
`comentarios`	`layout`	`modelo1`/`modelo2`	`modelo1`	`modelo2` = busca + acordeão
`comentarios`	`exibir-titulo`	`true`/`false`	`true`	Título (só no `modelo1`)
`avaliacoes`	`layout`	`modelo1`/`modelo2`	`modelo1`	`modelo1` = cards; `modelo2` = resumo + lista compacta
`avaliacoes`	`exibir-titulo`	`true`/`false`	`true`	Título (só no `modelo1`)

identificacao, acoes-compra e cupons não têm props visuais. Exemplo:

<fz-produto-precos alinhamento="esquerda" variacao="compacto"></fz-produto-precos>
<fz-produto-selecao exibir-divisoria="false" modelo-condensado="true"></fz-produto-selecao>
<fz-produto-avaliacoes layout="modelo2"></fz-produto-avaliacoes>

Dados — `product.*`

Variável	Retorno
`{{ product.name }}`	Nome do produto
`{{ product.referencia }}`	Referência do cadastro (pode ser vazia)
`{{ product.sku }}`	SKU do cadastro
`{{ product.destaque }}`	Flag de destaque (`0`/`1` — não é rótulo; use com `@if`)
`{{ product.categorias }}`	Categorias (leitura)
`{{ product.links }}`	Link da página (para `href`)
`{{ product.imagens }}`	Imagens (para `src`)
`{{ product.avaliacao }}`	Total de avaliações
`{{ product.descricao }}`	Descrição textual
`{{ product.related }}`	Coleção de relacionados (só no `@foreach`)

Preço, estoque, variações e regras comerciais não são dados manipuláveis: continuam dentro dos blocos oficiais.

Itens do loop — `item.*`

Dentro de @foreach(product.related as item):

Variável	Retorno
`{{ item.name }}`	Nome do relacionado
`{{ item.url }}`	Link (para `href`)
`{{ item.image }}` / `{{ item.image_thumb }}`	Imagens (para `src`)
`{{ item.id }}` / `{{ item.destaque }}`	Identificador e flag de destaque

Diretivas

@if(product.destaque)
    <p class="produto-destaque">Destaque</p>
@endif

@if(product.campo) — mostra o trecho quando o campo tem valor (0 e vazio contam como falso). Serve para badge fixa condicional.

@if(feature('...')) — mesmos predicados das demais áreas (ex.: reviews).

@foreach(product.related as item limit 4) — única coleção; sem loops aninhados.

Exemplo starter resumido

<div class="produto-layout">
    <div class="produto-topo">
        <div class="produto-col-midia">
            <fz-produto-galeria></fz-produto-galeria>
        </div>
        <div class="produto-col-info">
            @if(product.destaque)
            <p class="produto-destaque">Destaque</p>
            @endif
            <fz-produto-identificacao></fz-produto-identificacao>
            <fz-produto-precos></fz-produto-precos>
            <fz-produto-selecao></fz-produto-selecao>
            <fz-produto-frete></fz-produto-frete>
            <fz-produto-cupons></fz-produto-cupons>
            <fz-produto-acoes-compra></fz-produto-acoes-compra>
            <p class="produto-meta">SKU {{ product.sku }}</p>
        </div>
    </div>
    <fz-produto-descricao></fz-produto-descricao>
    <fz-produto-relacionados></fz-produto-relacionados>
    <fz-produto-comentarios></fz-produto-comentarios>
    <fz-produto-avaliacoes></fz-produto-avaliacoes>
</div>

Padrões CSS prontos

Todo CSS é escopado automaticamente (sem html, body ou *):

Erros comuns

Erro	Causa	Correção
`BLOCO_DESCONHECIDO`	Tag fora dos 11 blocos (ex.: `fz-produto-conteudo-adicional`, removido)	Trocar por blocos da tabela acima
`CARDINALIDADE_CRITICA`	Bloco crítico ausente/duplicado, ou bloco repetido	`precos/selecao/acoes-compra` exatamente 1×; demais no máximo 1×
`CRITICO_CONDICIONAL`	Bloco crítico dentro de `@if`/`@foreach`	Tirar o bloco da condição
`CAMINHO_NAO_REGISTRADO`	`{{ product.* }}` inexistente (ex.: `product.price`) ou fora do modo produto	Usar a tabela de dados acima

Componentes prontos (<fz-*>)#

Props visuais por bloco#

Dados — product.*#

Itens do loop — item.*#

Diretivas#

Exemplo starter resumido#

Padrões CSS prontos#

Erros comuns#