DataFirefly Editor de emails transacionais para PrestaShop

Apresentação

O módulo dfmaileditor substitui o conteúdo dos emails transacionais do PrestaShop 8 e 9 por designs criados num editor visual. Não altera nenhum ficheiro de /mails nem do tema e não instala override: no momento do envio, interceta o email através dos hooks actionEmailSendBefore e actionEmailAddAfterContent e fornece o seu próprio HTML e a sua própria versão de texto.

Enquanto um email não tiver um design ativo, o PrestaShop envia o email nativo. Se a renderização de um design falhar, o erro fica registado e sai o email nativo: nenhum envio é bloqueado.

Instalação

1. Em Módulos > Gestor de módulos, clique em Carregar um módulo e envie o ficheiro dfmaileditor.zip.
2. O módulo cria as suas tabelas, a pasta img/dfmaileditor para as imagens e a página Design > Editor de e-mails.
3. Nenhum email muda na instalação: os designs são criados inativos e ativa-os um a um.

A lista de emails

A página principal do módulo lista os emails da loja por grupo: encomendas, pagamento, estado da encomenda, conta de cliente, alertas para o comerciante e outros modelos. Os emails dos módulos instalados são detetados e aparecem no último grupo.

• Interruptor Ativado / Desativado: ativa o design do email. Desativado, é enviado o email nativo.
• Criar design ou Editar abre o editor. A cruz elimina o design e devolve o controlo ao email nativo.
• Sob cada email: a data da última alteração e o número de envios feitos com o design nos últimos 30 dias.
• O campo de pesquisa filtra a lista pelo nome do email ou do modelo.

Criar todos os emails a partir de um estilo

Este botão cria de uma vez os designs dos 16 emails principais: confirmação de encomenda, a aguardar transferência, a aguardar cheque, pagamento aceite, erro de pagamento, em preparação, enviada, em trânsito, a aguardar reposição, encomenda cancelada, reembolso, vale, criação de conta, convidado convertido em cliente, redefinição da palavra-passe e o alerta de nova encomenda do módulo ps_emailalerts.

Escolha um dos três estilos vendo a pré-visualização:

• Limpo: azul-marinho, tipo de letra do sistema, alinhado à esquerda.
• Atelier: títulos em Palatino, botões com contorno, cantos retos.
• Vivo: faixa colorida no topo, botões preenchidos, cantos arredondados.

Opções: Usar a cor da minha marca (definida nas Definições), Substituir os designs existentes e Ativá-los já. Sem esta última opção, os designs ficam inativos para os rever. Os textos estão escritos em cada idioma instalado entre francês, inglês, espanhol, alemão, italiano, neerlandês, polaco e português; os restantes idiomas recebem o texto em inglês.

O editor

O editor tem três colunas:

• À esquerda, a paleta de blocos e a estrutura do email. Clique num bloco da paleta para o acrescentar por baixo do bloco selecionado, ou arraste-o para a estrutura. Reordene a estrutura a arrastar.
• Ao centro, a pré-visualização. Um clique num bloco seleciona-o. Por cima: os idiomas, a alternância computador / telemóvel, o campo de ID de encomenda, o assunto do email e o botão Verificações.
• À direita, o separador Bloco com as definições do bloco selecionado e o separador Email com as definições de todo o email.

A barra superior contém Começar por um estilo, Histórico, Enviar um teste, o interruptor Ativo e Guardar. Atalhos: Ctrl+S guarda, Ctrl+Z anula, Ctrl+Y refaz, Del elimina o bloco selecionado.

Os blocos

• Conteúdo: título, texto (negrito, itálico, sublinhado, ligações, listas), botão, imagem, imagem e texto, caixa de destaque, três colunas.
• Encomenda: detalhes da encomenda (referência, data, pagamento, transportadora), produtos encomendados, totais da encomenda, moradas.
• Marketing: produtos recomendados, vale pessoal, banner promocional.
• Layout: cabeçalho com logótipo, separador, espaçador, redes sociais, HTML personalizado, rodapé.

