DF Product Story: blocos de storytelling na ficha de produto
Instalar e usar o DF Product Story: builder drag & drop, blocos de storytelling, tradução e segmentação por produto ou categoria.
Apresentação
O DF Product Story acrescenta secções de storytelling ricas às suas fichas de produto PrestaShop 8 e 9: blocos imagem + texto alternados, vídeo click-to-play, tabela comparativa, grelha de ícones de benefícios e texto livre. As stories compõem-se num builder drag & drop no back-office e aparecem depois automaticamente nos produtos ou categorias que segmentar, sob a descrição ou num separador dedicado.
Uma story atribuída a uma categoria cobre automaticamente todos os seus produtos. As atribuições diretas a produtos mantêm a prioridade: ideal para dar um conteúdo específico aos seus best-sellers.
Os títulos de separador por defeito são fornecidos em FR/EN/ES/DE/IT. Numa loja em português, preencha o campo multilingue « Título do separador » em pt na página de configuração, caso contrário o separador aparece em inglês.
Instalação
- No seu back-office PrestaShop, vá a Módulos > Gestor de módulos > Instalar um módulo.
- Carregue o ficheiro
dfproductstory-1.1.0.zip. - Clique em Instalar. O módulo cria as suas tabelas, o seu separador de administração e os títulos de separador por defeito em FR/EN/ES/DE/IT.
Depois da instalação, ficam disponíveis duas entradas: a página de configuração do módulo (Módulos > DF Product Story > Configurar) e o gestor de stories em Catálogo > DF Product Story.
Configuração geral
A página de configuração do módulo contém quatro definições:
- Local de apresentação: « Sob o conteúdo do produto » (hook displayFooterProduct, por defeito) ou « Separador de produto adicional » (hook displayProductExtraContent, ao lado da descrição).
- Título do separador: etiqueta multilingue usada apenas em modo separador. São fornecidos valores por defeito nos cinco idiomas.
- Lazy-load dos vídeos: ativado por defeito. Substitui os iframes YouTube/Vimeo por uma fachada click-to-play leve, vivamente recomendado para os Core Web Vitals.
- Carregar Font Awesome (CDN): desativado por defeito. Carrega o Font Awesome 6 nas fichas de produto para usar classes como « fa-solid fa-star » nos ícones de benefícios. Inútil se o seu tema já incluir o Font Awesome.
Criar uma story
- Vá a Catálogo > DF Product Story e clique em Adicionar uma story.
- Preencha o nome interno (nunca mostrado no front-office), a prioridade (quanto mais baixo o número, mais acima aparece a story quando várias se acumulam) e o estado Ativo.
- Adicione os seus blocos através dos botões + Adicionar um bloco, preencha-os e clique em Guardar a story.
A gravação é feita em AJAX: permanece na página e pode encadear as alterações. Um toast confirma cada gravação.
Os 5 tipos de blocos
Imagem + texto
O bloco de assinatura do storytelling: uma imagem de um lado, um título e um texto do outro. Escolha a posição da imagem (esquerda ou direita) e alterne os blocos para criar um ritmo visual em zigue-zague. A imagem é carregada diretamente a partir do builder (jpg, png, webp, gif, 4 MB no máximo). O campo de texto aceita HTML.
Vídeo
Três fontes possíveis: YouTube (cole qualquer URL watch, embed, shorts ou youtu.be), Vimeo ou MP4 direto (URL completo do ficheiro). Com o lazy-load ativado, o YouTube e o Vimeo aparecem como fachada click-to-play com miniatura: o iframe só é carregado ao clicar, via youtube-nocookie.com e o parâmetro dnt=1 do Vimeo. O campo de legenda aparece sob o vídeo.
Tabela comparativa
Adicione tantas colunas e linhas quantas precisar com os botões + Coluna / + Linha. A definição Coluna em destaque aplica um realce azul à coluna da sua escolha, prático para orientar para a sua gama principal. A tabela desloca-se horizontalmente em telemóvel.
Ícones de benefícios
Uma grelha de 2 a 4 colunas de argumentos-chave. Cada item tem um ícone (um emoji, uma classe Font Awesome como « fa-solid fa-star » ou o caminho de uma imagem carregada), um título e um texto. Os itens reordenam-se com as setas.
Texto
Um título e um conteúdo HTML livre, para as secções narrativas longas ou qualquer necessidade não coberta pelos outros blocos.
Organizar os blocos
- Drag & drop: agarre a pega ⋮⋮ de um bloco e largue-o na sua nova posição.
- Setas ↑ ↓: alternativa de teclado/rato ao drag & drop.
- Duplicar: copia o bloco com todas as suas definições e conteúdos em todos os idiomas.
- Eliminar: pede confirmação antes de retirar o bloco.
Traduzir o conteúdo
No topo do painel dos blocos, separadores mostram cada idioma ativo da sua loja (PT, EN, ES…). Clique num separador para mudar todos os editores para esse idioma: títulos, textos, colunas de tabela e itens de benefícios traduzem-se de forma independente. As definições estruturais (posição da imagem, fonte do vídeo, número de colunas) são partilhadas entre todos os idiomas.
Lembre-se de guardar antes de sair da página: os conteúdos introduzidos em todos os idiomas são enviados numa única gravação.
Segmentar produtos e categorias
O painel Segmentação funciona em dois níveis:
- Produtos segmentados: pesquise por nome, referência ou ID e clique num resultado para o adicionar como chip. Se pelo menos um produto estiver selecionado, a story só aparece nesses produtos.
- Categorias (alternativa): marque categorias na árvore. A story aparece em todos os produtos que pertencem a essas categorias, salvo se já existir uma story de produto direta para eles.
Quando várias stories correspondem a um mesmo produto, aparecem todas, ordenadas por prioridade crescente.
Multiloja
Em contexto multiloja, uma story criada a partir do contexto « Todas as lojas » é visível em toda a rede. Uma story criada a partir de uma loja precisa fica limitada a essa loja.
Desempenho e RGPD
- O CSS e o JS do front-office só são carregados nas fichas de produto.
- As imagens dos blocos usam o lazy loading nativo do navegador.
- Os vídeos em fachada click-to-play não carregam nenhum script de terceiros antes do clique do visitante, via youtube-nocookie.com e Vimeo dnt=1: nenhum cookie de terceiros é colocado no carregamento da página.
- O CSS do front-office é neutro e herda a tipografia do seu tema.
Desinstalação
A desinstalação elimina as tabelas do módulo, as stories e blocos, as atribuições, o separador de administração e os valores de configuração. As imagens carregadas na pasta do módulo são igualmente retiradas com ele.
FAQ / Resolução de problemas
A story não aparece no front-office
- Verifique que a story está ativa e que contém pelo menos um bloco com conteúdo no idioma consultado.
- Verifique a segmentação: se houver produtos selecionados, a story só aparece neles; caso contrário, segue as categorias marcadas.
- Em modo separador, alguns temas fortemente personalizados não implementam displayProductExtraContent: mude para « Sob o conteúdo do produto ».
O vídeo YouTube não aparece
Verifique que o URL contém um identificador de vídeo válido (formatos watch?v=, youtu.be/, embed/ ou shorts/ aceites). As playlists isoladas não são suportadas.
O carregamento de imagem falha
Formatos aceites: jpg, jpeg, png, webp, gif, tamanho máximo 4 MB. Verifique também que a pasta do módulo tem permissão de escrita para o servidor web.