Um visitante percorre uma categoria, desce até ao quadragésimo produto, abre uma ficha, volta atrás e reaparece no topo da página 1. Tem de refazer tudo. É uma das fricções mais reportadas nos catálogos grandes, e também uma das menos caras de corrigir.
Porque o regresso não funciona
Três causas distintas, com soluções diferentes.
A página é recarregada a partir do servidor. Num regresso, o navegador pode servir a página a partir da cache ou voltar a pedi-la. No segundo caso, todo o estado visual se perde, incluindo a posição de deslocamento.
O conteúdo é carregado depois da apresentação inicial. Numa categoria com deslocamento infinito ou com filtros assíncronos, a página volta ao estado de partida: os produtos carregados por deslocamento deixam de existir no regresso.
O estado de navegação não está no URL. Se a paginação, os filtros e a ordenação não se refletem no endereço, o navegador não tem forma de os repor.
Esta última causa é a mais estruturante: sem estado no URL, nenhuma reposição fiável é possível.
O que deve ser memorizado
Quatro elementos, dos quais só dois são óbvios.
A posição de deslocamento. O mais visível, e paradoxalmente o menos importante: se os produtos certos estiverem apresentados, o visitante reencontra depressa a sua referência.
A página atual ou o número de lotes carregados. É o ponto decisivo. Um visitante que chegou ao sexagésimo produto tem de reencontrar esses sessenta produtos, não os vinte primeiros.
Os filtros e a ordenação ativos. Têm de estar no URL, o que resolve o problema independentemente de qualquer mecanismo de memorização.
O produto consultado. Repor a posição é bom, trazer o visitante exatamente para a miniatura do produto que acabou de ver, com um ligeiro destaque, é nitidamente melhor. Reencontra o fio de imediato.
Scroll Infinito PrestaShop: Paginação SEO e Regresso à PosiçãoScroll infinito em categoria com paginação SEO preservada e regresso à posição exata depois de visitar uma ficha de produto.69,00€
As duas abordagens técnicas
O estado no URL. Cada mudança de filtro, de ordenação ou de página atualiza o endereço sem recarregar. O regresso repõe naturalmente o estado porque o endereço o descreve.
É a abordagem mais robusta: funciona também para partilhar a ligação, abrir num separador novo e para a indexação. Em contrapartida exige uma gestão limpa do histórico de navegação, com a distinção entre as mudanças que criam uma entrada de histórico e as que substituem a entrada atual.
A regra útil: uma mudança de filtro cria uma entrada, um simples deslocamento substitui a entrada atual. Sem essa distinção, o botão de retrocesso obriga o visitante a atravessar dez estados intermédios para sair da categoria.
O armazenamento de sessão. O estado é guardado do lado do navegador ao sair da página e reposto no regresso. Mais simples de implementar, e limitado: não funciona numa ligação partilhada nem num separador novo.
A combinação que funciona: o URL carrega os filtros, a ordenação e a paginação, o armazenamento de sessão carrega a posição de deslocamento e o identificador do último produto consultado.
O caso do separador novo
Comportamento muito difundido e raramente tratado: o visitante abre as fichas de produto em separadores novos, mantém cinco abertos, e volta ao separador da categoria.
Boa notícia: nesse caso, o separador da categoria não foi recarregado e o seu estado está intacto. Não é preciso mecanismo nenhum.
Dois pontos de vigilância ainda assim. Se a sua página recarrega automaticamente o conteúdo quando volta a ter foco, para atualizar os stocks por exemplo, destrói esse estado. E o destaque do último produto consultado não funciona neste cenário, já que foram abertos vários produtos.
A boa prática consiste em marcar visualmente todos os produtos já consultados na grelha, não só o último. É útil nos dois cenários e ajuda o visitante a orientar-se numa lista longa.
Deslocamento infinito ou paginação
O regresso à posição é mais difícil no deslocamento infinito, e isso pesa na escolha entre os dois.
Na paginação clássica, o URL contém o número de página, o regresso funciona naturalmente, e a indexação é simples. O inconveniente é o clique adicional em cada página.
No deslocamento infinito, a experiência de percurso é mais fluida mas surgem três problemas: o regresso à posição, o acesso ao rodapé que se torna inalcançável, e a indexação dos produtos carregados dinamicamente.
A solução intermédia resolve a maioria destes pontos: um deslocamento que carrega automaticamente dois ou três lotes, e depois um botão «ver mais» explícito, com atualização do URL a cada lote. Conserva a fluidez do início do percurso, o endereço continua partilhável, e o rodapé volta a ser alcançável.
O que parte a reposição
Quatro situações a verificar depois da implementação.
A cache do servidor. Uma página em cache pode ser servida num estado diferente do esperado. Verifique o comportamento em condições reais, não só em ambiente de desenvolvimento.
A mudança de stock. Se um produto fica indisponível entre a saída e o regresso, a grelha muda e a posição memorizada deixa de corresponder. Reponha pelo identificador do produto em vez de por uma posição em pixels.
A apresentação responsiva. Uma posição em pixels calculada em computador não faz sentido nenhum se o visitante rodou o telemóvel entretanto. É mais uma razão para raciocinar em produto e não em distância.
Os blocos de altura variável. Uma faixa promocional ou um bloco carregado tarde desloca a grelha. Espere pelo fim do carregamento dos elementos acima da grelha antes de repor.
Medir
Chegam dois indicadores, e o segundo é o que conta.
O número de produtos vistos por sessão nas categorias em causa. Um visitante que deixa de perder a posição consulta mecanicamente mais.
A taxa de regresso à categoria a partir das fichas de produto. Se subir depois da implementação, o seu percurso de comparação funciona. Se ficar baixa, o problema está noutro sítio, provavelmente na própria ficha.
O módulo Scroll Infinito para PrestaShop trata este comportamento no PrestaShop 8 e 9: carregamento progressivo com atualização do endereço a cada lote, reposição da página e da posição no regresso a partir de uma ficha, marcação dos produtos já consultados e botão explícito depois dos primeiros lotes para manter o acesso ao rodapé.