Scroll Infinito PrestaShop: guia de instalação e configuração
Instalar e configurar o scroll infinito: modos de carregamento, paginação SEO preservada, regresso à posição exata e temas personalizados.
Instalação
O Scroll Infinito PrestaShop instala-se como qualquer outro módulo PrestaShop, sem dependências nem bibliotecas de terceiros.
- No back-office, abra Módulos > Gestor de módulos e clique em Carregar um módulo.
- Selecione o ficheiro
dfinfinitescroll-1.0.0.zipfornecido e inicie a instalação. - Depois de instalado, clique em Configurar para aceder às definições.
O módulo não acrescenta qualquer tabela à base de dados nem cria overrides. A desinstalação não deixa rasto.
Os três modos de carregamento
O comportamento do carregamento escolhe-se na definição Modo de carregamento.
Híbrido (recomendado)
As primeiras páginas carregam automaticamente à medida que o visitante desce, e um botão «Carregar mais produtos» assume depois o comando, assim que o limiar é atingido. É o melhor compromisso: a experiência mantém-se fluida no topo da listagem, mas o visitante mantém o controlo e o rodapé volta a ficar acessível.
Infinito puro
Todas as páginas seguintes carregam automaticamente assim que o fim da listagem se aproxima, sem botão. Deve reservar-se a catálogos em que o acesso ao rodapé não seja crítico.
Apenas botão
Sem qualquer carregamento automático: o visitante clica em «Carregar mais» a cada página. É útil se quiser limitar o número de pedidos ou manter uma paginação muito explícita.
Definições disponíveis
- Modo de carregamento: híbrido, infinito puro ou apenas botão.
- Páginas carregadas automaticamente (híbrido): número de páginas carregadas antes de o botão aparecer. Valor predefinido: 3.
- Sincronizar o URL e o canónico: atualiza a barra de endereço, a etiqueta canonical e as ligações rel prev/next à medida do deslocamento.
- Restaurar a posição exata: volta a injetar as páginas já vistas e recoloca a vista no produto visitado, ao regressar de uma ficha.
- Ativar em todas as páginas de listagem: categorias, fabricantes, fornecedores, pesquisa, mais vendidos, novidades e promoções. Se estiver desativado, o módulo aplica-se apenas às categorias.
- Texto do botão: texto multi-idioma do botão «Carregar mais».
- Seletor da lista de produtos (avançado) e Seletor da paginação (avançado): ver a secção sobre temas personalizados.
O texto do botão é um campo multi-idioma que preenche você mesmo: escreva a versão portuguesa («Carregar mais produtos») para cada idioma ativo, caso contrário o visitante vê o texto do idioma de recurso.
A paginação continua otimizada para SEO
Ao contrário dos módulos que substituem a paginação por uma chamada AJAX invisível, o Scroll Infinito PrestaShop apoia-se nos URL paginados nativos do seu tema. Na prática:
- Sem JavaScript (incluindo para os robôs), a loja apresenta exatamente a sua paginação habitual do servidor, totalmente rastreável.
- Com JavaScript, a etiqueta canonical e as ligações rel prev/next são atualizadas para refletir a página realmente apresentada no ecrã, nos dois sentidos de deslocamento.
Mantenha a opção «Sincronizar o URL e o canónico» ativa: é ela que garante que o URL partilhado por um visitante que desceu até à página 4 aponta mesmo para essa página.
Numa loja multi-idioma com o Polylang ou com os idiomas nativos do PrestaShop, os URL paginados sincronizados mantêm o prefixo de idioma da página consultada. Confirme, ainda assim, num teste em /pt/, que o canónico atualizado aponta para a versão portuguesa e não para a de origem.
O regresso à posição exata
É o coração do módulo. Quando um visitante clica num produto depois de ter descido na página, o módulo guarda no armazenamento de sessão: as páginas carregadas, o URL exato de cada uma, a posição de deslocamento e o identificador do produto clicado. Guarda também em cache o conteúdo das páginas, com uma proteção de tamanho.
No regresso (botão anterior do navegador ou navegação interna a partir da ficha), o módulo:
- volta a injetar instantaneamente as páginas a partir da cache, ou descarrega-as de novo em paralelo se a cache era demasiado volumosa;
- recoloca a vista com precisão no produto visitado, através do seu identificador, com recurso à posição de deslocamento se necessário.
O estado de restauro expira ao fim de 30 minutos e nunca é aplicado numa visita direta a um URL do tipo página 3: nesse caso, a página comporta-se normalmente.
Temas personalizados: seletores avançados
Por predefinição, o módulo visa os seletores do tema classic: #js-product-list .products para a lista de produtos e .pagination para o bloco de paginação. Se o seu tema usar uma estrutura diferente, preencha os dois campos avançados:
- Seletor da lista de produtos: o contentor direto dos cartões de produto.
- Seletor da paginação: o bloco que contém a ligação «seguinte» (rel next ou classe next).
Não é necessária qualquer alteração de código. O módulo volta a ligar os comportamentos dos produtos injetados através de eventos aplicacionais, o que permite ao seu tema ou a outros módulos religarem os seus widgets aos novos cartões.
Compatibilidade com a navegação por facetas
O módulo é compatível com o módulo de navegação por facetas. Escuta o evento de atualização da lista de produtos, acionado a cada mudança de filtro, reinicia-se de forma limpa e recomeça a partir dos URL paginados filtrados. Não é necessária qualquer definição adicional.
Resolução de problemas
O scroll infinito não é acionado
Confirme que os seletores avançados correspondem ao seu tema e que existe uma paginação nativa (com uma ligação «seguinte») na página de listagem.
O regresso não recoloca a vista no produto certo
Certifique-se de que os cartões de produto do seu tema expõem mesmo o atributo de identificador do produto. Num tema muito personalizado que não o exponha, o módulo recorre à posição de deslocamento.
Em caso de falha de rede
O módulo passa automaticamente para as ligações de paginação nativas: a navegação continua sempre possível.