Componentes prontos

Componentes prontos (`<fz-*>`)

Atendem a necessidades comuns (logo, busca, carrinho, menus, newsletter...). Já vêm com HTML acessível; basta inserir a tag.

Componente	Onde usar	O que faz
`<fz-logo>`	Cabeçalho ou rodapé	Logotipo com link para a home
`<fz-cart-button>`	Cabeçalho	Botão do carrinho
`<fz-account-button>`	Cabeçalho	Botão da conta do visitante
`<fz-search>`	Cabeçalho	Botão de busca
`<fz-newsletter>`	Rodapé	Formulário de newsletter
`<fz-social-links>`	Cabeçalho ou rodapé	Redes sociais da loja
`<fz-payment-methods>`	Rodapé	Métodos de pagamento
`<fz-policy-links>`	Rodapé	Políticas da loja
`<fz-store-verification>`	Rodapé	Selo de loja verificada
`<fz-icon>`	Em qualquer lugar	Ícone Font Awesome via `data-fz-name`
`<fz-powered-by>`	Rodapé (ou cabeçalho)	Selo "Loja virtual criada com" — usa o logo white-label da loja quando ativo

<fz-powered-by></fz-powered-by>
<fz-powered-by data-fz-variant="white"></fz-powered-by>

<header>
  <fz-logo></fz-logo>
  <nav>
    <fz-search></fz-search>
    <fz-account-button></fz-account-button>
    <fz-cart-button></fz-cart-button>
  </nav>
</header>

<fz-icon data-fz-name="shopping-cart"></fz-icon>

Opções de apresentação

Componente	Atributo	Valores	Padrão
`<fz-social-links>`	`data-fz-show-icon` / `data-fz-show-text`	`true` / `false`	`false` / `true`
`<fz-account-button>`	`data-fz-show-icon` / `data-fz-show-text`	`true` / `false`	`true` / `true`
`<fz-account-button>`	`data-fz-label`	texto livre	`"Conta"`
`<fz-cart-button>`	`data-fz-show-icon` / `data-fz-show-text`	`true` / `false`	`true` / `true`
`<fz-cart-button>`	`data-fz-show-summary`	`true` / `false`	`false`
`<fz-payment-methods>`	`data-fz-show-icon` / `data-fz-show-text`	`true` / `false`	`true` / `true`
`<fz-social-links>`	`data-fz-show-whatsapp` / `data-fz-show-portal`	`true` / `false`	`false` / `false`

Menus são manuais puros (@foreach, ver 05-menus.md) — não há componentes de menu.

Se data-fz-show-icon e data-fz-show-text forem false, o componente some.

<fz-search-button> é alias antigo de <fz-search>; <fz-category-menu> é legado.

Ações (`data-fz-action`)

Botões com data-fz-action abrem recursos da plataforma: cart, search, account, visitor-login, stories, store-info, payment-methods, delivery-methods, policies, policy, newsletter, menu-mobile, how-to-buy, reviews. Exemplo: um botão hambúrguer no cabeçalho personalizado abre o drawer com data-fz-action="menu-mobile".

Para abrir uma política direto no modal (como os modelos fixos), use policy com data-fz-policy:

Sem data-fz-policy válido, abre a lista geral de políticas.