A Liquid-sablonok frissítése scriptekhez

Ha scripteket futtat az online áruházában, akkor ellenőriznie kell, hogy azok hogyan hatnak a kirakat oldalaira. Sok téma tartalmaz kódot a scriptek támogatásához, de némelyik nem. Ha a témája nem rendelkezik a kóddal, akkor hozzáadhatja.

Hibaelhárítás

A scriptekkel és témákkal kapcsolatos legtöbb probléma a kedvezményeket kínáló sorelem-scripteket érinti. Például a rendelés teljes ára helyes, de a sorelemek árai nem mutatják a kedvezményeket. A vásárlóknak meg kell érteniük, hogyan számítják ki a kedvezményeiket. Látniuk kell az eredeti és a kedvezményes árat, valamint a kedvezmény rövid leírását. Ha ezen adatok bármelyike hiányzik a kosarából, akkor hozzá kell adnia a Liquid-kódot, hogy azok megjelenjenek.

A scripteknek a kirakatra gyakorolt hatását úgy ellenőrizheti a leghatékonyabban, ha vásárlóként látogat el az oldalra, és végrehajtja a scriptet kiváltó műveleteket.

Liquid-objektum jellemzői

Az alábbi listák azokat a Liquid-objektum jellemzőket tartalmazzák, amelyekre általában szükség van a scriptek támogatásához az üzlet kosarában:

Kosárobjektum jellemzői:

• cart.total_discount
• cart.original_total_price

Sorelem jellemzői:

• line_item.discounts
• line_item.message
• line_item.original_price
• line_item.original_line_price
• line_item.total_discount

Scriptobjektum:

• A script objektum segítségével információkat kaphat az üzlet aktív scriptjeiről. Ez az objektum hasznos lehet a scriptek hibakeresésekor.

Példa

A következő példa azokat a módosításokat írja le, amelyeket a cart.liquid sablonon végezhet el egy sorelem-script támogatásához.

Példa kosár

Tegyük fel például, hogy van egy kosara három sorelemmel:

• Futball-labda
  • Mennyiség: 1
  • Egységár: 15,00 $
• Teniszlabda
  • Mennyiség: 5
  • Egységár: 5,00 $
• Futócipő
  • Mennyiség: 1
  • Egységár: 30,00 $

És közzétett egy scriptet, amely a következő kedvezményeket alkalmazza:

• 10% kedvezmény kettő vagy több teniszlabdára
• 5 $ kedvezmény minden cipőre

Ekkor a cart.liquid sablonja lehet egy egyszerű táblázat, amely felsorolja a sorelemeket és a végösszegek összefoglalóját:

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

A script által alkalmazott kedvezményekkel ez a sablon a következő táblázatot hozza létre a kosárhoz:

A sorelemek frissítése

Ahhoz, hogy a script által alkalmazott kedvezmények megjelenjenek, frissítenünk kell a sorelemeket, hogy három kulcsfontosságú információt mutassanak:

• a sorár a kedvezmények előtt
• a sorár a kedvezmények után
• egy üzenet, amely leírja az alkalmazott kedvezményeket.

Ehhez használja a következő Liquid-objektum jellemzőket:

• A line_item.total_discount a sorelemre alkalmazott kedvezmény összegét adja vissza.
• A line_item.original_line_price a sorelem árát adja vissza a kedvezmények előtt.
• A line_item.message egy olyan üzenetet ad vissza, amely leírja a sorelemre alkalmazott kedvezményeket.

Segíthet megkülönböztetni az eredeti sorárat a kedvezményes sorártól egy áthúzás effektussal:

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

A kosarának most így kell kinéznie:

A kosárösszesítő frissítése

Annak érdekében, hogy a vásárló nyomon tudja követni a rendelése árát, a következőket is meg kell jelenítenie:

• a kosár eredeti részösszegét, hogy a vásárlók összehasonlíthassák a kedvezmények előtti és utáni összegeket
• a vásárló által a kosarán elért teljes megtakarítást.

Ismét, az információk hozzáadásához használja a következő Liquid-objektum jellemzőket:

• A cart.total_discount a kosárban lévő tételekre alkalmazott kedvezmény összegét adja vissza.
• A cart.original_total_price a kosár kedvezmények előtti részösszegét adja vissza.

Ezekkel az információkkal a frissített .summary blokkja így nézhet ki:

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

A kosártáblázatának most így kell kinéznie:

Ha néhány új Liquid-objektumot ad a sablonjaihoz, azzal segíthet a vásárlóknak megérteni, hogyan számítódnak ki a kedvezményeik.

További példák

A következő Liquid-példa az egyes sorelemekre vonatkozó kedvezményeket mutatja be:

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

Tekintsen meg egy másik kedvezményre vonatkozó példát, amely a Liquid-kód módosításait is tartalmazza.