Liquid-templates voor scripts bijwerken

Als je scripts in je webshop uitvoert, controleer dan hoe zij van invloed zijn op de pagina's in je webwinkel. Veel thema's bevatten code om je scripts te ondersteunen, maar niet allemaal. Als je thema deze code niet bevat, kun je die zelf toevoegen.

Shopify Plus

Shopify-scripts en de Script Editor-app zijn alleen beschikbaar voor merchants met een Shopify Plus-abonnement. De Script Editor-app kan niet langer worden gedownload in de Shopify App Store.

Op 28 augustus 2025 worden Shopify-scripts verwijderd en zullen ze niet meer werken. Migreer je bestaande scripts vóór deze datum naar Shopify Functions.

Problemen oplossen

De meeste problemen met scripts en thema's hebben te maken met regelartikelscripts die kortingen bieden. Zo is bijvoorbeeld wel de totaalprijs van de bestelling correct, maar zijn de kortingen niet verwerkt in de prijzen op regelniveau. Klanten moeten begrijpen hoe hun kortingen worden berekend. Ze willen de originele en gereduceerde prijs zien, evenals een korte beschrijving van de korting. Als een of meer van deze gegevens ontbreken in de winkelwagen, moet je Liquid-code toevoegen zodat deze gegevens wel worden weergegeven.

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

Attributen van Liquid-objecten

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

Attributen voor Cart-object:

• cart.total_discount
• cart.original_total_price

Attributen van orderregels:

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

Script-object:

• Het script-object kan worden gebruikt om gegevens van de actieve scripts van een winkel te retourneren. 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 regelartikelscript te ondersteunen.

Voorbeeld van winkelwagen

Stel dat je een winkelwagen hebt met drie orderregels:

• Voetbal

  • Aantal: 1
  • Eenheidsprijs: $ 15,00

• Tennisbal

  • Aantal: 5
  • Eenheidsprijs: $ 5,00

• Loopschoenen

  • Aantal: 1
  • Eenheidsprijs: $ 30,00

Je hebt een script gepubliceerd dat de volgende kortingen toepast:

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

In dat geval kan je cart.liquid-template een eenvoudige tabel zijn met een lijst met de orderregels en een samenvatting van hun 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, resulteert deze template in de volgende tabel voor je winkelwagen:

Product	Aantal	Totaal
Voetbal	1	$ 15,00
Tennisbal	5	$ 22.50
Loopschoenen	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 om drie belangrijke gegevens weer te geven:

• de regelprijs zonder kortingen
• de regelprijs met kortingen
• een bericht met een beschrijving van de kortingen die zijn toegepast

Gebruik hiervoor de volgende attributen voor Liquid-objecten:

• line_item.total_discount retourneert het kortingsbedrag dat is toegepast op de orderregel
• line_item.original_line_price retourneert de prijs van het artikelregelzonder kortingen
• line_item.message retourneert een bericht dat de kortingen beschrijft die zijn toegepast op de orderregel

Het kan helpen om de oorspronkelijke regelprijs te onderscheiden van de regelprijs met korting door de oorspronkelijke prijs door te strepen:

<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 als volgt uit moeten zien:

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

De samenvatting in de winkelwagen bijwerken

Om de klant te helpen overzicht te houden over het bestelbedrag, moet je ook het volgende laten zien:

• het originele subtotaal van de winkelwagen, zodat klanten de totalen zonder en met de korting kunnen vergelijken
• de totale korting die de klant op de winkelwagen heeft gekregen

Gebruik de volgende attributen voor Liquid-objecten om deze informatie toe te voegen:

• cart.total_discount retourneert het bedrag van de korting dat is toegepast op artikelen in de winkelwagen
• cart.original_total_price retourneert het subtotaal van de winkelwagen zonder kortingen

Met deze gegevens ziet het bijgewerkte blok .summary er als volgt uit:

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

De tabel in de winkelwagen zou er nu als volgt uit moeten zien:

Product	Aantal	Totaal
Voetbal	1	$ 15,00
Tennisbal	5	$ 22,50 $ 25,00 (10% korting op twee of meer tennisballen)
Loopschoenen	1	$ 25,00 $ 30,00 ($ 5 korting op alle schoenen)
Subtotaal		$ 70,00
Korting		$ 7,50
Totaal		$ 62.50

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

Andere voorbeelden

Het volgende Liquid-voorbeeld toont de kortingen voor elk 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 aanpassingen van de Liquid-code.