Actualizarea șabloanelor Liquid pentru scripturi

Dacă rulați scripturi în magazinul dumneavoastră online, trebuie să verificați modul în care acestea afectează paginile magazinului. Multe teme includ cod pentru a asigura compatibilitatea cu scripturile, dar altele nu. Dacă tema dumneavoastră nu conține codul necesar, îl puteți adăuga.

Depanare

Majoritatea problemelor legate de scripturi și teme implică scripturi pentru rânduri de articole care oferă reduceri. De exemplu, prețul total al comenzii este corect, dar prețurile rândurilor de articole nu afișează reducerile. Clienții trebuie să înțeleagă cum sunt calculate reducerile. Aceștia doresc să vadă prețul original și prețul redus, precum și o scurtă descriere a reducerii. Dacă oricare dintre aceste detalii lipsește din coșul dumneavoastră, atunci trebuie să adăugați codul Liquid pentru ca acestea să apară.

O modalitate bună de a verifica cum afectează scriptul dumneavoastră magazinul online este să îl vizitați în calitate de client și să efectuați acțiunile care declanșează scriptul.

Atributele obiectelor Liquid

Următoarele liste conțin atribute de obiecte Liquid care sunt frecvent necesare pentru a asigura compatibilitatea cu scripturile în coșul magazinului dumneavoastră:

Atributele obiectului coș:

Atributele rândului de articol:

Obiectul script:

  • Obiectul script poate fi utilizat pentru a returna informații despre scripturile active ale unui magazin. Acest obiect poate fi util la depanarea scripturilor.

Exemplu

Următorul exemplu descrie modificările pe care le puteți face șablonului dumneavoastră cart.liquid pentru a asigura compatibilitatea cu un script pentru rânduri de articole.

Exemplu de coș

De exemplu, dacă aveți un coș cu trei rânduri de articole:

  • Minge de fotbal
    • Cantitate: 1
    • Preț unitar: 15,00 $
  • Minge de tenis
    • Cantitate: 5
    • Preț unitar: 5,00 $
  • Pantof de alergare
    • Cantitate: 1
    • Preț unitar: 30,00 $

Și ați publicat un script care aplică următoarele reduceri:

  • 10% reducere la două sau mai multe mingi de tenis
  • 5 $ reducere la toți pantofii

Atunci șablonul dumneavoastră cart.liquid ar putea fi un tabel simplu care listează rândurile de articole și un sumar al sumelor lor totale:

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

Cu reducerile aplicate de script, acest șablon creează următorul tabel pentru coșul dumneavoastră:

ProdusCantitateTotal
Minge de fotbal115,00 $
Minge de tenis522,50 $
Pantof de alergare125,00 $
Total62,50 $

Actualizați rândurile de articole

Pentru a afișa reducerile aplicate de script, trebuie să actualizăm rândurile de articole pentru a afișa trei informații cheie:

  • prețul rândului înainte de reduceri
  • prețul rândului după reduceri
  • un mesaj care descrie reducerile aplicate.

Pentru a face acest lucru, utilizați următoarele atribute de obiect Liquid:

  • line_item.total_discount returnează valoarea reducerii care a fost aplicată rândului de articol
  • line_item.original_line_price returnează prețul rândului de articol înainte de reduceri
  • line_item.message returnează un mesaj care descrie reducerile care au fost aplicate rândului de articol.

Poate fi util să diferențiați prețul original al rândului de prețul redus al rândului folosind un efect de tăiere cu o linie:

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

Coșul dumneavoastră ar trebui să arate acum astfel:

ProdusCantitateTotal
Minge de fotbal115,00 $
Minge de tenis522,50 $ 25,00 $ (10% reducere la două sau mai multe mingi de tenis)
Pantof de alergare125,00 $ 30,00 $ (5 $ reducere la toți pantofii)
Total62,50 $

Actualizați sumarul coșului

Pentru a ajuta clientul să urmărească prețul comenzii, ar trebui să afișați și:

  • subtotalul original al coșului, pentru a permite clienților să compare totalurile înainte și după reducere
  • economiile totale pe care le-a obținut clientul în coșul său.

Din nou, pentru a adăuga aceste informații, utilizați următoarele atribute de obiect Liquid:

  • cart.total_discount returnează valoarea reducerii aplicate articolelor din coș
  • cart.original_total_price returnează subtotalul coșului înainte de reduceri.

Cu aceste informații, blocul dumneavoastră .summary actualizat ar putea arăta astfel:

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

Tabelul coșului dumneavoastră ar trebui să arate acum astfel:

ProdusCantitateTotal
Minge de fotbal115,00 $
Minge de tenis522,50 $ 25,00 $ (10% reducere la două sau mai multe mingi de tenis)
Pantof de alergare125,00 $ 30,00 $ (5 $ reducere la toți pantofii)
Subtotal70,00 $
Valoarea reducerii7,50 $
Total62,50 $

Adăugând câteva obiecte Liquid noi în șabloanele dumneavoastră, vă puteți ajuta clienții să înțeleagă cum sunt calculate reducerile lor.

Alte exemple

Următorul exemplu Liquid arată reducerile pentru fiecare rând:

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

Consultați un alt exemplu de reducere care include modificările de cod Liquid.