Lookbook Comprável: Shop the Look
Instalar e utilizar o lookbook comprável: criar um look, colocar hotspots, escolher combinações, definir carrossel ou exibição expandida e a compra do look num clique.
O módulo Lookbook Comprável — Shop the Look transforma as suas fotografias de ambiente em montras interativas: coloca pontos clicáveis (hotspots) sobre os produtos visíveis numa imagem, e os seus visitantes podem descobrir cada artigo e adicionar o look completo ao carrinho com um só clique. Esta documentação abrange a instalação, a criação de um look, a escolha das combinações, os modos de exibição e o comportamento na loja.
Compatibilidade
- PrestaShop 8.0 a 8.2
- PrestaShop 9.0
- Loja única e multiloja
- Interface traduzida em 8 idiomas (EN, FR, DE, ES, IT, PL, PT, NL)
- Temas baseados no Classic
Instalação
- Vá a Módulos > Gestor de módulos no seu back-office.
- Clique em Carregar um módulo e selecione o ficheiro
dfshopthelook.zip. - Depois de instalado, surge um novo separador Shop The Look no menu Catálogo.
Na instalação, o módulo regista automaticamente os seus hooks de exibição (página inicial e página de produto) e cria as tabelas necessárias para armazenar os looks e os seus hotspots.
Criar o primeiro look
Abra Catálogo > Shop The Look e clique em Adicionar um novo look.
1. Indicar o título e a imagem
Introduza um título (traduzível por idioma) e, se quiser, uma breve descrição. Carregue depois a imagem do look: JPG, PNG, GIF ou WEBP, 8 MB no máximo, de preferência com pelo menos 1200 px de largura. Assim que seleciona o ficheiro, surge de imediato uma pré-visualização no editor, ainda antes de guardar.
2. Colocar os hotspots
Clique diretamente na imagem no local onde se encontra um produto: abre-se uma janela de pesquisa. Escreva o nome ou a referência do produto e selecione-o na lista (as miniaturas facilitam a identificação).
Pode reposicionar um ponto a qualquer momento arrastando-o com o rato. As coordenadas são guardadas em percentagem, o que garante um posicionamento fiel qualquer que seja o tamanho de exibição da imagem na loja.
3. Escolher a combinação visível na fotografia
Se o produto selecionado tiver combinações, surge um segundo passo: «Que combinação é visível na fotografia?». Escolha a combinação exata mostrada na imagem (por exemplo «Cor: Cru, Tamanho: M»), ou deixe Combinação predefinida se o visual não mostrar nenhuma variante em particular.
Essa combinação continua modificável a qualquer momento: cada ponto da lista sob a imagem dispõe da sua própria lista pendente. Pode assim corrigir uma cor ou um tamanho num look guardado há muito tempo, sem eliminar e voltar a colocar o hotspot.
Se uma combinação fixada for posteriormente removida do catálogo, a lista volta automaticamente a «Combinação predefinida».
4. Gerir a lista de pontos
Sob a imagem, cada hotspot aparece com o seu número, o produto associado, a sua combinação e as suas coordenadas. Utilize o ícone do caixote do lixo para remover um ponto. Pode colocar tantos hotspots quantos precisar e até associar vários pontos ao mesmo produto.
5. Destaque e gravação
Ative Em destaque na página inicial se este look deve alimentar o carrossel da página inicial. Defina a posição (ordem de exibição) e o estado Ativado, e clique em Guardar.
Na lista de looks, uma coluna Em destaque permite alternar esse estado com um só clique, sem abrir o formulário.
Configurar a exibição
Na página de configuração do módulo (Gestor de módulos > Configurar), controla a página inicial e a página de produto de forma independente.
Dois modos à escolha
- Carrossel: vários looks apresentados lado a lado sob a forma de cartões. Um clique abre uma janela imersiva.
- Look único expandido: um só look integrado diretamente na página, imagem à esquerda e lista de produtos à direita, sem qualquer janela pop-up.
Os dois locais configuram-se separadamente: pode, por exemplo, apresentar um grande look expandido na página inicial e um carrossel na página de produto.
Página inicial
Em modo carrossel são mostrados apenas os looks em destaque, até ao limite que definir. Em modo look único, escolha o look pretendido na lista pendente Look a apresentar na página inicial, ou deixe «Primeiro look em destaque».
Se o look selecionado for posteriormente eliminado ou desativado, o módulo passa automaticamente para o primeiro look em destaque, para evitar um bloco vazio na sua página inicial.
Página de produto
Em modo carrossel são mostrados os looks que contêm o artigo consultado, até ao limite definido. Em modo look único é apresentado expandido o look mais pertinente que contém esse artigo. Não é necessária qualquer seleção manual.
Escolha da combinação pelo cliente
A opção Permitir que o cliente altere a combinação apresenta um seletor junto de cada produto na loja. Se desativada, aplicam-se as combinações escolhidas no back office. Ative-a em moda (o cliente escolhe o seu tamanho) e desative-a em decoração se o look deve permanecer fixo.
Na loja
O carrossel
Um carrossel horizontal apresenta os seus looks sob a forma de cartões. Cada cartão mostra a imagem, um selo com o número de produtos e dois botões ao passar o rato: Ver o look e Comprar o look.
A janela «Ver o look»
Um clique em Ver o look (ou no cartão) abre uma janela imersiva: a imagem ampliada com os seus pontos pulsantes de um lado, a lista de produtos do outro. Passar o rato sobre uma linha de produto destaca o ponto correspondente na imagem, e vice-versa.
A exibição expandida
Em modo look único, o mesmo conteúdo é integrado diretamente na página, sem pop-up. Clicar num ponto destaca a linha de produto correspondente. Em telemóvel, as duas colunas ficam uma sobre a outra.
Preço e disponibilidade por combinação
Cada produto mostra o preço e a imagem da sua combinação, formatados de acordo com a moeda e o idioma ativos. Se o seletor estiver ativado, mudar de combinação atualiza o preço e o estado de stock em direto. Os artigos indisponíveis são assinalados.
«Comprar o look» num clique
O botão Comprar o look adiciona ao carrinho, numa só ação, todos os produtos associados ao visual. O módulo:
- adiciona a combinação escolhida pelo cliente, caso contrário a fixada no back office, e por fim a combinação predefinida;
- respeita a quantidade mínima definida no produto;
- ignora automaticamente os artigos esgotados sem reposição autorizada;
- desduplica os produtos colocados em vários pontos.
O carrinho PrestaShop é depois atualizado de forma nativa e uma notificação confirma a adição. Se alguns produtos não puderam ser adicionados, uma mensagem indica-o.
Multilingue
A interface do módulo está traduzida em oito idiomas (EN, FR, DE, ES, IT, PL, PT, NL) e segue o idioma ativo da loja. O título e a descrição de cada look são traduzidos idioma a idioma diretamente no formulário do look.
Atualização a partir de uma versão anterior
As atualizações são automáticas: carregue a nova versão a partir do gestor de módulos e o PrestaShop executa os scripts de migração. Os seus looks, hotspots e imagens são preservados.
Após a atualização para a 1.2.0, todos os looks existentes ficam marcados como em destaque e ambos os locais permanecem em modo carrossel: a sua loja comporta-se exatamente como antes e ativa as novidades quando quiser.
Resolução de problemas
O carrossel não aparece na página inicial. Verifique que pelo menos um look está ativo e em destaque: desde a 1.2.0, o carrossel da página inicial mostra apenas os looks em destaque. Aliás, surge um aviso na configuração quando nenhum o está.
O bloco não aparece na página de produto. O bloco só é apresentado se pelo menos um look ativo contiver o produto consultado e a opção correspondente estiver ativada.
O seletor de combinação não aparece. Só é apresentado se a opção «Permitir que o cliente altere a combinação» estiver ativada e o produto tiver pelo menos duas combinações.
Um produto não é adicionado pelo «Comprar o look». É o comportamento esperado quando está esgotado sem reposição autorizada, desativado, indisponível para venda ou não associado à loja atual.
O carregamento da imagem falha. A pasta modules/dfshopthelook/views/img/looks/ tem de ter permissões de escrita. Caso contrário, surge um aviso na configuração do módulo.
Desinstalação
A desinstalação a partir do gestor de módulos elimina as tabelas do módulo, os looks, os seus hotspots e as imagens de looks carregadas. Lembre-se de guardar uma cópia dos seus visuais antes, se quiser conservá-los.