Aggiorna i template di Liquid per gli script

Se esegui gli script su un negozio online, devi controllare come questi influiscono sulle pagine nel tuo negozio. Molti temi, ma non tutti, includono il codice per il supporto degli script. Se il tuo tema non possiede questo codice, lo puoi aggiungere.

Risoluzione dei problemi

La maggior parte dei problemi relativi a script e temi riguarda script di voci dell'ordine che offrono sconti. Ad esempio, il prezzo totale dell'ordine è corretto, ma i prezzi degli articoli non riportano gli sconti. I clienti devono poter capire come vengono calcolati gli sconti. Desiderano vedere il prezzo originale e quello scontato e una breve descrizione dello sconto. Se uno di questi dettagli non è indicato nel carrello, è necessario aggiungere il codice Liquid in modo che venga visualizzato.

Un modo efficace per verificare l'impatto dello script sul negozio è visitarlo come cliente ed eseguire le azioni che attivano lo script.

Attributi degli oggetti Liquid

I seguenti elenchi contengono gli attributi degli oggetti Liquid comunemente necessari per il supporto degli script nel carrello del tuo negozio:

Attributi dell'oggetto carrello:

Attributi della voce dell'ordine:

Oggetto script:

  • L'oggetto script può essere utilizzato per restituire informazioni sugli script attivi di un negozio. Questo oggetto può risultare utile durante il debug degli script.

Esempio

Il seguente esempio descrive le modifiche che puoi apportare al template cart.liquid per supportare uno script di voci dell'ordine.

Carrello di esempio

Ad esempio, se il tuo carrello contiene tre voci:

  • Pallone da calcio - Quantità: 1

    • Prezzo unitario: € 15,00
  • Palla da tennis - Quantità: 5

    • Prezzo unitario: € 5,00
  • Scarpe da running - Quantità: 1

    • Prezzo unitario: € 30,00

E hai pubblicato uno script che applica i seguenti sconti:

  • 10% di sconto su due o più palline da tennis
  • € 5 di sconto su tutte le scarpe

Allora il tuo template cart.liquid potrebbe essere una semplice tabella che elenca lle voci e un riepilogo dei relativi importi totali:

<table class="cart">
  <thead class="heading">
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>

  <tbody class="line-items">
    {% for item in cart.items %}
    <tr>
      <td>{{ item.product.title }}</td>
      <td>{{ item.quantity }}</td>
      <td>{{ item.line_price | money }}</td>
    </tr>
    {% endfor %}
  </tbody>

  <tfoot class="summary">
    <tr>
      <td colspan="2">Total</td>
      <td>{{ cart.total_price | money }}</td>
    </tr>
  </tfoot>
</table>

Con gli sconti applicati dallo script, questo template crea per il carrello la seguente tabella:

Prodotto Quantità Totale
Pallone da calcio 1 € 15,00
Palla da tennis 5 € 22,50
Scarpe da running 1 € 25,00
Totale € 62,50

Aggiorna le voci dell'ordine

Per visualizzare gli sconti applicati dallo script, è necessario aggiornare le voci in modo che siano riportate tre informazioni fondamentali:

  • Il prezzo dell'articolo prima degli sconti
  • Il prezzo dell'articolo dopo gli sconti
  • Un messaggio che descrive gli sconti applicati.

Per ottenere questo risultato, utilizza i seguenti attributi dell'oggetto Liquid:

  • line_item.total_discount restituisce l'importo dello sconto applicato alla voce dell'ordine.
  • line_item.original_line_price restituisce il prezzo della voce prima degli sconti.
  • line_item.message restituisce un messaggio che descrive gli sconti applicati alla voce dell'ordine.

Per evidenziare la differenza tra il prezzo originale dell'articolo e quello scontato, può essere utile utilizzare una barratura:

<tbody class="line-items">
  {% for item in cart.items %}
  <tr>
    <td>{{ item.product.title }}</td>
    <td>{{ item.quantity }}</td>
    <td>
      {{ item.line_price }}
      {% if item.total_discount > 0 %}
        <s>{{ item.original_line_price }}</s>
        ( {{ item.message }} )
      {% endif %}
    </td>
  </tr>
  {% endfor %}
</tbody>

Ora il carrello dovrebbe avere il seguente aspetto:

Prodotto Quantità Totale
Pallone da calcio 1 € 15,00
Palla da tennis 5 € 22,50 € 25,00 (10% di sconto su due o più palline da tennis)
Scarpe da running 1 € 25,00 € 30,00 (€ 5 di sconto su tutte le scarpe)
Totale € 62,50

Aggiorna il riepilogo del carrello

Per aiutare il cliente a tenere traccia del prezzo dell'ordine, è necessario che questo riporti anche:

  • Il subtotale originale del carrello, per consentire ai clienti di confrontare i totali prima e dopo gli sconti.
  • Il risparmio totale che il cliente ha ottenuto sul carrello.

Anche in questo caso, per aggiungere tali informazioni devi utilizzare i seguenti attributi di oggetti Liquid:

  • cart.total_discount restituisce l'importo dello sconto applicato agli articoli nel carrello.
  • cart.original_total_price restituisce il subtotale del carrello prima dell'applicazione degli sconti.

Dopo l'aggiunta di queste informazioni il blocco .summary aggiornato potrebbe avere il seguente aspetto:

<tfoot class="summary">
  <tr>
    <td colspan="2">Subtotal</td>
    <td>{{ cart.original_total_price | money }}</td>
  </tr>
  <tr>
    <td colspan="2">Discount Savings</td>
    <td>{{ cart.total_discount | money }}</td>
  </tr>
  <tr>
    <td colspan="2">Total</td>
    <td>{{ cart.total_price | money }}</td>
  </tr>
</tfoot>

Ora la tabella del carrello dovrebbe avere il seguente aspetto:

Prodotto Quantità Totale
Pallone da calcio 1 € 15,00
Palla da tennis 5 € 22,50 € 25,00 (10% di sconto su due o più palline da tennis)
Scarpe da running 1 € 25,00 € 30,00 (€ 5 di sconto su tutte le scarpe)
Subtotale € 70,00
Risparmio per sconti € 7,50
Totale € 62,50

L'aggiunta di alcuni nuovi oggetti Liquid ai template può aiutare i clienti a capire come vengono calcolati gli sconti.

Altri esempi

Il seguente esempio di Liquid mostra gli sconti per ogni voce dell'ordine:

  {% if item.original_line_price != item.line_price %}
  <small class="original-price"><s>{{ item.original_line_price | money }}</s></small>
  {% endif %}
  {{ item.line_price | money }}
  {% for discount in item.discounts %}
  <small class="discount">{{ discount.title }}</small>
  {% endfor %}

Vedi un altro esempio di sconto con inclusi i cambiamenti del codice Liquid.

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis