Skip to main content
O componente ProductZoom renderiza a galeria de imagens do produto com carrossel principal e navegação por miniaturas. Em mobile, exibe um indicador de posição (ex.: 2/5) e suporta zoom por pinça. As imagens são atualizadas automaticamente quando o SKU selecionado muda.

​
Uso

<product-zoom
  :has-video="true"
  :thumb-width="80"
  :thumb-height="80"
/>

​
Propriedades

PropriedadeTipoObrigatóriaValor padrãoDescrição
hasVideoBoolean❌falseExibe o item de vídeo no carrossel. Requer que o produto tenha um vídeo cadastrado.
thumbWidthNumber❌0Largura das miniaturas em pixels. 0 usa o valor padrão do tema.
thumbHeightNumber❌0Altura das miniaturas em pixels. 0 usa o valor padrão do tema.

​
Mixins utilizados

MixinFinalidade
productMixinAcesso ao produto, SKU selecionado e lista de imagens.
mobileMixinDetecção de dispositivo para habilitar zoom e indicador de posição.

​
Comportamentos automáticos

  • Troca de SKU: ao selecionar um SKU diferente, o carrossel atualiza automaticamente para as imagens correspondentes.
  • Lazy loading: imagens de alta resolução são carregadas progressivamente conforme o usuário navega no carrossel.
  • Responsividade: em desktop exibe miniaturas clicáveis; em mobile exibe indicador de posição e habilita zoom por pinça.