O bloco Produtos encomendados mostra em cada linha a foto da combinação encomendada, o nome, os atributos, as personalizações do cliente, a referência opcional, a quantidade e o preço unitário com ou sem IVA conforme as Definições. Os Produtos recomendados são escolhidos automaticamente, entre os acessórios dos produtos encomendados, os mais vendidos, as novidades ou uma lista de IDs, de 2 a 4 produtos; os produtos já encomendados são excluídos.

O bloco HTML personalizado aceita o seu próprio código, por idioma, por exemplo um widget de avaliações. Scripts, formulários, iframes e atributos de eventos são removidos ao guardar.

Espaçamento e visibilidade

Cada bloco tem fundo, espaço acima e abaixo, margens laterais (-1 usa as do email) e duas opções:

• Ocultar no telemóvel.
• Mostrar apenas se esta variável tiver valor: por exemplo o botão Seguir a minha encomenda com a variável followup, que fica oculto enquanto a encomenda não tiver ligação de seguimento. No editor, um bloco oculto pela sua condição aparece esbatido.

Definições do email

O separador Email define o assunto e o texto de pré-visualização da caixa de entrada (por idioma), o fundo da página e do email, a largura de 480 a 720 px, as margens, o arredondamento dos cantos, os tipos de letra dos títulos e do texto e as cores: texto, texto secundário, principal (botões), texto sobre a cor principal, ligações, linhas, fundo das caixas. Um assunto vazio mantém o assunto do PrestaShop.

Variáveis

O botão { } junto aos campos abre a lista de variáveis do email com o seu valor de exemplo: {firstname}, {order_name}, {shop_url}, {followup}… O PrestaShop substitui-as no envio. As ligações podem conter uma variável, por exemplo {shop_url} ou {followup}.

Idiomas

Os botões por cima da pré-visualização mudam o idioma mostrado e editado. Um ponto laranja num botão assinala um texto em falta nesse idioma; o bloco em causa mostra o código do idioma na estrutura. Por baixo de um campo vazio, Copiar texto de retoma o texto de outro idioma. No envio, um texto em falta é substituído pelo do idioma predefinido da loja e depois pelo inglês.

Pré-visualização, teste e verificações

• Computador / Telemóvel mostra o email na largura de um ecrã de 390 px.
• Pré-visualizar com: introduza um ID de encomenda para ver o email com os produtos, totais e moradas dessa encomenda. Sem ID, são usados dados de exemplo.
• Enviar um teste envia o conteúdo do editor, mesmo não guardado, para o endereço e no idioma escolhidos. Nenhum vale é criado.
• Verificações assinala: um email acima de 102 KB (o Gmail corta-o e esconde o fim), textos em falta por idioma, uma imagem sem texto alternativo, um botão sem texto ou sem ligação, a falta de texto de pré-visualização ou de cabeçalho, um vale pessoal colocado num email para o comerciante. Um clique num ponto seleciona o bloco em causa.

Histórico

Cada gravação guarda uma versão, até 20 por email. Restaurar carrega uma versão no editor; guarde para a manter. A mesma janela oferece Exportar este design e Eliminar o design.

Partilhar e copiar

• Usar este bloco em todos os meus emails, no fim das definições de um bloco: substitui o bloco do mesmo tipo em todos os outros emails com design. Um cabeçalho ou rodapé é acrescentado onde faltar. Útil para mudar o rodapé uma única vez.
• Aplicar estas cores e tipos de letra a todos os meus emails, no topo do separador Email: transfere cores, tipos de letra, largura e margens sem tocar nos assuntos nem nos textos de pré-visualização.
• Começar por um estilo > Copiar o design de outro email: retoma os blocos e as cores de um email que já tem design, mantendo o assunto e o texto de pré-visualização do email atual.

Vale pessoal

Este bloco mostra um código de desconto único para o cliente. Definições: título, texto, texto acima do código, botão e respetiva ligação, tipo de desconto (percentagem, montante fixo ou envio grátis), valor, validade de 1 a 365 dias, valor mínimo de encomenda e prefixo do código (por exemplo OBRIGADO dá OBRIGADO-K7P2M9QX). Nos textos, {voucher_value} mostra o valor do desconto e {voucher_expiry} a data de fim.

