Shopify: personalizzare la mail di notifica degli ordini

I sistemi “prefabbricati” mi sono sempre sembrati una soluzione limitante e, sul lungo periodo costosa, almeno per i business più grandi. Forse perché sviluppando software per mestiere queste soluzioni preconfezionate mi suscitano le stesse sensazioni che provano gli ebanisti davanti ai mobili Ikea. Il problema più grande che si incontra di solito è la difficoltà di personalizzazione, ma devo dire che Shopify fa eccezione.

Come personalizzare la mail di conferma degli ordini su Shopify

La richiesta era quella di aggiungere dei link, diversi per ogni prodotto e per ogni variante di prodotto, all’interno della email che riceve il cliente dopo aver concluso un ordine. Un poco come i Custom Fields di WordPress, su Shopify esistono i Metafields.

Creare un campo personalizzato con i Metafields

Creando quindi un metafield per i prodotti e uno per le varianti, rispettivamente appariranno all’interno delle schede dei prodotti e delle singole varianti del catalogo dello shop. Dopo il login sul pannello di amministrazione cliccare su Settings -> Custom Data -> Products e cliccare sul pulsante in alto a destra Add definition.

I campi da compilare sono piuttosto autoesplicativi. Il campo Name andrà a comporre anche il valore del namespace and key che sarà il valore da segnarci per il futuro utilizzo. Occorre anche selezionare il tipo di campo da aggiungere alla scheda prodotto: nel nostro caso sceglieremo Url e salviamo. Apparirà il riepilogo dei metafield con indicato per esteso il namespace and key del campo appena creato: nel nostro caso product.metafields.custom.pdf.

Cliccando ci nuovo su Custom Data -> Variants e in alto a destra Add definition si seguirà una procedura del tutto analoga e otterremo la stringa variant.metafields.custom.pdf. Possiamo quindi chiudere per il momento le impostazioni e tornare alla home del pannello di amministrazione di Shopify.

A questo punto potremo compilare il campo che abbiamo appena creato sia per ciascun prodotto che per ciascuna sua variante. In entrambe le schermate si troverà in fondo, all’interno del blocco Metafields.

Personalizzare la mail di conferma degli ordini

Per personalizzare la mail che un cliente riceve come conferma dell’acquisto effettuato occorre cliccare Settings -> Notifications -> Customer Notifications -> Order confirmation e cliccare il pulsante in alto a destra Edit Code. Comparirà un campo modificabile contenente il codice del template della email che intervalla html con frammenti di codice per eseguire semplici operazioni. Attorno alla riga 177 inizia il ciclo che stampa il riepilogo di tutti i prodotti acquistati.

[...]
<table class="row">
  {% for line in subtotal_line_items %}
  <tr class="order-list__item">
[...]

All’interno di questo ciclo si hanno a disposizione tutte le informazioni riferite al prodotto e l’eventuale variante acquistata, anche quelle che abbiamo inserito nei metafields creati. Se si ha dimestichezza con un qualsiasi linguaggio di programmazione il codice è di facile lettura.

<td class="order-list__product-description-cell">
  [...]
  {% if line.product.metafields.custom.pdf %}	
    {% assign line_pdf = line.product.metafields.custom.pdf %}	
  {% else %}	
    {% assign line_pdf = '' %}	
  {% endif %}

  {% if line.variant.metafields.custom.pdf %}	
     {% assign line_pdf = line.variant.metafields.custom.pdf %}
  {% endif %}          
  [...]

  <span class="order-list__item-title">
     {{ line_title }} × {{ line_display }} 
            
  {% if line_pdf != '' %}
    - <a href="{{ line_pdf }}" target="_blank">scheda</a>
  {% endif %}

Le righe che sono state aggiunte controllano che esista un valore inserito nel campo pdf del prodotto utilizzando il namespace di cui sopra, line.product.metafields.custom.pdf, ed eventualmente lo si assegna alla variabile line_pdf. In seconda battuta si controlla l’esistenza del metafield della variante e, se presente, lo si assegna alla variabile line_pdf sovrascrivendo il precedente valore assegnato.

Nelle ultime righe si verifica che la variabile line_pdf abbia un valore non vuoto e lo inserisce come link con etichetta scheda.

Fatte le modifiche, salvare. Per verificare il funzionamento della modifica bisogna compilare i metafields dei prodotti mostrati all’interno della preview. In questo modo, il funzionamento sarà visibile da questa schermata.