# Módulo Quick View PrestaShop 8/9: documentação > Apresentação O DF Quick View substitui a pré-visualização rápida nativa do seu tema PrestaShop por uma janela modal moderna: galeria de imagens completa, seleção de combinações em direto, indicador de… - Página: - Idioma: pt - Atualizado em: 2026-09-09 - Outros idiomas: [fr](https://www.datafirefly.com/documentation/dfquickview/index.md), [en](https://www.datafirefly.com/en/documentation/dfquickview/index.md), [es](https://www.datafirefly.com/es/documentation/dfquickview/index.md), [de](https://www.datafirefly.com/de/documentation/dfquickview/index.md), [it](https://www.datafirefly.com/it/documentation/dfquickview/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfquickview/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfquickview/index.md) - Índice: ## Apresentação O DF Quick View substitui a pré-visualização rápida nativa do seu tema PrestaShop por uma janela modal moderna: galeria de imagens completa, seleção de combinações em direto, indicador de stock, seletor de quantidade e adição ao carrinho por AJAX. Graças ao pré-carregamento ao passar o rato, a janela abre-se instantaneamente e o cliente permanece na sua página de categoria durante todo o percurso. O módulo não sobrepõe qualquer template do tema: entra pelo hook padrão `actionFrontControllerSetMedia` e trabalha do lado do navegador sobre as miniaturas de produto existentes. O JavaScript é nativo, sem jQuery nem dependências externas. ## Pré-requisitos - PrestaShop 8.0 a 9.x - PHP 7.4 ou superior - Um tema que mostre miniaturas de produto nas páginas de listagem (o tema Classic e os seus derivados funcionam sem qualquer ajuste) ## Instalação 1. Descarregue o arquivo `dfquickview-1.0.0.zip` a partir da sua conta de cliente DataFirefly. 2. No back-office, vá a **Módulos > Gestor de módulos**, clique em **Carregar um módulo** e coloque o arquivo. 3. Clique em **Instalar** e depois em **Configurar**. Não é criada qualquer tabela na base de dados: o módulo guarda apenas as suas definições na tabela de configuração do PrestaShop. A desinstalação é limpa e elimina todas as suas chaves. ## Configuração ### Modo de ativação Três modos determinam a forma como a janela se abre: - **Interceção**: o módulo captura as ligações de pré-visualização rápida do seu tema (os elementos com as classes `.quick-view`, `.js-quick-view` ou o atributo `data-link-action="quickview"`) e abre a sua própria janela em vez delas. O comportamento nativo é neutralizado. - **Injeção**: o módulo acrescenta o seu próprio botão sobreposto a cada miniatura de produto. Útil se o seu tema não oferecer qualquer pré-visualização rápida. - **Ambos** (recomendado, valor predefinido): os dois mecanismos ficam ativos. ### Seletor CSS das miniaturas de produto O módulo precisa de saber que elementos da página correspondem a uma miniatura de produto. O valor predefinido, `.product-miniature, .js-product-miniature`, cobre o tema Classic e a grande maioria dos temas filhos. Se o seu tema usar outra estrutura, abra uma página de categoria, inspecione o contentor de um produto nas ferramentas de programador do navegador e indique aqui a respetiva classe. O módulo procura depois o identificador do produto no atributo `data-id-product` dentro da miniatura e, na sua falta, deduz o identificador a partir do URL da ligação do produto. ### Pré-carregamento inteligente Ativo por predefinição. Assim que o cursor permanece sobre uma miniatura de produto durante o **tempo de pré-carregamento** (120 ms por predefinição), o módulo obtém os dados do produto em segundo plano e pré-carrega a primeira imagem. Ao clicar, está tudo em memória: a janela abre sem latência. Em telemóvel, o pré-carregamento é acionado ao primeiro toque na miniatura. É enviado um único pedido por produto, mesmo que o visitante passe várias vezes sobre a mesma miniatura. Se o pré-carregamento o preocupar em termos de carga do servidor, aumente o tempo (300 a 500 ms filtram as passagens involuntárias) ou desative-o: a janela passa então a carregar ao clique, com um esqueleto de carregamento animado. ### Tempo de vida da cache do cliente Os dados de produto obtidos são conservados na sessão do navegador durante o período indicado (300 segundos por predefinição). Um visitante que reabra a mesma janela não gera qualquer novo pedido. A cache é separada por idioma, moeda, loja e grupo de clientes: um visitante nunca pode ver o preço calculado para outro grupo. Defina o valor a 0 para desativar totalmente a cache de sessão (a cache em memória da página mantém-se ativa). ### Conteúdo apresentado - **Mostrar a descrição curta**: apresenta o resumo do produto na janela (oculto em telemóvel para poupar espaço). - **Mostrar a referência do produto**: apresenta a referência do produto, ou a da combinação selecionada se esta tiver uma. - **Mostrar a ligação «Ver a ficha do produto»**: acrescenta uma ligação para a ficha completa por baixo do botão de adição ao carrinho. ### Carregar em todas as páginas Por predefinição, os recursos do módulo só são carregados nas páginas de listagem: página inicial, categorias, pesquisa, marcas, fornecedores, promoções, novidades e mais vendidos. Ative esta opção se mostrar miniaturas de produto noutros locais, como páginas CMS, blocos personalizados ou módulos de terceiros. ### Cor de destaque Define a cor dos botões, dos contornos de seleção e dos estados ativos na janela. Introduza uma cor hexadecimal correspondente à sua identidade gráfica. ## Funcionamento da janela ### Galeria A janela apresenta todas as imagens do produto: imagem principal, miniaturas clicáveis por baixo, setas anterior e seguinte. A navegação por teclado é suportada (setas esquerda e direita para mudar de imagem, tecla Esc para fechar) e o deslize tátil funciona em telemóvel. Se a combinação selecionada tiver imagens associadas no PrestaShop, a galeria limita-se automaticamente a essas imagens. Caso contrário, mantém-se visível o conjunto das imagens do produto. ### Combinações Os grupos de atributos são apresentados de acordo com o tipo configurado no PrestaShop: - **Marca de cor**: os grupos marcados como grupos de cor mostram um círculo, com a textura se existir um ficheiro de textura para o atributo, ou a cor hexadecimal caso contrário. - **Lista pendente**: os grupos do tipo «lista pendente» mostram um menu. - **Botão**: os restantes grupos mostram marcas retangulares clicáveis. A cada mudança de seleção, o módulo recalcula a combinação correspondente e atualiza o preço, o preço riscado, a percentagem de desconto, a referência, o stock, a quantidade mínima e as imagens. Dois estados visuais assinalam os becos sem saída: - **Cinzento**: o atributo, combinado com a seleção em curso, não corresponde a nenhuma combinação existente. - **Esbatido**: a combinação existe mas está esgotada, e o produto não permite encomenda em rutura. ### Stock e quantidade São apresentados três estados conforme a disponibilidade da combinação selecionada: **em stock**, **em reposição** (rutura permitida na encomenda) ou **esgotado** (o botão de adição fica então desativado). O seletor de quantidade respeita a quantidade mínima definida no produto ou na combinação: inicia-se nesse valor e impede descer abaixo dele. ### Adição ao carrinho A adição é enviada por AJAX ao controlador de carrinho nativo do PrestaShop. Em caso de sucesso, o módulo emite o evento `updateCart` da framework de front-office: o bloco de carrinho do seu cabeçalho atualiza-se automaticamente, sem recarregar a página. Os erros devolvidos pela loja, como rutura, quantidade mínima não atingida ou produto indisponível, são apresentados na janela, por baixo do botão. Os produtos com campos de personalização obrigatórios não podem ser adicionados ao carrinho a partir de uma janela: o módulo apresenta uma mensagem e convida o cliente a abrir a ficha completa do produto. ## Compatibilidade com a navegação por facetas Quando o cliente aplica um filtro, o PrestaShop substitui a lista de produtos sem recarregar a página. O módulo escuta o evento `updateProductList` e vigia também as alterações ao documento: os seus botões são reinjetados automaticamente nas novas miniaturas, sem qualquer intervenção da sua parte. ## Resolução de problemas ### Não aparece qualquer botão nas miniaturas Confirme primeiro que o modo de ativação inclui a injeção («Injeção» ou «Ambos»). Depois verifique o seletor CSS das miniaturas: abra uma página de categoria, inspecione o contentor de um produto e confirme que corresponde ao seletor configurado. Por fim, certifique-se de que a miniatura contém mesmo um atributo `data-id-product` ou uma ligação para a ficha do produto. ### A janela não abre ao clicar na pré-visualização rápida do tema O modo de ativação tem de incluir a interceção («Interceção» ou «Ambos»). Alguns temas usam classes não padrão no seu botão: nesse caso, passe para o modo «Injeção» e oculte o botão nativo do tema com uma regra CSS na sua folha de estilo personalizada. ### Os recursos não carregam numa página específica O módulo só carrega os seus recursos nas páginas de listagem padrão. Se mostrar miniaturas de produto numa página CMS ou num módulo de terceiros, ative a opção **Carregar em todas as páginas**. ### As alterações à configuração não são visíveis Limpe a cache do PrestaShop (**Parâmetros avançados > Desempenho > Limpar cache**) e recarregue a página forçando a atualização do navegador. Se alterou o tempo de vida da cache do cliente, os visitantes já em sessão mantêm os seus dados até à expiração. ### O preço apresentado na janela não corresponde ao da listagem Os preços da janela são calculados do lado do servidor com o mesmo método da ficha do produto, tendo em conta o grupo de clientes, a moeda e os impostos. Se a diferença persistir, verifique se o seu tema não aplica uma apresentação de preço personalizada nas miniaturas e limpe a cache do cliente definindo temporariamente o seu tempo de vida a 0. ## Desinstalação A partir do gestor de módulos, escolha **Desinstalar**. Todas as chaves de configuração do módulo são eliminadas. Nenhum dado de produto ou de encomenda é afetado.