Páginas da loja e os blocos de finalização de compra

Módulo 2: Instalar e configurar · Tempo de leitura: 9 minutos

Objetivo de aprendizagem: No final desta lição, saberá reconhecer as páginas da loja do WooCommerce e associá-las corretamente, e escolherá de forma consciente entre os blocos e os shortcodes para o carrinho e a finalização da compra.

Conceitos-chave: página da loja, carrinho, finalização da compra, A minha conta, página de termos e condições, configuração da página, blocos, shortcodes, tema de blocos, tema clássico, compatibilidade de extensões, noindex

Quatro páginas com uma função especial

Um site WordPress é composto por páginas e artigos (curso de WordPress, lição 4.2). O WooCommerce acrescenta os produtos como um tipo de conteúdo próprio e atribui a algumas páginas comuns uma função especial. Na lista de Páginas, essas páginas parecem iguais a qualquer outra, mas o WooCommerce sabe que tarefa cabe a cada uma. Essa informação está nas configurações, não no nome nem no endereço da página.

Como a associação está nas configurações, pode dar às páginas outro título e outro endereço. A Theehuis Example chama ao carrinho "Cesto", em /cesto/, e isso funciona, desde que essa página esteja definida como carrinho em Configuração da página.

Se a associação falhar, nota-se em sítios inesperados. Alguns exemplos frequentes:

• Alguém elimina a página Carrinho porque "estava em duplicado". A partir daí, um visitante que clica em Adicionar ao carrinho vai parar a uma página de erro, e alguns temas deixam de mostrar o cesto no cabeçalho.
• Depois de uma migração ou importação, em Finalizar compras está associada uma página diferente da página que contém o bloco de finalização de compra. O visitante vê uma página vazia e não consegue encomendar.
• Surge uma segunda página "Finalizar-compras-2" depois de executar o assistente uma segunda vez. Uma página está associada, a outra está no menu.

Por isso, após cada alteração importante (tema, migração, importação), verifique em Configuração da página qual a página associada e abra essa página.

Blocos ou shortcodes

O carrinho e a finalização da compra podem ser colocados na página de duas formas.

Os shortcodes são a forma antiga: na página existe um código curto entre parênteses retos, como [woocommerce_cart] e [woocommerce_checkout]. Ao mostrar a página, o WooCommerce substitui-o pelo formulário. O aspeto visual vem do tema, e muitíssimas extensões foram desenvolvidas durante anos para este formato.

Os blocos são a forma nova: a página contém o bloco Carrinho ou Finalizar compras, composto por blocos mais pequenos (endereço, envio, método de pagamento, resumo, o botão de encomenda). Pode vê-los e editá-los no editor de blocos (curso de WordPress, lição 4.1). Os blocos comunicam com o servidor através da Store API (lição 2.4): o formulário funciona diretamente no navegador, sem recarregar a página a cada passo.

Desde o WooCommerce 8.3 (novembro de 2023), uma instalação nova recebe os blocos. Uma loja existente que é atualizada mantém o que tinha. Os shortcodes continuam disponíveis.

Qual escolher? Algumas perguntas ajudam:

• As suas extensões funcionam com os blocos? Esta é a pergunta mais importante. Uma extensão que acrescenta um campo à finalização da compra (uma data de entrega, um número de IVA, uma mensagem de oferta) tem de ter sido adaptada especificamente para os blocos. Na página da extensão costuma indicar-se se é "compatível com o bloco de finalização de compra". No editor do bloco de finalização de compra, o WooCommerce pode mostrar um aviso sobre extensões ativas que não estão assinaladas como compatíveis.
• Que tema utiliza? Com um tema de blocos (curso de WordPress, lição 5.1), os blocos encaixam melhor. Com um tema clássico também funcionam, mas o aspeto visual fica menos naturalmente harmonizado.
• Precisa de alterar o botão de encomenda? Nos blocos, o texto do botão define-se no editor. Para as regras aplicáveis a esse respeito (lição 5.4), isso é prático.
• Aceita que a Store API seja pública? Com os blocos, tem de estar acessível; um plugin de segurança que bloqueie a API REST impede a finalização da compra.

A Theehuis Example não utiliza extensões que acrescentam campos e tem um tema de blocos. Mantém os blocos. Outra loja, com um plugin de data de entrega que só funciona com o shortcode, opta temporariamente pelo shortcode e volta a verificar a cada atualização importante desse plugin.

Se mudar de formato, faça-o na sua loja de teste e, em seguida, teste uma encomenda completa (lição 4.5). Em WooCommerce > Estado > Ferramentas, o WooCommerce dispõe de uma ferramenta para voltar a criar páginas da loja em falta; esta cria páginas novas, não converte as existentes.

Porque é que o carrinho e a finalização da compra não devem aparecer nos motores de pesquisa

