Je Liquid-templates updaten voor scripts

Als je scripts in je webshop gebruikt, moet je controleren hoe ze de pagina's in je webshop beïnvloeden. Veel thema's bevatten code om je scripts te ondersteunen, maar sommige niet. Als je thema de code niet heeft, kun je deze toevoegen.

Op deze pagina

Probleemoplossing

De meeste problemen met scripts en thema's hebben te maken met orderregelscripts die kortingen bieden. De totale prijs van de bestelling is bijvoorbeeld correct, maar de prijzen van de orderregels tonen de kortingen niet. Klanten moeten begrijpen hoe hun kortingen worden berekend. Ze willen de oorspronkelijke en de verlaagde prijs zien, evenals een korte beschrijving van de korting. Als een van deze gegevens in je winkelwagen ontbreekt, moet je de Liquid-code toevoegen zodat ze wel worden weergegeven.

Een goede manier om te controleren hoe je script je webshop beïnvloedt, is door je winkel als klant te bezoeken en de acties uit te voeren die het script activeren.

Attributen van Liquid-objecten

De volgende lijsten bevatten attributen van Liquid-objecten die vaak nodig zijn om scripts in de winkelwagen van je winkel te ondersteunen:

Attributen van winkelwagenobjecten:

Orderregelattributen:

Script-object:

Het script-object kan worden gebruikt om informatie te retourneren over de actieve scripts van een winkel. Dit object kan handig zijn bij het debuggen van scripts.

Voorbeeld

In het volgende voorbeeld worden de wijzigingen beschreven die je kunt aanbrengen in je cart.liquid-template om een orderregelscript te ondersteunen.

Voorbeeld van een winkelwagen

Je hebt bijvoorbeeld een winkelwagen met drie orderregels:

Voetbal
- Aantal: 1
- Stukprijs: $ 15,00
Tennisbal
- Aantal: 5
- Stukprijs: $ 5,00
Hardloopschoen
- Aantal: 1
- Stukprijs: $ 30,00

En je hebt een script gepubliceerd dat de volgende kortingen toepast:

10% korting op twee of meer tennisballen
$ 5 korting op alle schoenen

Dan is je cart.liquid-template misschien een eenvoudige tabel met de orderregels en een overzicht van de totaalbedragen:

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

Met de kortingen die door het script worden toegepast, maakt deze template de volgende tabel voor je winkelwagen:

Product	Aantal	Totaal
Voetbal	1	$ 15,00
Tennisbal	5	$ 22,50
Hardloopschoen	1	$ 25,00
Totaal		$ 62,50

De orderregels bijwerken

Om de kortingen weer te geven die door het script worden toegepast, moeten we de orderregels bijwerken zodat ze drie belangrijke stukjes informatie tonen:

de orderregelprijs vóór kortingen
de orderregelprijs ná kortingen
een bericht met een beschrijving van de toegepaste kortingen.

Gebruik hiervoor de volgende attributen van Liquid-objecten:

line_item.total_discount retourneert het kortingsbedrag dat is toegepast op de orderregel
line_item.original_line_price retourneert de prijs van de orderregel vóór kortingen
line_item.message retourneert een bericht met een beschrijving van de kortingen die zijn toegepast op de orderregel.

Het kan helpen om de oorspronkelijke orderregelprijs te onderscheiden van de verlaagde orderregelprijs door een doorhaling te gebruiken:

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

Je winkelwagen zou er nu zo uit moeten zien:

Product	Aantal	Totaal
Voetbal	1	$ 15,00
Tennisbal	5	$ 22,50 ~~$ 25,00~~ (10% korting op twee of meer tennisballen)
Hardloopschoen	1	$ 25,00 ~~$ 30,00~~ ($ 5 korting op alle schoenen)
Totaal		$ 62,50

Het winkelwagenoverzicht bijwerken

Om de klant te helpen de bestelprijs bij te houden, kun je ook het volgende weergeven:

het oorspronkelijke subtotaal van de winkelwagen, zodat klanten de totalen voor en na de korting kunnen vergelijken
de totale besparing die de klant op de winkelwagen heeft ontvangen.

Gebruik ook hiervoor de volgende attributen van Liquid-objecten:

cart.total_discount retourneert het kortingsbedrag dat is toegepast op artikelen in de winkelwagen
cart.original_total_price retourneert het subtotaal van de winkelwagen vóór kortingen.

Met deze informatie kan je bijgewerkte .summary-blok er zo uitzien:

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

Je winkelwagentabel zou er nu zo uit moeten zien:

Product	Aantal	Totaal
Voetbal	1	$ 15,00
Tennisbal	5	$ 22,50 ~~$ 25,00~~ (10% korting op twee of meer tennisballen)
Hardloopschoen	1	$ 25,00 ~~$ 30,00~~ ($ 5 korting op alle schoenen)
Subtotaal		€ 70,00
Besparing		€ 7,50
Totaal		$ 62,50

Door een paar nieuwe Liquid-objecten aan je templates toe te voegen, kun je je klanten helpen begrijpen hoe hun kortingen worden berekend.

Andere voorbeelden

Het volgende Liquid-voorbeeld toont de kortingen voor elke orderregel:

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

Bekijk een ander kortingsvoorbeeld met de Liquid-codewijzigingen.