Banners - Yampi Developer Portal

O componente Banners busca e renderiza banners cadastrados no painel da Yampi. Suporta exibição estática ou em carrossel, com controle de dimensões para desktop e mobile.

Uso

<banners
  section="main_banner"
  :ids="{{ section.banners | map(b => b.id) | json_encode }}"
  :carousel="true"
  :slider-delay="5"
  :first-banner="{{ section.banners[0] | json_encode }}"
  :dimensions="{{ section.dimensions | json_encode }}"
/>

Propriedades

Propriedade	Tipo	Obrigatória	Valor padrão	Descrição
`section`	`String`	✅	—	Identificador da seção onde o banner será exibido. Usado internamente para cache e rastreamento.
`ids`	`Array`	✅	—	Lista de IDs dos banners a serem carregados via API.
`container`	`Boolean`	❌	`true`	Quando `false`, o banner ocupa a largura total da tela ignorando o container padrão.
`carousel`	`Boolean`	❌	`false`	Exibe os banners em carrossel com navegação entre slides.
`sliderDelay`	`Number`	❌	`0`	Intervalo em segundos para troca automática de slides. `0` desativa a troca automática.
`quantity`	`Number`	❌	`0`	Quantidade de banners exibidos por linha quando `carousel` é `false`.
`dimensions`	`Object`	❌	`{}`	Dimensões do banner para exibição antes do carregamento (evita layout shift). Ver objeto `dimensions`.
`firstBanner`	`Object`	❌	`null`	Dados do primeiro banner para renderização SSR imediata. Ver objeto `firstBanner`.
`slug`	`String`	❌	`''`	Slug de uma categoria ou promoção associada ao banner (utilizado para redirecionamento).
`autoHeight`	`Boolean`	❌	`false`	Ajusta a altura do banner automaticamente de acordo com a imagem carregada.
`autoWidth`	`Boolean`	❌	`false`	Ajusta a largura do banner automaticamente de acordo com a imagem carregada.
`customClass`	`String`	❌	`''`	Classe CSS extra aplicada ao elemento raiz do componente.

Objeto `firstBanner`

Usado para renderizar o primeiro banner imediatamente, sem aguardar a chamada à API. Ideal para performance em banners acima da dobra.

Propriedade	Tipo	Obrigatória	Valor padrão	Descrição
`id`	`Number`	✅	—	ID do banner.
`image`	`String`	✅	—	URL da imagem para desktop.
`mobile_image`	`String`	❌	—	URL da imagem para mobile. Se ausente, usa `image`.
`link`	`String`	❌	—	URL de redirecionamento ao clicar no banner.
`stopwatch`	`String`	❌	`null`	Exibe um cronômetro sobre o banner. Valores: `null` ou `'daily'`.

Objeto `dimensions`

Define as dimensões reservadas antes do carregamento da imagem, prevenindo layout shift (CLS).

Propriedade	Tipo	Obrigatória	Descrição
`desktop`	`Object`	❌	Objeto `{ height: Number, width: Number }` em pixels para desktop.
`mobile`	`Object`	❌	Objeto `{ height: Number, width: Number }` em pixels para mobile.