Gli shortcode e i template di WooCommerce

Come avrai notato fino adesso, nel momento in cui installiamo WooCommerce, vengono create delle pagine:

• Shop
• Carrello
• Checkout
• Prodotti

A seconda del tema che stai usando l’aspetto di queste pagine potrebbe cambiare.

Devi infatti sapere che, visto il largo utilizzo di WooCommerce, molti temi, soprattutto quelli più completi che noi chiamiamo premium, programmano l’aspetto visivo di queste pagine per meglio adattarle al proprio stile, con il risultato di dare all’utente un’esperienza unica per il tuo sito.

In questa lezione vedremo come fare un passo ulteriore verso la personalizzazione.

Infatti non è detto che devi mantenere le pagine di WooCommerce come si presentano di default, ma per capire meglio come muoverti, dobbiamo fare una piccola premessa su due aspetti.

Il primo riguarda il concetto di template.

Le pagine come lo shop, il carrello e il checkout sono pagine “uniche”.

Infatti non ci sono, all’interno del tuo sito, più pagine carrello o più pagine checkout.

Al contrario, per i prodotti, abbiamo una grafica e layout fisso, in cui cambiano ovviamente foto e contenuti, ma cone le impostazioni di base che rimangono uguali.

Questo si chiama template.

Immaginalo come una gabbia all’interno della quale WooCommerce richiama i dati dei differenti prodotti e li impagina per poi mostrarli all’utente.

Fra poco scoprirai perché è importante che tu abbia chiaro questo concetto.

Il secondo punto riguarda gli shortcode.

Gli shortcode sono delle stringhe di testo inserite all’interno dell’editor di WordPress.

L’editor può essere quello principale dove inserisci il contenuto delle pagine - o degli articoli -, ma anche quello che ritrovi in molti moduli del layout builder.

L’aspetto di uno shortcode è questo:

[nomeShortcode]

come vedi ci sono delle parentesi quadre all’interno delle quali viene inserito il nome dello shortcode.

Ok, ma cosa fa? Qual è la sua funzionalità?

Come dice la parola stessa, uno shortcode funziona come segnaposto per l’esecuzione di codice PHP, che viene elaborato in fase di composizione della pagina da parte del server.

Gli shortcode possono essere creati e messi a tua disposizione sia dal tema che dai plugin che hai installato.

Perfetto, traduciamolo in parole povere con un esempio.

Gli sviluppatori del tuo tema vogliono darti la possibilità di inserire nel testo il nome dell’utente autenticato nel sito.

Se ci pensi bene, non potresti scrivere questa cosa “a mano”, poiché il contenuto è diverso a seconda di chi sta richiedendo la pagina, pertanto non lo puoi sapere.

Con l’utilizzo dello shortcode tutto questo diventa possibile, poiché possono accedere ai dati tramite il codice PHP eseguito sul server.

Quindi quando il server compone la pagina, una volta che arriva ad analizzare il contenuto dell’editor di testo, incontra queste parentesi quadre e dice:

“Ok, ci sono delle parentesi quadre, ci potrebbe essere del lavoro per me. È uno shortcode il cui nome è “nomeUtente”.

Vediamo se dentro al codice del tema o dei plugin gli sviluppatori hanno programmato questo shortcode.

Si, perfetto, eccolo qui. Vediamo cosa mi dicono di fare… devo prendere il nome dell’utente autenticato… preso… e poi lo stampo nella pagina. Ok tutto fatto!”.

Certo questo esempio è proprio base, ma è anche vero che si trovano shortcode di tutti i tipi, dal più semplice al più complesso.

Ecco il caso di uno shortcode utilizzato da WooCommerce:

woocommerce_cart (tra parentesi quadre)

Se vai nella pagina di modifica del carrello, infatti, lo troverai inserito nell’editor di testo.

Da quanto appena spiegato, capirai come il compito di questo shortcode sia quello di recuperare tutti i prodotti aggiunti al carrello dall’utente, recuperare i prezzi, le anteprime, fare i dovuti conti, stampare il pulsante “Concludi Ordine”, ecc...

Stesso discorso vale per lo shortcode

woocommerce_checkout (tra parentesi quadre)

Responsabile di tutti i contenuti WooCommerce della pagina checkout.

