Aggiornamento dei modelli Liquid per gli script

Se esegui degli script nel tuo negozio online, devi verificare in che modo influiscono sulle pagine della tua vetrina virtuale. Molti temi includono il codice per supportare gli script, ma alcuni no. Se il tuo tema non ha il codice, puoi aggiungerlo.

In questa pagina

Risoluzione dei problemi

La maggior parte dei problemi con script e temi riguarda gli script per voci che offrono sconti. Ad esempio, il prezzo totale dell’ordine è corretto, ma i prezzi delle voci non mostrano gli sconti. I clienti devono capire come vengono calcolati i loro sconti. Vogliono vedere il prezzo originale e quello scontato, nonché una breve descrizione dello sconto. Se uno di questi dettagli manca nel carrello, devi aggiungere il codice Liquid in modo che vengano visualizzati.

Un buon modo per verificare in che modo i tuoi script influiscono sulla vetrina virtuale è visitare il negozio come se fossi un cliente ed eseguire le azioni che attivano lo script.

Attributi degli oggetti Liquid

Gli elenchi seguenti contengono gli attributi degli oggetti Liquid comunemente necessari per supportare gli script nel carrello del tuo negozio:

Attributi dell'oggetto carrello:

Attributi della voce:

Oggetto script:

Lo script object può essere utilizzato per restituire informazioni sugli script attivi di un negozio. Questo oggetto può essere utile durante il debug degli script.

Esempio

L'esempio seguente descrive le modifiche che puoi apportare al tuo modello cart.liquid per supportare uno script per voci.

Carrello di esempio

Ad esempio, se hai un carrello con tre voci:

Pallone da calcio
- Quantità: 1
- Prezzo unitario: 15,00 $
Pallina da tennis
- Quantità: 5
- Prezzo unitario: 5,00 $
Scarpa da corsa
- Quantità: 1
- Prezzo unitario: 30,00 $

E se hai pubblicato uno script che applica i seguenti sconti:

Sconto del 10% su due o più palline da tennis
5 $ di sconto su tutte le scarpe

In tal caso, il tuo modello cart.liquid potrebbe essere una semplice tabella che elenca le 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 modello crea la tabella seguente per il carrello:

Prodotto	Quantità	Totale
Pallone da calcio	1	15,00 $
Pallina da tennis	5	22,50 $
Scarpa da corsa	1	25,00 $
Totale		62,50 $

Aggiorna le voci

Per mostrare gli sconti applicati dallo script, è necessario aggiornare le voci per mostrare tre informazioni chiave:

il prezzo della voce prima degli sconti
il prezzo della voce dopo gli sconti
un messaggio che descrive gli sconti applicati.

A tal fine, utilizza i seguenti attributi dell'oggetto Liquid:

line_item.total_discount restituisce l’importo dello sconto applicato alla voce
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.

Può essere utile differenziare il prezzo originale della voce da quello scontato utilizzando un effetto barrato:

<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>

Il carrello ora dovrebbe avere questo aspetto:

Prodotto	Quantità	Totale
Pallone da calcio	1	15,00 $
Pallina da tennis	5	22,50 $ ~~25,00 $~~ (sconto del 10% su due o più palline da tennis)
Scarpa da corsa	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, dovresti mostrare anche:

il subtotale originale del carrello, per consentire ai clienti di confrontare i totali prima e dopo lo sconto
il risparmio totale ottenuto dal cliente sul carrello.

Anche in questo caso, per aggiungere queste informazioni, utilizza i seguenti attributi dell'oggetto Liquid:

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

Con queste informazioni, il blocco .summary aggiornato potrebbe avere questo 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>

La tabella del carrello ora dovrebbe avere questo aspetto:

Prodotto	Quantità	Totale
Pallone da calcio	1	15,00 $
Pallina da tennis	5	22,50 $ ~~25,00 $~~ (sconto del 10% su due o più palline da tennis)
Scarpa da corsa	1	25,00 $ ~~30,00 $~~ (5 $ di sconto su tutte le scarpe)
Subtotale		70,00 $
Risparmio da sconti		7,50 $
Totale		62,50 $

Aggiungendo alcuni nuovi oggetti Liquid ai modelli, puoi aiutare i clienti a capire come vengono calcolati gli sconti.

Altri esempi

L'esempio Liquid seguente mostra gli sconti per ogni voce:

{% 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 %}

Visualizza un altro esempio di sconto che include le modifiche al codice Liquid.