Le pagine del negozio e i blocchi di pagamento

Modulo 2: Installazione e configurazione · Tempo di lettura: 9 minuti

Obiettivo della lezione: Al termine di questa lezione saprà riconoscere e collegare correttamente le pagine del negozio di WooCommerce e potrà scegliere con consapevolezza tra i blocchi e gli shortcode per carrello e pagamento.

Concetti chiave: pagina del negozio, carrello, pagamento, Il mio account, pagina delle condizioni, impostazione delle pagine, blocchi, shortcode, tema a blocchi, tema classico, compatibilità delle estensioni, noindex

Quattro pagine con un ruolo speciale

Un sito WordPress è composto da pagine e articoli (corso WordPress, lezione 4.2). WooCommerce aggiunge i prodotti come tipo di contenuto a sé e assegna ad alcune normali pagine un ruolo speciale. Nell’elenco Pagine queste pagine sembrano uguali a tutte le altre, ma WooCommerce sa quale pagina svolge quale compito. Questa informazione si trova nelle impostazioni, non nel nome o nell’indirizzo della pagina.

Poiché il collegamento si trova nelle impostazioni, può dare alle pagine un titolo e un indirizzo diversi. Casa del Tè Example, un negozio online a Utrecht (Paesi Bassi), chiama il carrello "Mandje" (cestino) all’indirizzo /mandje/, e funziona, purché quella pagina sia indicata come carrello in Impostazione pagina.

Se il collegamento non è corretto, se ne accorgerà in punti inattesi. Alcuni esempi frequenti:

• Qualcuno elimina la pagina Carrello perché "era doppia". In seguito un visitatore, dopo aver cliccato Aggiungi al carrello, arriva su una pagina di errore, e alcuni temi non mostrano più il carrello nell’intestazione.
• Dopo un trasferimento o un’importazione, a Pagamento è collegata una pagina diversa da quella con il blocco di pagamento. Il visitatore vede una pagina vuota e non può ordinare.
• Dopo aver eseguito una seconda volta la procedura guidata nasce una seconda pagina "Pagamento-2". Una pagina è collegata, l’altra è nel menu.

Per questo, dopo ogni modifica importante (tema, trasferimento, importazione), controlli in Impostazione pagina quale pagina è collegata e apra quella pagina.

Blocchi o shortcode

Carrello e pagamento possono comparire sulla pagina in due modi.

Gli shortcode sono il metodo tradizionale: sulla pagina c’è un breve codice tra parentesi quadre, come [woocommerce_cart] e [woocommerce_checkout]. Al momento della visualizzazione WooCommerce lo sostituisce con il modulo. La grafica proviene dal tema, e moltissime estensioni sono state sviluppate per anni per questa forma.

I blocchi sono il metodo nuovo: la pagina contiene il blocco Carrello o Pagamento, composto da blocchi più piccoli (indirizzo, spedizione, metodo di pagamento, riepilogo, il pulsante d’ordine). Li vede e li modifica nell’editor a blocchi (corso WordPress, lezione 4.1). I blocchi comunicano con il server tramite la Store API (lezione 2.4): il modulo funziona direttamente nel browser, senza ricaricare ogni volta la pagina.

Da WooCommerce 8.3 (novembre 2023) una nuova installazione riceve i blocchi. Un negozio esistente che si aggiorna mantiene ciò che aveva. Gli shortcode restano disponibili.

Quale scegliere? Alcune domande possono aiutarLa:

• Le Sue estensioni funzionano con i blocchi? È la domanda più importante. Un’estensione che aggiunge un campo al pagamento (una data di consegna, una partita IVA, un messaggio regalo) deve essere stata adattata appositamente per i blocchi. Sulla pagina dell’estensione di solito è indicato se è "compatibile con il blocco di pagamento". Nell’editor del blocco di pagamento WooCommerce può mostrare un avviso sulle estensioni attive non contrassegnate come compatibili.
• Quale tema utilizza? Con un tema a blocchi (corso WordPress, lezione 5.1) i blocchi si integrano al meglio. Con un tema classico funzionano ugualmente, ma la grafica si armonizza in modo meno naturale.
• Deve personalizzare il pulsante d’ordine? Con i blocchi il testo del pulsante si imposta nell’editor. Per le regole che lo riguardano (lezione 5.4) è una comodità.
• Vuole che la Store API sia pubblica? Con i blocchi deve essere raggiungibile; un plugin di sicurezza che chiude l’API REST blocca il pagamento.

Casa del Tè Example non usa estensioni che aggiungono campi e ha un tema a blocchi. Mantiene quindi i blocchi. Un altro negozio, con un plugin per la data di consegna che funziona solo con lo shortcode, sceglie temporaneamente lo shortcode e ricontrolla a ogni aggiornamento importante di quel plugin.

Se cambia forma, lo faccia nel Suo negozio di prova e poi provi un ordine completo (lezione 4.5). In WooCommerce > Stato > Strumenti WooCommerce offre uno strumento per ricreare le pagine del negozio mancanti; crea pagine nuove, ma non converte quelle esistenti.