Quindi il form per l’inserimento dei dati dell’utente, il resoconto dell’acquisto, l’output dei diversi metodi di pagamento che hai abilitato, ecc...

Per chiudere l’argomento shortcode, manca ancora un ultimo dettaglio.

Lo shortcode può avere anche dei parametri e vengono scritti in questa forma:

add_to_cart id="99"

Dove in sequenza trovi il nome dello shortcode, seguito dal nome del parametro con la relativa assegnazione del valore.

Ti dice niente la voce add_to_cart con la specifica dell’ID?

Potrebbe forse essere che questo segnaposto ti stampi il bottone per aggiungere al carrello il prodotto con ID 99?

Esatto… come vedi tutto sta prendendo forma e i pezzi del puzzle trovano il loro spazio.

Un’ultima forma in cui potresti trovare uno shortcode è questa:

[nomeShortcode p=”valore”]Testo… testo… testo…[/nomeShortcode]

In questo caso abbiamo uno shortcode di apertura con gli eventuali parametri, del contenuto testuale seguito dallo shortcode di chiusura, identico allo shortcode di apertura, ma con uno slash prima del nome.

Questo viene solitamente utilizzato quando la funzione dello shortcode è quella di recuperare il blocco di testo inserito, fare un elaborazione, per esempio trattarlo con una certa grafica, e stampare il lavoro finito nella pagina dell’utente.

Un ultimo avvertimento per gli shortcode.

Il server non è dotato di intelligenza, pertanto se farai errori di ortografia o sintassi lo shortcode non potrà funzionare.

Da tutto questo avrai capito l’arma in più a disposizione che il sistema di programmazione di WordPress permette, quindi non solo nel caso di WooCommerce, ma anche per tutti i temi e plugin.

Pertanto sai che potrebbe essere utile leggere la documentazione del prodotto che stai utilizzando, che sia un tema o un plugin, per cercare gli shortcode messi a disposizione dai programmatori.

Ma torniamo ai nostri punti fondamentali per completare la spiegazione: pagine WooCommerce, template e gli shortcode.

Ora avrai capito come, per le pagine “uniche”, quali il carello e il checkout, puoi personalizzare e utilizzare il builder di layout per creare la tua gabbia, dandogli l’aspetto visivo che desideri

Senza scordarsi di inserire lo shortcode di WooCommerce dedicato a quella pagina e di segnalarla a WooCommerce nelle impostazioni viste nelle lezioni precedenti.

Ma non ti preoccupare che nella prossima lezione avrai un esempio concreto su come fare.

E per i prodotti? Il discorso è un po’ diverso.

Non pensare di poter cambiare il template del prodotto, ovvero fare le modifiche una volta sola e vederle adattate a tutti i prodotti in automatico.

Quello che puoi fare è modificare tramite il Builder il singolo prodotto, rendendolo diverso dagli altri per cui è stato utilizzato il template prodotto del tuo tema.

Il consiglio che posso darti, quindi, è basato sul numero di prodotti che hai nel tuo negozio online.

Se sono molti, allora puoi utilizzare il template normale e andare a personalizzare solo alcuni prodotti, per esempio quelli di punta o in offerta.

Se invece hai pochi prodotti, come i video corsi Webipedia, allora puoi decidere di personalizzare con il builder ogni pagina prodotto, avendo così la libertà massima di espressione.

... E se hai tantissimi prodotti, ma il template della pagina prodotto non ti piace?

Allora in questo caso devi creare un nuovo template, cosa sì fattibile, ma tramite programmazione.

Dovrai quindi chiedere consulenza a uno sviluppatore freelance.

Siamo in chiusura di questa lezione teorica e ti voglio lasciare con un’ultima precisazione.

Logica vuole che se uno shortcode restituisce, per esempio, nome, cognome, email e indirizzo, non potrai andare a stampare il nome e il cognome in un blocco, e l’email con l’indirizzo in un altro (a meno che lo shortcode non abbia dei parametri che te lo permettano).

Ricordati sempre che non stai creando una brochure grafica, dove prendi i singoli elementi e li sposti nella pagina come meglio desideri.

Il web è dinamico, i contenuti sono dinamici, e pertanto si deve fare sempre i conti con la programmazione e con gli strumenti che questa ci ha messo a disposizione.

Ci vediamo nel prossimo video.