• O código é criado quando o email é realmente enviado, como regra de carrinho reservada ao cliente e utilizável uma vez.
• Se o mesmo email for reenviado para a mesma encomenda, por exemplo a partir da página da encomenda, é reutilizado o código já criado.
• As pré-visualizações e os emails de teste mostram um código de exemplo e não criam nada.
• O vale só aparece se o destinatário for o cliente: nunca no alerta de nova encomenda enviado ao comerciante.

As regras criadas têm a descrição dfmaileditor: nome_do_modelo em Catálogo > Descontos > Regras de carrinho.

Banners promocionais

O separador Banners promocionais gere banners reutilizáveis. Cada banner tem um nome interno, um estado, datas de início e fim opcionais, uma cor de fundo para a área de texto e uma lista de emails escolhidos (todos ou uma seleção). Por idioma: imagem (JPG, PNG ou GIF, 1200 px de largura recomendados, 3 MB máx.), ligação, texto alternativo, título, texto e código de desconto a mostrar.

Num email, o bloco Banner promocional mostra o primeiro banner ativo destinado a esse email (modo automático, pela ordem da lista) ou um banner específico. Um banner agendado aparece e desaparece sozinho conforme as datas.

Definições

• Usar os emails com design: interruptor geral. Desativado, todos os emails voltam ao formato nativo e os designs são mantidos.
• Preços com IVA nos blocos de produtos: preços unitários e totais de linha com ou sem IVA.
• Cor da marca: usada pelos estilos prontos quando a opção está marcada.
• Tamanho da imagem nas linhas da encomenda e nos produtos recomendados, entre os formatos de imagem de produto da loja.
• Redes sociais: ligações mostradas pelo bloco Redes sociais como botões de texto. Um campo vazio oculta a rede.
• Rastreio de ligações: acrescenta utm_source, utm_medium e utm_campaign (nome do modelo) apenas às ligações para a sua loja.

Exportação e importação

Exportar, na lista, descarrega um ZIP com todos os designs da loja e as imagens carregadas pelo módulo; o histórico de um email oferece a exportação apenas desse design. Sem a extensão PHP ZipArchive, a exportação é um JSON sem imagens.

Importar aceita esse ZIP ou JSON. As imagens são verificadas (apenas JPG, PNG ou GIF verdadeiros) e copiadas para img/dfmaileditor. Opções: substituir os designs existentes, manter ativos os designs que estavam ativos na exportação. Sem estas opções, os emails que já têm design são ignorados e os novos designs chegam inativos. Os banners não fazem parte da exportação.

Resolução de problemas

Um email continua a sair no formato nativo

Verifique se o design está ativo na lista e se o interruptor geral das Definições está ligado. Se o email for enviado a partir do back-office (mudança de estado da encomenda), o PrestaShop ignora os hooks de um módulo quando o perfil do funcionário ligado não tem a permissão Ver sobre esse módulo: conceda-a em Parâmetros avançados > Equipa > Permissões > Módulos. Por fim, consulte Parâmetros avançados > Registos: um erro de renderização aparece com o prefixo [dfmaileditor].

As imagens não aparecem ao cliente

As imagens são carregadas a partir do URL público da loja: não aparecem a partir de uma loja local ou protegida por palavra-passe. Alguns clientes de email bloqueiam as imagens até o destinatário as autorizar; aparece então o texto alternativo.

O Gmail mostra «Mensagem cortada»

O email ultrapassa 102 KB. Retire blocos, sobretudo HTML personalizado volumoso, ou mostre menos produtos recomendados. O botão Verificações indica o peso exato.

O vale não aparece

No editor e nos testes é mostrado um código de exemplo. No envio real, o vale só aparece para um destinatário único que seja o cliente da encomenda, ou um cliente existente nos emails de conta.

Duas listas de produtos no email

Outro módulo acrescenta as suas próprias linhas de produtos aos emails. Desative-o para os emails com design: o bloco Produtos encomendados já mostra as fotos.