Pré-visualização instantânea de produto - Janela Quick View com galeria, ao passar o rato ou ao clicar, para qualquer tema

A lista de produtos deixa de ser um beco sem saída

Um visitante que percorre uma página de categoria tem uma única pergunta: será este o produto certo? Responder-lhe custa normalmente um clique para a ficha do produto e outro para voltar — e cada uma dessas idas e voltas é uma oportunidade de o perder.

Este módulo responde à pergunta ali mesmo onde o visitante já está. Basta apontar para uma imagem, ou clicar num pequeno botão de lupa, e abre-se uma janela de pré-visualização por cima da listagem: as fotografias do produto numa galeria, o nome, o preço, a descrição curta e o selo New (novo) ou On sale (em promoção). Sem recarregar a página e sem nada para instalar no seu tema.

Ao passar o rato ou ao clicar — a escolha é sua

Defina o disparo ao passar o rato e a pré-visualização acompanha a atenção do visitante sem um único clique. Defina-o ao clicar e surge, em vez disso, um pequeno botão de lupa sobre a imagem.

O modo clique é rigoroso num ponto que conta: um clique normal na imagem continua a abrir a ficha do produto. Só o botão de lupa abre a pré-visualização. Os visitantes que já sabem o que querem nunca são intercetados.

Dois esquemas

O esquema vertical coloca a imagem principal em cima, com uma tira de miniaturas por baixo. O horizontal põe a imagem à esquerda e os detalhes à direita. Ambos partilham a mesma folha de estilos e o mesmo template — mudar de um para o outro é uma definição, não outro caminho de código.

No esquema vertical, apontar para qualquer miniatura troca a imagem principal de imediato. A apresentação automática opcional percorre as fotografias no intervalo que escolher, entre 1000 e 20000 ms, e fica em pausa enquanto o visitante aponta para a imagem, pelo que nunca tira uma fotografia a quem está precisamente a olhar para ela.

Convém saber antes de escolher: a tira de miniaturas faz parte apenas do esquema vertical. No esquema horizontal chega-se às fotografias através da apresentação automática, por isso, se escolher horizontal e desligar a apresentação, os visitantes só verão a primeira imagem.

O preço mostrado é o preço que iriam pagar

É calculado no servidor, não adivinhado no navegador. A janela usa a moeda do visitante, as regras de imposto que se lhe aplicam e o seu grupo de clientes — incluindo se esse grupo tem sequer autorização para ver preços.

Se a sua loja funcionar em modo catálogo, se o produto tiver os preços desativados, ou se o grupo do visitante não puder ver preços, o bloco de preço simplesmente não é apresentado. Não tem de se lembrar de o desligar.

Selos que dizem a verdade

O selo New (novo) aparece apenas em produtos genuinamente recentes, de acordo com a definição da sua própria loja número de dias durante os quais o produto é considerado novo — por isso desaparece sozinho quando um produto deixa de ser novo.

On sale (em promoção) depende da caixa Mostrar a etiqueta "Em promoção!" no separador Preços do próprio produto. Deliberadamente não se guia pelos descontos: um produto com preço reduzido não recebe um selo "On sale" a menos que o tenha efetivamente assinalado como estando em promoção. É precisamente essa a ideia — o selo significa aquilo que o lojista disse que significava, e não aquilo que um preço em concreto calhou fazer.

Sobrevive à pesquisa por facetas e ao deslocamento infinito

Os eventos são delegados, pelo que as fichas de produto que surgem depois de a página ter carregado — filtradas pela pesquisa por facetas, acrescentadas pelo deslocamento infinito, substituídas por um módulo de terceiros — funcionam de imediato. Não há qualquer passo de reinicialização nem nada para voltar a ligar.

Um único interruptor para o Quick view do seu tema

A maioria dos temas traz um botão Quick view próprio, e duas janelas a competir é uma má experiência. Em vez de o mandar editar o tema, o módulo pode ocultar esse botão por si com um simples interruptor.

Conhece tanto a marcação do Classic (.quick-view, [data-link-action="quickview"]) como a do Hummingbird (.product-miniature__quickview-button, [data-ps-action="open-quickview"]). E resolve o pormenor que costuma correr mal aqui: o botão vive muitas vezes dentro de um painel branco que surge ao passar o rato, pelo que ocultar apenas o botão deixa uma faixa branca vazia na ficha. O módulo mede o que esse painel contém realmente — se o Quick view era a única coisa lá dentro, desaparece o painel inteiro; e se o painel também alberga amostras de cor, essas continuam à vista.

Onde aparece, e onde deliberadamente não aparece

A pré-visualização carrega nas páginas de início, categoria, resultados de pesquisa, marca, fornecedor, novidades, mais vendidos e descidas de preço — e também na ficha do produto, para que os blocos Produtos da mesma categoria e Produtos vistos a tenham igualmente.

O processo de compra nunca é tocado. Ali não se carrega absolutamente nada.

Os telemóveis mantêm o comportamento normal

Passar o rato não existe num ecrã tátil, e uma janela de pré-visualização a lutar com um toque é pior do que não haver pré-visualização nenhuma. Defina uma largura mínima de ecrã — 432 px por predefinição — e abaixo dela o módulo desliga-se por completo, deixando aos visitantes em telemóvel o comportamento simples e rápido que esperam.

A versão 3 substituiu dois pontos de acesso genuinamente inseguros

Isto merece ser dito com clareza.

