Links das caixas de categoria

Isso foi relatado por um usuário, verifiquei e o que ele diz é verdade.

Configurar caixas de categorias.

No nível superior, onde todas as categorias principais aparecem em caixas e as subcategorias estão vinculadas abaixo, dentro da caixa: se você clicar em uma subcategoria, será direcionado a ela; se clicar em outro lugar da caixa, será direcionado à categoria pai.
Esse é o comportamento esperado.

No entanto…
…se você clicar com o botão direito em uma subcategoria e selecionar “abrir link em nova aba” no menu de contexto do navegador, funciona como esperado: a aba original permanece e a subcategoria abre em uma nova aba. Até aqui, tudo bem.

Mas se você usar Ctrl+Click ou Cmd+Click, o atalho padrão do navegador para abrir link em nova aba, algo estranho acontece.
A subcategoria abre corretamente em uma nova aba, mas a aba original salta para a categoria pai.

Acredito que o que está acontecendo aqui é que o div da caixa tem uma ação JQuery associada a <div ... data-url="link para a categoria principal"> e os links para as subcategorias são links <a> convencionais.
O clique com o botão direito é totalmente tratado pelo navegador e funciona.
O Ctrl+Click é interceptado pelo navegador para abrir o link em nova aba, mas o clique esquerdo básico ainda é passado para o JQuery processar.

Algo semelhante acontece se você tentar isso em uma caixa de categoria exibida dentro de uma categoria.

Isso pode ser corrigido?

3 curtidas

Já tentei corrigir isso antes, simplesmente transformando o link da categoria principal em um link normal.

…mas não seguimos em frente com essa alteração, pois âncoras aninhadas não são HTML válido e causam problemas em alguns navegadores.

No entanto, vou tentar uma técnica diferente, descrita em detalhes aqui: Nested Links Without Nesting Links

Essa correção envolve colocar um link vazio para a categoria pai dentro da caixa e, em seguida, expandir esse link para ocupar toda a caixa. Qualquer sublink ficaria então em uma camada acima desse link, em vez de estar aninhado dentro dele.

7 curtidas

Isso é um truque bastante inteligente. Sara diz:

Pessoalmente, acho que, para uma caixa de categoria, isso provavelmente seria aceitável. Se um usuário quisesse selecionar e copiar algo, provavelmente seria o título e/ou a descrição da categoria, e ambos estariam disponíveis ao clicar na caixa e visualizar a categoria (especialmente se o componente Category Banners estivesse em ação).

3 curtidas

Ok, parece que vai funcionar bem… atualizado aqui

6 curtidas

Este tópico foi fechado automaticamente 5 dias após a última resposta. Novas respostas não são mais permitidas.