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.