A versão 2.x incluía ficheiros ajax/*.php autónomos que arrancavam o núcleo do PrestaShop à mão e estavam protegidos por um token escrito no código — o mesmo valor em todas as instalações do planeta. Quem tivesse lido o módulo uma vez conhecia o token de todas as lojas que o usavam.

A versão 3 substitui-os por um verdadeiro controlador de front office do PrestaShop, protegido por um token específico da loja e comparado com hash_equals(). O controlador valida o identificador do produto e serve apenas produtos ativos, visíveis no catálogo e pertencentes à loja atual. Tudo o resto recebe um 404 ou um 403.

O que mais foi corrigido na versão 3

A versão 2.x carregava jquery-1.11.0.min.js a partir de um caminho que não existe no PrestaShop 1.7 nem posterior, o que quebrava a janela em silêncio em muitas lojas. Incluía também dezasseis ficheiros jQuery, um por versão, cada um com a sua própria implementação SHA-1 de 130 linhas. Tudo isso desapareceu: o front office assenta agora num único ficheiro JavaScript vanilla, sem dependências.

O velho truque do cookie web_url também desapareceu — a configuração chega agora ao ficheiro JavaScript através de Media::addJsDef.

Os URL amigáveis deixaram de importar. O produto é identificado pelo atributo data-id-product da própria ficha, com um URL como alternativa, em vez da análise de endereços reescritos.

Os formatos de imagem são detetados, não escritos no código. A janela escolhe os formatos adequados a partir das suas Design → Definições de imagens em vez de presumir nomes que mudam de uma versão do PrestaShop para outra, pelo que os temas personalizados com tipos de imagem renomeados continuam a funcionar.

A versão 3.0.2 pô-lo a funcionar no Hummingbird

Vale a pena nomeá-lo porque o problema era invisível, e não ruidoso. O Hummingbird gera a ligação da miniatura como .product-miniature__image-link, ao passo que o Classic usa .product-thumbnail / a.thumbnail. Essa classe não constava do seletor de disparo, pelo que no Hummingbird não abria absolutamente nada — e o botão Quick view do próprio tema continuava à vista, porque nenhum dos seus nomes de classe correspondia também às regras de ocultação. Agora ambos são reconhecidos a par da marcação do Classic, e o CSS e o JavaScript do front office levam a versão do módulo no endereço, para que a correção chegue aos visitantes que regressam sem que ninguém tenha de limpar uma cache.

A página de configuração verifica-se a si própria

Sempre que a abre, o módulo executa quatro verificações — Módulo ativado, Hook de front office, Formatos de imagem de produto e Pedidos seguros — e mostra-lhe o resultado de cada uma. Quando a pré-visualização não aparece, esse painel costuma dizer-lhe porquê antes de começar às adivinhas. Os ficheiros que tenham sobrado de versões anteriores à 3.0.0 são também limpos automaticamente.

Compatibilidade

PrestaShop 1.7 a 9. A interface do próprio módulo está disponível em oito idiomas: alemão, espanhol, francês, inglês, italiano, neerlandês, polaco e turco — não está, portanto, traduzida para português.

Sem overrides, sem modificar o núcleo nem o tema, e sem jQuery. A atualização a partir de uma versão 2.x é automática: as suas definições são mantidas, as opções novas recebem valores predefinidos sensatos e os ficheiros obsoletos são eliminados por si.

Perguntas frequentes

Um clique normal continua a abrir a ficha do produto?

Sim. No modo clique, só o pequeno botão de lupa abre a pré-visualização — clicar na própria imagem comporta-se exatamente como sempre se comportou. No modo rato, nada interceta os cliques.

O preço da janela vai coincidir com aquilo que o cliente paga realmente?

Sim. É calculado no servidor com a moeda do cliente, as regras de imposto que se lhe aplicam e o seu grupo de clientes. Em modo catálogo, ou para um grupo que não pode ver preços, o bloco de preço não é apresentado de todo.

Continua a funcionar quando filtro uma categoria com a pesquisa por facetas?

Sim. Os eventos são delegados, pelo que as fichas regeneradas pela pesquisa por facetas ou pelo deslocamento infinito continuam a funcionar sem qualquer reinicialização.

O meu tema já tem um botão Quick view — vou ficar com duas janelas?

Não, desde que deixe ativada a opção Ocultar o botão de vista rápida do tema. Cobre tanto a marcação do Classic como a do Hummingbird, e retira o painel envolvente apenas quando o Quick view era a única coisa lá dentro, para que as amostras de cor não se percam.

Funciona em telemóveis?

Por opção de conceção desliga-se abaixo da largura de ecrã que definir — 432 px por predefinição — porque passar o rato não existe em ecrãs táteis. Os seus visitantes em telemóvel mantêm o comportamento normal.

O meu produto com desconto não mostra o selo "On sale" — porquê?

Porque um desconto e a etiqueta em promoção são duas coisas diferentes. O selo depende da caixa Mostrar a etiqueta "Em promoção!" no separador Preços do produto, e não dos seus preços em concreto. Assinale essa caixa e o selo aparece. O selo New (novo) é automático e segue a definição da sua loja "número de dias durante os quais um produto é considerado novo".

Torna as minhas páginas de produto mais lentas?

O HTML da janela só é pedido quando um visitante abre efetivamente uma pré-visualização, e a resposta fica em cache privada durante um minuto. A página em si carrega uma folha de estilos pequena e um ficheiro JavaScript vanilla pequeno, e absolutamente nada no processo de compra.

Vou atualizar a partir da 2.x — tenho de fazer alguma coisa?

Não. A atualização mantém as suas definições existentes, dá valores predefinidos sensatos às opções novas e elimina sozinha os antigos ficheiros AJAX autónomos e os recursos próprios de cada versão.

Modifica o meu tema ou substitui ficheiros do núcleo?

Não. Um hook de apresentação e um controlador de front office, mais nada.