PrestaShop Design & Navegação

Vista de Produto 360° PrestaShop: Visualizador de Rotação por Sequência de Imagens

Vista de produto 360° interativa por sequência de imagens: rotação por arrastar com rato e por toque, reprodução automática, ecrã inteiro e lazy loading.

Deixe os seus clientes rodarem o produto a 360°: um visualizador de rotação fluido, construído a partir de uma simples sequência de imagens, sem tocar no seu tema.

At a glance
  • Rotação por arrastar com rato e por toque com inércia, construída a partir de uma sequência de imagens 360°
  • Reprodução automática, ecrã inteiro, contador de imagens e navegação por teclado
  • Lazy loading: as imagens carregam quando o visualizador entra no ecrã
  • Gestão das imagens por arrastar e largar: importação múltipla, reordenação, pré-visualização e redimensionamento automático
  • PrestaShop 8 e 9, sem overrides, uma sequência por produto gerida por loja, JavaScript vanilla sem jQuery
PrestaShop 8 e 9 Arrastar e tátil Reprodução automática Ecrã inteiro Lazy loading
  • Reembolso em 30 dias
  • 12 meses de atualizações
  • Suporte em 24h
www.datafirefly.com/pt/
Visualizador 360° a rodar um produto numa ficha PrestaShop
v1.0.0 · atualizado 2026-07-16
O que faz

A versão curta.

01

Uma rotação que responde ao gesto

O visualizador assenta nos Pointer Events: o visitante arrasta o produto com o rato ou com o dedo para o fazer rodar, com uma sensibilidade ajustável e uma inércia natural no fim do gesto. A rotação mantém-se fluida no telemóvel e no computador, sem dependência de jQuery nem de bibliotecas externas.

02

Reprodução automática e ecrã inteiro

A sequência pode arrancar sozinha em rotação contínua, a uma velocidade configurável, com botão de reprodução e pausa e contador de imagens. O modo de ecrã inteiro amplia o produto para uma inspeção detalhada, e tanto as setas do teclado como a barra de espaços controlam a rotação. A definição de reprodução automática pode ser global ou substituída sequência a sequência.

03

Gestão das imagens sem atrito

No back-office, associa uma sequência a um produto através de uma pesquisa instantânea e larga depois todas as suas imagens de uma vez na zona de depósito. São ordenadas por nome de ficheiro, importadas por lotes com barra de progresso, reordenáveis por arrastar e largar e elimináveis uma a uma. Uma pré-visualização repete a rotação antes de publicar.

04

Pensado para a velocidade da ficha de produto

As imagens da sequência só são carregadas quando o visualizador entra na zona visível, graças a um observador de interseção, com uma barra de progresso durante o pré-carregamento. As imagens demasiado largas são redimensionadas automaticamente na importação segundo uma largura máxima configurável, para um peso controlado e um resultado nítido.

A versão longa

Tudo o que quer saber antes de instalar.

Uma análise detalhada de como o Vista de Produto 360° PrestaShop: Visualizador de Rotação por Sequência de Imagens funciona, porque o construímos assim e o raciocínio por trás das funcionalidades acima.

§ 01

A vista 360° sem estúdio nem formatos proprietários

Não é preciso um digitalizador 3D nem um formato de ficheiro exótico: uma vista 360° é apenas uma série de fotografias tiradas à volta do produto, normalmente num prato giratório. Fotografa 24, 36, 48 ou 72 imagens regularmente espaçadas, com o mesmo enquadramento e a mesma iluminação, dá-lhes nomes por ordem, e o visualizador reconstitui a rotação. O módulo trata da importação, da ordenação, do redimensionamento e da apresentação, e você mantém o controlo sobre a captação.

§ 02

Uma interação natural em todos os ecrãs

Construído sobre os Pointer Events, o visualizador trata da mesma forma o rato e o toque. O visitante agarra o produto e roda-o no sentido que quiser; no fim do gesto, uma inércia prolonga a rotação e depois abranda-a progressivamente. A sensibilidade ajusta-se ao número de imagens da sua sequência. No teclado, as setas avançam imagem a imagem e a barra de espaços inicia ou põe em pausa a reprodução automática.

§ 03

Rápido por predefinição e discreto para o seu tema

As imagens só são descarregadas quando o visualizador fica visível no ecrã, o que evita pesar no carregamento inicial da ficha de produto. Uma barra de progresso informa o visitante durante o pré-carregamento e a rotação fica depois disponível. Na importação, cada imagem mais larga do que o limite definido é redimensionada no servidor, para um peso controlado sem perda de nitidez. O módulo não substitui qualquer template: insere-se através de um hook de apresentação à sua escolha.

§ 04

Um back-office pensado para ser rápido

A partir do separador dedicado do catálogo, cria uma sequência, encontra o produto por uma pesquisa instantânea pelo nome, pela referência ou pelo identificador, e larga depois todas as suas imagens num só gesto. São ordenadas por nome de ficheiro para respeitar a ordem de captação, importadas por lotes com uma barra de progresso, e depois reordenáveis por arrastar e largar e elimináveis uma a uma. Um botão de pré-visualização repete a rotação diretamente na administração antes de publicar.