Perché carrello e pagamento non devono comparire nei motori di ricerca

Un carrello è diverso per ogni visitatore, e per un motore di ricerca è sempre vuoto. Un carrello vuoto nei risultati di ricerca non serve a nessuno. Per questo WooCommerce imposta da sé un noindex sulle pagine carrello, pagamento e Il mio account: il motore di ricerca può visitare la pagina, ma non la inserisce nei risultati. Nel codice sorgente lo vede così:

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

Un plugin SEO o un tema può sovrascrivere questa riga. Raramente è voluto. Nell’esercizio di questa lezione verificherà che sia presente.

Queste stesse tre pagine non devono finire nella cache delle pagine. WooCommerce invia intestazioni HTTP che indicano alle cache di non conservare la pagina. Come verificare che la Sua cache le rispetti è l’argomento della lezione 6.4.

Che cosa vede un visitatore senza carrello

Se apre la pagina di pagamento senza nulla nel carrello, succede qualcosa di diverso rispetto a quando ci sono articoli:

• Con i blocchi la pagina di pagamento di solito mostra un avviso che il carrello è vuoto, con un pulsante per tornare al negozio.
• Con lo shortcode WooCommerce spesso La reindirizza al carrello.

Entrambi i comportamenti sono normali. Il controllo di questa lezione ne tiene conto: il programma non mette mai nulla nel Suo carrello e osserva solo ciò che vede un visitatore senza carrello.

In pratica: ecco come appare in WooCommerce

Con altri temi e altri provider di hosting funziona in modo simile; cambia solo la grafica.

1. Vada su WooCommerce > Impostazioni > Avanzate (Advanced) e apra Impostazione pagina (Page setup). Annoti quale pagina è indicata per Carrello, Pagamento, Il mio account e Termini e condizioni.
2. In Pagine apra ciascuna di queste pagine e controlli che contenga il blocco (o lo shortcode).
3. Apra la pagina di pagamento nell’editor. Clicchi sul blocco Pagamento e osservi le parti nella vista elenco: dati di contatto, indirizzo di spedizione, opzioni di spedizione, opzioni di pagamento, nota, condizioni, il pulsante.
4. Verifichi nell’editor del blocco di pagamento (e nelle estensioni stesse) se compare un avviso su estensioni non compatibili con i blocchi.
5. Apra il carrello in una finestra privata e visualizzi il codice sorgente (Ctrl+U): cerchi noindex.

Riepilogo

• WooCommerce assegna un ruolo a quattro pagine (negozio, carrello, pagamento, Il mio account) più la pagina delle condizioni; il collegamento si trova nelle impostazioni, non nel nome.
• Dopo un trasferimento, un’importazione o un cambio di tema controlli i collegamenti in Impostazione pagina.
• Da WooCommerce 8.3 i nuovi negozi ricevono i blocchi; gli shortcode esistono ancora. Scelga in base alle Sue estensioni e al Suo tema.
• I blocchi hanno bisogno della Store API; non chiuda l’API REST.
• Carrello, pagamento e Il mio account ricevono da WooCommerce un noindex e non devono finire nella cache.

Quiz

Esercizio

Esercizio A2.2: Le pagine del Suo negozio. Inserisca l’indirizzo del Suo negozio (di prova) e gli indirizzi del carrello, della pagina di pagamento e di Il mio account (percorso, come /carrello/, oppure l’URL completo sullo stesso host). Il programma richiede ogni pagina una sola volta, senza cookie e senza mettere nulla nel carrello.

Per ogni pagina il risultato è corretto se:

• la pagina risponde tramite https con stato 200;
• l’HTML contiene un elemento distintivo di WooCommerce: per il carrello il blocco wp-block-woocommerce-cart o la classe del body woocommerce-cart, per il pagamento wp-block-woocommerce-checkout o woocommerce-checkout, per Il mio account woocommerce-account o un modulo di accesso di WooCommerce;
• è presente un noindex (meta robots o intestazione X-Robots-Tag).

Se la pagina di pagamento, con il carrello vuoto, reindirizza al carrello che ha indicato, anche questo è corretto.

Arancione: nessun noindex (verifichi se un plugin SEO o il Suo tema lo rimuove); la pagina usa lo shortcode anziché il blocco (non è un errore, ma resta la domanda se sia una scelta consapevole). Rosso: uno stato di errore come 404, una pagina senza elemento distintivo di WooCommerce (colleghi la pagina corretta in Impostazione pagina), un reindirizzamento a un altro host, oppure http senza https.

Annoti poi per Suo uso quale forma (blocchi o shortcode) utilizza e perché.

Per saperne di più

• Corso gratuito WordPress 5.1: Temi: temi a blocchi e temi classici
• Corso gratuito WordPress 4.2: Pagine, articoli, categorie e tag
• Corso gratuito WordPress 4.1: L'editor a blocchi
• WooCommerce 8.3: blocchi predefiniti per i nuovi negozi (developer.woocommerce.com, in inglese): https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• La Store API (developer.woocommerce.com, in inglese): https://developer.woocommerce.com/docs/apis/store-api/