DF Swipe Gallery: navegação de produtos por swipe

Apresentação

O DF Swipe Gallery transforma as páginas de categoria da sua loja PrestaShop num deck de cartões em ecrã inteiro ao estilo Tinder. O visitante descobre os produtos um a um: swipe para a direita para gostar (lista de desejos), swipe para a esquerda para passar, swipe para cima para adicionar ao carrinho. Uma barra de progresso ao estilo stories indica o avanço e um ecrã final recapitula os favoritos da sessão. Todas as interações alimentam um painel de analytics no back-office.

Instalação

1. No seu back-office, abra Módulos → Gestor de módulos → Instalar um módulo.
2. Envie o ficheiro dfswipegallery.zip e clique em Instalar.
3. O módulo cria automaticamente as suas duas tabelas (df_swipegallery_like e df_swipegallery_stat), regista os seus hooks e acrescenta o separador Catálogo → Swipe Gallery.

Não é necessária nenhuma alteração do tema: o botão de lançamento e o overlay são injetados através do hook displayFooterAfter, independentemente do seu template.

Configuração

Abra Módulos → DF Swipe Gallery → Configurar. As opções disponíveis:

• Enable swipe gallery: ativa ou desativa globalmente o módulo.
• Mobile devices only: limita o botão flutuante aos ecrãs com menos de 992 px (ativado por defeito). Desative-o para propor também o deck em desktop.
• Maximum products per deck: número de cartões por sessão, de 5 a 100 (30 por defeito).
• Deck order: ordem dos cartões: posição na categoria, aleatória (recomendada para a descoberta) ou novidades primeiro.
• Swipe up adds to cart: ativa o super-like: um swipe para cima adiciona o produto ao carrinho.
• Hide already liked products: exclui dos novos decks os produtos de que o visitante já gostou.
• Show price on cards: mostra ou oculta o preço nos cartões (automaticamente oculto em modo catálogo).
• Launcher button position: posição do botão flutuante: inferior direita, inferior esquerda ou inferior centro.

Utilização do lado da loja

Em qualquer página de categoria aparece um botão flutuante « Swipe mode ». Ao tocar, o deck abre em ecrã inteiro:

• Swipe para a direita (ou botão coração): gosto: o produto é guardado na lista de desejos.
• Swipe para a esquerda (ou botão cruz): passa ao produto seguinte.
• Swipe para cima (ou botão carrinho): adiciona o produto ao carrinho.
• Toque em « Ver o produto »: abre a ficha de produto.

Em desktop, as setas do teclado reproduzem os gestos (→ gosto, ← passar, ↑ carrinho) e a tecla Esc fecha o deck. Uma vibração háptica acompanha cada swipe nos aparelhos compatíveis, e a animação é desativada se o visitante tiver ativado prefers-reduced-motion.

No fim do deck, um ecrã recapitulativo lista os produtos de que gostou com o seu preço e uma ligação direta para cada ficha, mais um botão para relançar uma sessão.

Lista de desejos, clientes e convidados

Cada gosto é persistido na tabela nativa do módulo, quer venha de um cliente autenticado ou de um visitante convidado (associado ao seu id_guest). Uma chave única impede os duplicados.

Se o módulo oficial blockwishlist estiver instalado e o cliente estiver autenticado, o produto é também adicionado à sua lista de desejos por defeito, criada automaticamente se ainda não existir. Não é necessária nenhuma configuração: a ponte é silenciosa e nunca falha de forma ruidosa.

Adição ao carrinho por swipe

O swipe para cima adiciona o produto do lado do servidor: o carrinho é criado se necessário, a quantidade mínima do produto é respeitada e o badge do carrinho do tema é atualizado através do evento padrão prestashop.emit('updateCart'). Os produtos não encomendáveis (indisponíveis para encomenda) são recusados de forma limpa com uma mensagem.

Analytics no back-office

O separador Catálogo → Swipe Gallery apresenta o painel:

• Contadores globais: cartões vistos, gostos, passagens, adições ao carrinho.
• Taxa de gosto global: gostos / (gostos + passagens).
• Top 20 dos produtos por gostos, com visualizações, passagens, carrinhos e taxa de gosto por produto.

Estes dados constituem um sinal de merchandising direto: os produtos com taxa de gosto elevada merecem ser destacados, os que são massivamente ignorados merecem uma foto melhor ou um reposicionamento. As estatísticas de um produto eliminado são purgadas automaticamente.

Multiloja e multilingue

Os gostos e as estatísticas são registados por loja (id_shop). Os textos do deck (Gosto, Passar, Ver o produto, ecrã recapitulativo…) passam pelo sistema de tradução nativo do PrestaShop: traduza-os para português em Internacional → Traduções → Traduções dos módulos instalados.

Resolução de problemas

• O botão não aparece: verifique que o módulo está ativado, que está numa página de categoria e que a opção mobile-only não está ativa se estiver a testar em desktop.
• O deck está vazio: a categoria não contém nenhum produto ativo visível, ou todos os produtos estão excluídos pela opção « Hide already liked products ».
• O badge do carrinho não se atualiza: o seu tema personalizado talvez não escute o evento updateCart; adapte o listener no seu tema ou contacte o suporte.
• Conflito de apresentação: o overlay usa um z-index de 1060; aumente-o via CSS se um elemento do seu tema passar por cima.

Changelog

• 1.0.0 (2026-07-16): versão inicial: deck swipe em ecrã inteiro, lista de desejos por swipe para a direita com ponte blockwishlist, adição ao carrinho por swipe para cima, suporte de convidados, painel de analytics, barra de progresso stories, acessibilidade, compatibilidade PrestaShop 8 e 9 e multiloja.