Configurador de Produto por Etapas: guia completo

Apresentação

O DF Product Configurator transforma uma ficha de produto PrestaShop num configurador orientado por etapas: o cliente escolhe uma cor, acrescenta uma gravação, seleciona um acessório, vê o resultado composto em tempo real sobre a fotografia do produto, e o suplemento de preço correspondente é aplicado ao carrinho, do lado do servidor e de forma inviolável.

O módulo assenta em duas noções simples:

• Etapa: uma pergunta feita ao cliente, associada a um produto. Existem dois tipos: Escolha visual (o cliente clica numa opção) e Texto / gravação (o cliente escreve um texto livre).
• Opção: uma resposta possível de uma etapa do tipo escolha visual, com o seu elemento visual (miniatura de fotografia ou pastilha de cor), a sua camada de pré-visualização e o seu impacto no preço.

Instalação

1. No back-office do PrestaShop, abra Módulos → Gestor de módulos → Instalar um módulo.
2. Carregue o ficheiro dfproductconfigurator.zip e clique em Instalar.
3. Aparecem dois novos separadores em Catálogo: Configurador — Etapas e Configurador — Opções.

Criar uma etapa

1. Abra Catálogo → Configurador — Etapas e clique em Adicionar.
2. Indique o produto: escreva pelo menos 3 caracteres no campo de pesquisa e clique num resultado; o ID do produto é preenchido automaticamente.
3. Escolha o tipo de etapa: Escolha visual ou Texto / gravação.
4. Escreva a designação em cada idioma (por exemplo, «Cor», «Gravação», «Acessório»). É o texto apresentado no percurso de etapas.
5. Assinale Obrigatória se o cliente tiver de responder a esta etapa antes de poder acrescentar ao carrinho.
6. Defina a posição para ordenar as etapas entre si.

Campos específicos das etapas de gravação

Numa etapa do tipo Texto / gravação, aparecem campos adicionais:

• Comprimento máximo: número de caracteres permitidos (validado também no servidor).
• Impacto no preço: suplemento aplicado assim que o cliente escreve um texto (0 para uma gravação gratuita).
• Posição X / Y: posição do texto na pré-visualização, em percentagem da largura e da altura da imagem (50 / 50 = centro).
• Tamanho e cor do texto: tamanho em píxeis e cor hexadecimal da sobreposição.
• Texto de exemplo: texto de sugestão apresentado no campo, traduzível.

Criar as opções de uma etapa

1. Na lista de etapas, clique na ação Opções da etapa em causa (ou abra Catálogo → Configurador — Opções).
2. Clique em Adicionar e indique a designação multilingue da opção.
3. Defina o seu impacto no preço sem impostos: positivo (suplemento), negativo (desconto) ou nulo (incluído).
4. Escolha o elemento visual do cartão da opção: uma cor hexadecimal (apresentada como pastilha redonda) ou uma miniatura de fotografia (redimensionada automaticamente para 400 px).
5. Carregue, se necessário, uma camada PNG transparente (até 1600 px): será empilhada sobre a fotografia do produto na pré-visualização composta.
6. Assinale Predefinida para pré-selecionar esta opção; só há uma opção predefinida por etapa e o módulo trata disso.

Funcionamento do preço

Os impactos no preço são definidos sem impostos e na moeda predefinida da loja. Na ficha de produto, o módulo converte-os para a moeda do visitante e apresenta-os com ou sem IVA, consoante o grupo de clientes, com um total recalculado em direto.

Esse total apresentado é meramente indicativo. No momento do carrinho, o acréscimo real é aplicado pelo hook de cálculo de preço nativo do PrestaShop, do lado do servidor, a partir da configuração guardada na base de dados: conversão de moeda à taxa de câmbio, aplicação do IVA do contexto do cliente e arredondamento às casas decimais da moeda. Um cliente que altere o DOM ou os pedidos não consegue mudar o preço faturado.

Percurso do cliente na ficha de produto

O bloco do configurador aparece automaticamente na ficha de produto (hook de informações adicionais) assim que exista pelo menos uma etapa ativa para o produto. O cliente:

1. navega entre as etapas através do percurso de etapas (as etapas concluídas ficam assinaladas);
2. clica nas suas opções ou escreve a sua gravação, com a pré-visualização composta e o total a atualizarem-se instantaneamente;
3. clica em Adicionar ao carrinho: o módulo valida as etapas obrigatórias, guarda a configuração no servidor e deixa depois a adição ao carrinho seguir normalmente.

Se uma etapa obrigatória estiver incompleta, o configurador abre nessa etapa com uma mensagem explícita e a adição ao carrinho fica bloqueada.

Carrinho, encomenda e fatura

Cada configuração validada cria uma personalização nativa do PrestaShop: duas configurações diferentes do mesmo produto dão origem a duas linhas de carrinho distintas, cada uma com o seu preço. O resumo legível (por exemplo, Cor: Azul oceano · Gravação: Leonor · Acessório: Rolha de bambu) aparece por baixo do nome do produto no carrinho, na encomenda, na fatura e no detalhe da encomenda do back-office, sem qualquer configuração adicional.

Na validação da encomenda, a configuração é arquivada numa tabela dedicada. As configurações de carrinhos abandonados são limpas automaticamente ao fim de 60 dias.

