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 baralho 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), para a esquerda para passar, para cima para adicionar ao carrinho. Uma barra de progresso ao estilo stories indica o avanço e um ecrã final resume os favoritos da sessão. Todas as interações alimentam um painel no back-office.

Instalação

1. No back-office, abra Módulos > Gestor de módulos > Carregar um módulo.
2. Carregue o ficheiro dfswipegallery.zip e clique em Instalar.
3. O módulo cria 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 qualquer alteração ao tema: o botão de início e a sobreposição são injetados através do hook displayFooterAfter, independentemente do seu template.

Atualização a partir da 1.0.0

Carregue o ZIP 1.1.0 por cima do módulo existente. O script de atualização acrescenta a coluna das aberturas da página de produto, regista os novos hooks, cria as novas definições com os valores predefinidos e mantém os seus gostos e estatísticas. Depois, limpe a cache do PrestaShop.

Configuração

Abra Módulos > DF Swipe Gallery > Configurar. Opções disponíveis:

• Ativar a swipe gallery: ativa ou desativa o módulo globalmente.
• Apenas dispositivos móveis: limita o botão flutuante a ecrãs com menos de 992 px (ativado por predefinição). Desative para oferecer o baralho também no computador.
• Número máximo de produtos por baralho: de 5 a 100 (30 por predefinição).
• Ordem do baralho: posição na categoria, aleatória (recomendada para descobrir) ou novidades primeiro.
• O swipe para cima adiciona ao carrinho: ativa o super-gosto.
• Deixar o visitante escolher a combinação: nos produtos com combinações, o swipe para cima abre um painel para escolher tamanho, cor, etc. antes de adicionar ao carrinho. Se desativado, a combinação predefinida é adicionada diretamente (novidade da 1.2.0, ativado por predefinição).
• Ocultar produtos já gostados: exclui dos novos baralhos os produtos de que o visitante já gostou.
• Ocultar produtos esgotados: deixa de fora os produtos que não podem ser encomendados por falta de stock (novidade da 1.1.0).
• Mostrar o preço nos cartões: mostra o preço, com o preço original riscado quando há uma promoção. Ocultado automaticamente no modo catálogo.
• Posição do botão de início: em baixo à direita, à esquerda ou ao centro.
• Cor de destaque: cor do botão de início e do botão Recomeçar (novidade da 1.1.0). A cor do texto adapta-se automaticamente para continuar legível.

Utilização na loja

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

• Swipe para a direita (ou botão coração): o produto recebe um gosto e é 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; num produto com combinações, abre-se primeiro um painel para escolher a combinação. O botão fica esbatido nos produtos indisponíveis.
• «Ver o produto»: abre a página do produto.

Um gesto curto mas rápido basta para validar um swipe. Os cartões mostram as etiquetas «Já gostou» e «Indisponível» quando se aplica. No computador, as setas do teclado reproduzem os gestos (direita: gostar, esquerda: passar, cima: carrinho) e a tecla Esc fecha o baralho. No telemóvel, o botão voltar fecha o baralho em vez de sair da página.

No fim do baralho, um ecrã de resumo lista os produtos de que gostou com o preço e uma ligação para cada página. O botão Recomeçar carrega um novo baralho sem fechar a sobreposição.

Acessibilidade: o foco entra no baralho ao abrir e volta ao botão ao fechar, a tabulação fica dentro do baralho, o produto atual é anunciado aos leitores de ecrã e as animações são desativadas se o visitante tiver prefers-reduced-motion ativo.

Lista de desejos, clientes e visitantes

Cada gosto é guardado na tabela do módulo, quer venha de um cliente com sessão iniciada quer de um visitante não registado (associado ao seu identificador de visitante PrestaShop). Uma chave única impede duplicados, também quando o mesmo cliente usa vários dispositivos.

Se o módulo oficial blockwishlist estiver instalado e o cliente tiver sessão iniciada, o produto é acrescentado com a combinação predefinida à sua lista de desejos predefinida, criada automaticamente se necessário. Não é preciso qualquer configuração.

Desde a 1.1.0, quando um visitante inicia sessão ou cria conta, os seus gostos são transferidos automaticamente para a conta de cliente e depois acrescentados à sua lista de desejos blockwishlist. Os hooks actionAuthentication e actionCustomerAccountAdd tratam disso; um erro nesta etapa nunca bloqueia o início de sessão.

Adição ao carrinho por swipe

O swipe para cima adiciona o produto no servidor com as mesmas regras do botão nativo: combinação escolhida pelo visitante (ou combinação predefinida se o painel estiver desativado), quantidade mínima respeitada, controlo do stock e dos direitos de acesso. O carrinho é criado se necessário e mantido na sessão do visitante.

