Risorsa stato dell'ordine JavaScript

Attenzione

Questo è un tutorial avanzato e non è supportato da Shopify. Richiede la conoscenza di linguaggi di web design come HTML, CSS, Javascript e Liquid. Ti consigliamo di rivolgerti a un Partner di Shopify se incontri difficoltà con il tutorial seguente.

Nota

Gli script aggiuntivi per personalizzare la pagina di stato dell'ordine sono deprecati.

I merchant con i piani Basic, Shopify e Advanced possono personalizzare la pagina di stato dell'ordine utilizzando l'editor di check-out e account. I merchant Shopify Plus possono utilizzare Checkout Extensibility per personalizzare la pagina di stato dell'ordine.

Puoi aggiungere contenuti personalizzati alla pagina di stato dell'ordine con la relativa risorsa JavaScript Shopify.Checkout.OrderStatus, come nei seguenti esempi: - note su prodotti specifici - istruzioni per le singole modalità di spedizione - link di download per i prodotti digitali.

Per aggiungere questa risorsa Javascript dal pannello di controllo Shopify, vai su Impostazioni > Check-out. Scorri verso il basso fino alla sezione Pagina di stato dell'ordine, quindi aggiungi la risorsa Javascript nella casella Script aggiuntivi.

Puoi accedere a questa risorsa JavaScript anche tramite ScriptTag.

Come funziona

Shopify.Checkout.OrderStatus contiene una funzione per generare nuovi contenuti:

addContentBox(params)

Questa funzione aggiunge una casella di contenuto in cui ogni parametro passato alla funzione viene visualizzato come una riga separata.

All’interno della funzione è supportato l’HTML5 e puoi utilizzare Liquid esternamente alla funzione.

Esempio

Puoi aggiungere contenuto quando viene selezionato una determinata modalità di spedizione. Questo codice aggiunge le ore lavorative del negozio alla pagina di stato dell'ordine quando un cliente sceglie il ritiro in negozio come modalità di spedizione.

<script>
  {% if checkout.shipping_method.title == 'Pick-up at the store' %}
    Shopify.Checkout.OrderStatus.addContentBox(
     '<h2>Pick-up in store</h2>',
     '<p>We are open everyday from 9am to 5pm.</p>'
    )
  {% endif %}
</script>