Combinações, convidados e multimoeda

• Combinações: o configurador acompanha a combinação selecionada; a pré-visualização é reconstruída e o preço base apresentado é o da combinação.
• Clientes convidados: é criado automaticamente um carrinho, se necessário, no momento em que a configuração é guardada.
• Multimoeda: a conversão é feita à taxa de câmbio da loja, tanto na apresentação como no cálculo do servidor.

Desinstalação e limpeza

O módulo limpa aquilo que cria:

• na eliminação de um produto, as suas etapas, opções e imagens de opções são eliminadas;
• na desinstalação, as tabelas do módulo são eliminadas e os campos de personalização criados são libertados (os contadores do produto são reduzidos).

Resolução de problemas

O bloco do configurador não aparece

• Verifique se há pelo menos uma etapa ativa associada ao produto correto (ID de produto certo).
• Limpe a cache do PrestaShop (Parâmetros avançados → Desempenho).
• Verifique se o seu tema chama efetivamente o hook displayProductAdditionalInfo (é o caso do tema Classic e da quase totalidade dos temas).

A pré-visualização composta está desalinhada

A camada PNG não tem o mesmo enquadramento da fotografia de capa. Volte a exportar a camada com a mesma proporção e a mesma posição do produto da imagem principal.

O suplemento não aparece no carrinho

• Verifique se a opção selecionada tem mesmo um impacto no preço diferente de zero.
• O preço do carrinho é recalculado pelo PrestaShop: limpe a cache e volte a testar com um carrinho novo.

Duas adições idênticas criam duas linhas

É o comportamento esperado se as configurações forem diferentes. Se forem exatamente iguais e acrescentadas na mesma sessão, o módulo reutiliza a mesma personalização e aumenta a quantidade.

Novidades das versões 1.1.0 e 1.2.0

Tipo de letra, tamanho e cor à escolha do cliente (1.1.0)

Nas definições de um campo de texto, ative «O cliente escolhe o tipo de letra» e marque as fontes propostas entre as 26 do catálogo integrado de fontes Google e de sistema, ou declare fontes do tema via @font-face com a origem «Fornecidas pelo tema». Ative da mesma forma a escolha do tamanho (limites mín/máx) e da cor (uma linha por cor, no formato Nome|#hex). O campo de introdução e a pré-visualização adotam de imediato o estilo escolhido, cada valor é validado no servidor contra as suas listas, e o resumo da encomenda inclui tipo de letra, tamanho e cor (Lea · Great Vibes 34px Ouro).

Zonas de colocação com o rato (1.1.0)

Quando um campo de texto ou de upload tem um efeito de pré-visualização, o bloco «Zona de colocação» mostra a pré-visualização do produto: arraste o retângulo para o mover, puxe as pegas dos cantos para o redimensionar, e identifique as zonas dos outros campos mostradas em fantasma com o seu número de etapa. A imagem de fundo aparece no editor assim que é selecionada, ainda antes de guardar o formulário. O seletor «O cliente pode mover» permite também bloquear a posição: o texto ou o gráfico é então renderizado no centro da zona, sem arrasto por parte do cliente.

Visual final e painel da encomenda (1.1.0)

Ao adicionar ao carrinho, o módulo compõe o visual final da personalização (camadas, tonalidade, gráfico enviado, texto estilizado), depois valida-o e recodifica-o no servidor. O detalhe da encomenda no back office ganha um painel «Personalizações»: visual final descarregável, resumo campo a campo e ficheiros enviados pelo cliente na sua qualidade original.

Modos de exibição (1.1.0)

Na configuração do módulo, escolha o modo de exibição: bloco integrado na página do produto (predefinido), botão «Configurar» que abre um popup em ecrã inteiro, ou substituição completa da página do produto com o seu próprio seletor de quantidade. Uma opção oculta o botão de carrinho nativo do tema para impedir uma adição sem configuração.

Cores ligadas (1.2.0)

Um campo de texto pode assumir a cor da opção escolhida noutro campo («Cor ligada a um campo» nas suas definições), e a camada de imagem de um campo de escolha pode ser tingida da mesma forma: o PNG da opção funciona então como máscara preenchida com a cor ligada. Uma única escolha do cliente, por exemplo a cor do bordado, controla assim o contorno, o símbolo e o texto ao mesmo tempo, na pré-visualização em direto, no resumo e no visual final. A cor ligada tem prioridade sobre a paleta do cliente e é validada no servidor.

Pré-visualização sempre visível (1.2.0)

No desktop, a coluna de pré-visualização é sticky: permanece fixada no topo do ecrã enquanto os campos de configuração deslizam, ao longo de toda a altura do configurador. Em telemóveis e ecrãs estreitos, a pré-visualização torna-se uma barra compacta fixada no topo da página, sempre visível durante a escrita. Não é necessária qualquer definição nem alteração do tema.

Demos com um clique (1.2.0)

A página de configuração do módulo oferece dois botões de importação: a demo caneca / jarra / t-shirt e a demo de bordado (patch + gorro), que ilustra as cores ligadas. As importações podem ser relançadas sem duplicados e as imagens de demonstração são geradas automaticamente.