Breadcrumbs são aquela linha no topo da página de produto que mostra o caminho: Início, depois a coleção, depois o produto. Ajudam quem chegou por um anúncio ou por uma pesquisa a perceber onde está e a subir um nível sem usar o menu. Alguns temas trazem-nos de origem; outros não, e é aí que entra a abordagem com metacampos.
A ideia é simples: cada produto guarda num metacampo o caminho que deve mostrar, e um pequeno código no tema lê esse metacampo e desenha a linha. Este artigo não repete o código; trata do ponto onde a maior parte das pessoas fica presa ao seguir um tutorial deste tipo: a definição do metacampo.
O que tem de ficar exatamente igual
O código lê o metacampo pelo seu identificador, composto por um namespace e uma chave. Nos tutoriais mais comuns, incluindo o da Academia Shopifyers, esse identificador é custom.breadcrumbs. Se a definição que crias no painel ficar com outro identificador, por exemplo custom.custom_breadcrumbs, o código procura um metacampo que não existe e a linha não aparece, sem mensagem de erro.
Este erro é fácil de cometer porque o painel de metacampos mudou desde que muitos tutoriais foram gravados. Ao criar a definição, se escreveres o identificador completo no campo do nome, o painel acrescenta o prefixo por cima e ficas com custom_ a mais. A solução, quando já aconteceu, é apagar a definição e criá-la de novo, escrevendo apenas breadcrumbs no nome.
Criar a definição no painel atual
Os passos abaixo seguem a documentação do Shopify sobre definições de metacampos; os nomes dos menus podem variar com o idioma do painel.
- Em Definições > Dados personalizados, escolhe Produtos e clica em Adicionar definição.
- No campo Nome, escreve apenas
breadcrumbs. Não escrevascustom.breadcrumbs: o painel acrescenta o namespace sozinho, e se o incluíres no nome ficas comcustom.custom_breadcrumbs. - Confirma a linha mais pequena por baixo do nome, onde aparece o identificador gerado. Deve ler-se
custom.breadcrumbs. A documentação indica que podes editar este identificador antes de guardar, se precisares. - Escolhe o tipo de conteúdo indicado no tutorial que estás a seguir. O tipo tem de bater certo com o que o código espera ler.
- Guarda.
Se o identificador já estava errado quando guardaste, não insistas em editá-lo: depois de guardar, esse campo deixa de estar editável. Apaga a definição e cria-a de novo com o nome certo. Se já tinhas preenchido valores em produtos, vais ter de os voltar a preencher, por isso convém corrigir isto cedo.
Preencher e verificar
Depois da definição criada, cada produto passa a ter o campo na sua página em Produtos, na área de metacampos. Preenche um produto de teste com o caminho, no formato que o tutorial indica, e abre esse produto na loja.
- Se a linha aparece, a definição está certa. Preenche os restantes produtos, ou trata os mais importantes primeiro.
- Se não aparece, volta à definição e compara o identificador letra a letra. Depois confirma que o código foi colocado no modelo de produto que aquele produto usa; um produto ligado a outro modelo não mostra o bloco.
- Se o teu tema já tem breadcrumbs próprios, decide qual das duas versões fica. Duas linhas de caminho na mesma página confundem mais do que ajudam.
Um cuidado com o conteúdo do caminho: se um produto pertence a várias coleções, o metacampo permite escolher qual delas aparece no caminho. Escolhe a coleção que melhor descreve o produto, a mesma que usarias no menu. Isto liga-se à forma como as coleções estão organizadas e à rede de ligações internas da loja: o caminho é mais uma ligação da página de produto para a coleção certa.
Sobre motores de pesquisa: o Google descreve na documentação sobre dados estruturados de breadcrumbs como pode usar esta informação nos resultados. Se o teu tutorial incluir esses dados estruturados, verifica-os com a ferramenta de teste que essa página indica. Se não incluir, a linha continua a servir quem visita; o efeito nos resultados não está garantido por nenhuma das duas versões.
Este artigo foi preparado a partir dos conteúdos da Academia Shopifyers, onde o tutorial completo de breadcrumbs com metacampos está disponível para os membros.