Um carrinho é diferente para cada visitante e, para um motor de pesquisa, está sempre vazio. Um carrinho vazio nos resultados de pesquisa não ajuda ninguém. Por isso, o WooCommerce coloca automaticamente um noindex nas páginas do carrinho, da finalização da compra e de A minha conta: o motor de pesquisa pode visitar a página, mas não a inclui nos resultados de pesquisa. No código-fonte, aparece assim:

<meta name='robots' content='noindex, follow' />

Um plugin de SEO ou o tema pode substituir essa linha. Raramente é intencional. No exercício desta lição, verifica se ela está presente.

Essas mesmas três páginas também não devem ficar na cache de páginas. O WooCommerce envia cabeçalhos que indicam às caches que não podem guardar a página. A forma de verificar se a sua cache respeita isso é tratada na lição 6.4.

O que vê um visitante sem carrinho

Se abrir a página de finalização de compra sem nada no carrinho, acontece algo diferente do que com artigos no carrinho:

• Com os blocos, a página de finalização de compra mostra normalmente um aviso de que o carrinho está vazio, com um botão para voltar à loja.
• Com o shortcode, o WooCommerce reencaminha frequentemente para o carrinho.

Ambos os comportamentos são normais. A verificação desta lição tem isso em conta: o programa nunca coloca nada no seu carrinho e analisa apenas o que um visitante sem carrinho vê.

Na prática: o aspeto no WooCommerce

Noutros temas e fornecedores de alojamento funciona de forma semelhante; só o aspeto visual difere.

1. Aceda a WooCommerce > Configurações > Avançado (Advanced) e abra Configuração da página (Page setup). Anote que página está definida em Carrinho, Finalizar compras, A minha conta e Termos e condições.
2. Em Páginas, clique em cada uma dessas páginas e verifique se o bloco (ou o shortcode) está presente.
3. Abra a página de finalização de compra no editor. Clique no bloco Finalizar compras e veja os componentes na vista de lista: dados de contacto, endereço de envio, opções de envio, opções de pagamento, nota, termos e condições, o botão.
4. Verifique no editor do bloco de finalização de compra (e nas próprias extensões) se aparece um aviso sobre extensões não compatíveis com os blocos.
5. Abra o carrinho numa janela privada e veja o código-fonte (Ctrl+U): procure noindex.

Resumo

• O WooCommerce atribui uma função a quatro páginas (loja, carrinho, finalização da compra, A minha conta), além da página de termos e condições; a associação está nas configurações, não no nome.
• Após uma migração, importação ou mudança de tema, verifique as associações em Configuração da página.
• Desde o WooCommerce 8.3, as lojas novas recebem os blocos; os shortcodes continuam a existir. Escolha com base nas suas extensões e no seu tema.
• Os blocos precisam da Store API; não bloqueie a API REST.
• O carrinho, a finalização da compra e A minha conta recebem do WooCommerce um noindex e não devem ficar na cache.

Questionário

Exercício

Exercício A2.2: As páginas da sua loja. Introduza o endereço da sua loja (de teste) e os endereços do carrinho, da página de finalização de compra e de A minha conta (caminho, como /carrinho/, ou o URL completo no mesmo anfitrião). O programa consulta cada página uma vez, sem cookies e sem colocar nada no carrinho.

Para cada página, o resultado é bom se:

• a página responde via https com o estado 200;
• o HTML contém uma marca do WooCommerce: para o carrinho, o bloco wp-block-woocommerce-cart ou a classe do body woocommerce-cart; para a finalização da compra, wp-block-woocommerce-checkout ou woocommerce-checkout; para A minha conta, woocommerce-account ou um formulário de início de sessão do WooCommerce;
• existe um noindex (meta robots ou cabeçalho X-Robots-Tag).

Se a página de finalização de compra, com o carrinho vazio, reencaminhar para o carrinho que introduziu, isso também está bem.

Laranja: sem noindex (verifique se um plugin de SEO ou o seu tema o remove); a página usa o shortcode em vez do bloco (não é um erro, mas convém perguntar se é uma escolha consciente). Vermelho: um estado de erro como 404, uma página sem marca do WooCommerce (associe a página correta em Configuração da página), um reencaminhamento para outro anfitrião, ou http sem https.

Em seguida, anote para si próprio que formato utiliza (blocos ou shortcode) e porquê.

Para saber mais

• Curso gratuito de WordPress 5.1: Temas: temas de blocos e temas clássicos
• Curso gratuito de WordPress 4.2: Páginas, artigos, categorias e tags
• Curso gratuito de WordPress 4.1: O editor de blocos
• WooCommerce 8.3: blocos por predefinição nas lojas novas (developer.woocommerce.com, em inglês): https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• A Store API (developer.woocommerce.com, em inglês): https://developer.woocommerce.com/docs/apis/store-api/