Vista de produto 360° (df360spin): documentação

Apresentação

A Vista de Produto 360° (df360spin) acrescenta às suas fichas de produto um visualizador interativo que reconstitui uma rotação completa do artigo a partir de uma simples sequência de imagens. O visitante arrasta o produto com o rato ou com o dedo para o fazer rodar, com reprodução automática, ecrã inteiro, contador de imagens e navegação pelo teclado. O módulo não substitui qualquer template: insere-se através de um hook de apresentação que você escolhe.

Preparar as imagens

Fotografe o produto num prato giratório, tirando um número regular de vistas igualmente espaçadas, com o mesmo enquadramento e a mesma iluminação. Rode o prato num ângulo constante entre cada disparo (por exemplo, 10° para 36 imagens, ou seja, 360° a dividir por 36).

Número de imagens recomendado

• 24 imagens (15° por passo): rotação correta, sequência leve.
• 36 imagens (10° por passo): bom compromisso entre fluidez e peso, recomendado na maioria dos casos.
• 72 imagens (5° por passo): rotação muito fluida para produtos de valor elevado, com sequência mais pesada.

O módulo aceita até 120 fotogramas por sequência. Abaixo de 24 imagens, a rotação parece aos solavancos.

Nomes e formato

Dê aos ficheiros nomes pela ordem da rotação, com números precedidos de zeros, para garantir a ordenação correta: frame_01.jpg, frame_02.jpg e assim por diante. O módulo ordena automaticamente as imagens pelo nome do ficheiro na importação. Exporte em JPG, PNG ou WebP, com um tamanho coerente. As imagens mais largas do que a largura máxima configurada são redimensionadas automaticamente do lado do servidor.

Instalação

1. No back-office, abra Módulos > Gestor de módulos, clique em Carregar um módulo e selecione o ficheiro ZIP df360spin.
2. Depois de instalado, clique em Configurar para definir as opções globais.
3. Aparece um novo separador Vistas 360° Spin em Catálogo, para gerir as suas sequências.

Definições globais

Na página de configuração do módulo, define o comportamento predefinido de todos os visualizadores:

• Posição de apresentação: por baixo das miniaturas do produto (recomendado), no bloco de informações complementares ou no rodapé da ficha de produto.
• Reprodução automática predefinida: inicia a rotação contínua no carregamento. Pode ser substituída sequência a sequência, se for preciso.
• Velocidade de reprodução (ms por imagem): tempo de apresentação de cada imagem na reprodução automática. Quanto mais baixo o valor, mais rápida a rotação. A título indicativo, 60 ms em 36 imagens dão uma volta completa em cerca de 2 segundos.
• Sensibilidade do arrasto: número de píxeis de deslocamento necessários para avançar uma imagem. Um valor baixo torna a rotação mais reativa.
• Largura máxima dos fotogramas (px): acima desta largura, as imagens importadas são redimensionadas automaticamente.
• Carregamento diferido: só carrega as imagens quando o visualizador entra na zona visível do ecrã.

Criar uma sequência 360°

1. Abra Catálogo > Vistas 360° Spin e clique em Adicionar uma sequência 360°.
2. No campo Produto, escreva o nome, a referência ou o identificador do produto: aparece uma lista de sugestões, onde seleciona o produto certo.
3. Deixe a sequência ativa e escolha o modo de reprodução automática (usar a definição global, ativado ou desativado).
4. Grave: aparece o painel de gestão dos fotogramas.

Importar e ordenar os fotogramas

1. Arraste as suas imagens para a zona de largada, ou clique para as selecionar. Pode enviar várias de uma vez.
2. As imagens são importadas por lotes, com uma barra de progresso, e ordenadas depois pelo nome do ficheiro.
3. Reorganize a ordem arrastando as miniaturas; a nova ordem é gravada automaticamente.
4. Passe o cursor sobre uma miniatura e clique na cruz vermelha para eliminar uma imagem.
5. Clique em Pré-visualizar a rotação para rever a sequência no próprio back-office, antes de publicar.

Utilização do lado do cliente

Na ficha de produto, o visitante arrasta o produto para o fazer rodar nos dois sentidos, com o rato ou com o dedo, e com inércia no fim do gesto. A barra de controlo oferece um botão de reprodução e pausa, um contador de imagens e um botão de ecrã inteiro. No teclado, as setas para a esquerda e para a direita avançam imagem a imagem, e a barra de espaço inicia ou faz pausa na rotação. A preferência de sistema de movimento reduzido é respeitada: a reprodução automática não arranca se o utilizador a tiver desativado no seu sistema.

Resolução de problemas

O visualizador não aparece

Confirme que a sequência está ativa, que contém pelo menos duas imagens e que a posição de apresentação escolhida nas definições corresponde a um hook presente no seu tema. O módulo visa os temas baseados no classic.

A rotação está aos solavancos

Aumente o número de imagens da sequência (aponte a 36 ou mais) e verifique a regularidade do ângulo entre cada disparo.

As imagens são pesadas a carregar

Deixe o carregamento diferido ativo, reduza a largura máxima dos fotogramas nas definições e prefira o formato WebP na exportação.

Compatibilidade

• PrestaShop 8.0 a 9.x, tema classic e temas filhos.
• Multiloja: uma sequência por produto e por loja.
• Ecrã tátil e rato, ecrã inteiro do navegador.
• JavaScript nativo sem jQuery e sem overrides de template.