A etiqueta do carrinho do tema é depois atualizada através do evento padrão prestashop.emit('updateCart'), sem abrir a janela «produto adicionado» do tema. Uma mensagem confirma a adição; se o produto não puder ser adicionado, o visitante vê o motivo.

Escolha da combinação

Num produto com combinações, o swipe para cima, o botão carrinho ou a seta para cima abrem um painel na parte inferior do ecrã. As cores aparecem como amostras (ou com a sua textura, se estiver definida em Catálogo > Atributos), os restantes atributos como botões, e uma lista longa do tipo lista pendente continua a ser uma lista pendente. A combinação predefinida vem pré-selecionada.

A cada escolha, o painel atualiza a imagem, o preço (riscado em caso de promoção) e o stock da combinação. Um valor esgotado aparece esbatido; um valor que não existe com as restantes escolhas aparece riscado, e selecioná-lo passa para a combinação existente mais próxima, dando prioridade à que tem stock. O botão de adicionar fica desativado enquanto a combinação não puder ser encomendada.

Esc, a cruz ou o botão voltar do telemóvel fecham o painel sem sair do baralho. Os dados são carregados na primeira abertura e mantidos em memória durante a sessão. No servidor, a combinação recebida é verificada (tem de pertencer ao produto e ser vendida na loja) e o stock é controlado, incluindo o que já está no carrinho.

Estatísticas no back-office

O separador Catálogo > Swipe Gallery mostra:

• Os contadores: cartões vistos, gostos, ignorados, adições ao carrinho, aberturas da página de produto.
• A taxa de gostos (gostos / (gostos + ignorados)), a taxa de adição ao carrinho e a taxa de abertura da página de produto por cartão visto.
• Os 20 produtos com mais gostos, com ligação para a sua página no back-office.
• Os produtos mais ignorados (pelo menos 5 swipes), ordenados por taxa de rejeição: bons candidatos a uma melhor foto principal ou a um preço revisto.
• A exportação CSV de todas as estatísticas e um botão de reposição por loja (os gostos dos visitantes são mantidos).

As estatísticas de um produto eliminado são limpas automaticamente. Nenhum dado é enviado para serviços externos.

RGPD

O módulo regista-se junto do módulo oficial psgdpr: os gostos associados a uma conta de cliente aparecem na exportação de dados pessoais e são eliminados num pedido de apagamento. São também apagados quando um cliente é eliminado no back-office. As estatísticas são agregadas por produto e não contêm dados pessoais.

Multiloja e traduções

Os gostos e as estatísticas são registados por loja. O módulo é entregue traduzido em 8 idiomas (inglês como idioma de origem, mais FR, ES, DE, IT, NL, PL, PT). Para ajustar um texto, use Internacional > Traduções > Traduções dos módulos instalados.

Resolução de problemas

• O botão não aparece: verifique se o módulo está ativo, se está numa página de categoria e se «Apenas dispositivos móveis» está desativado caso esteja a testar no computador.
• O baralho está vazio: a categoria não contém nenhum produto ativo visível, não está acessível ao grupo do visitante, ou todos os produtos são excluídos por «Ocultar produtos já gostados» ou «Ocultar produtos esgotados».
• A etiqueta do carrinho não se atualiza: o seu tema pode não escutar o evento updateCart; o produto está no carrinho, adapte o listener do tema ou contacte o suporte.
• Um elemento do tema fica por cima do baralho: a sobreposição usa um z-index de 100000; aumente-o via CSS se um banner de cookies ou um chat a cobrir.
• Após a atualização mantém-se o comportamento antigo: limpe a cache do PrestaShop e do navegador; o script de atualização também reinicia o OPcache quando disponível.

Registo de alterações

• 1.2.0 (2026-10-13): escolha da combinação antes de adicionar ao carrinho (amostras de cor, tamanhos, preço, imagem e stock por combinação, combinações inexistentes riscadas e passagem automática para a mais próxima); opção «Deixar o visitante escolher a combinação»; mensagem precisa quando uma combinação está esgotada; apresentação independente do box-sizing do tema.
• 1.1.0 (2026-10-13): o carrinho criado por um swipe para cima é agora mantido; combinação predefinida no carrinho e na lista de desejos; deixa de aparecer a janela «produto adicionado» por trás do baralho; transferência automática dos gostos dos visitantes para a conta de cliente; estatísticas fiáveis (cartões realmente vistos, aberturas da página de produto, produtos mais ignorados, exportação CSV, reposição); opções «Ocultar produtos esgotados» e «Cor de destaque»; preço riscado; botão voltar do telemóvel, gesto rápido, gestão do foco; RGPD através do psgdpr; traduções em 8 idiomas.
• 1.0.0 (2026-07-16): versão inicial. Baralho 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 visitantes, painel, barra de progresso stories, compatibilidade com PrestaShop 8 e 9, multiloja.