Liquid-sjablonen voor scripts bijwerken

Als u scripts in je onlinewinkel uitvoert, dan dient u te controleren hoe zij van invloed zijn op de pagina's in je storefront. Veel thema's bevatten code om je scripts te ondersteunen, maar niet allemaal. Als je thema deze code niet bevat, kunt u die zelf toevoegen.

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 u Liquid-code toevoegen zodat deze gegevens wel worden weergegeven.

Een goede manier om te controleren hoe een script je storefront 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:

Attributen van regelartikelen:

Scripts-object:

  • Het scripts-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 u kunt aanbrengen in uw cart.liquid- sjabloon om een regelartikelscript te ondersteunen.

Voorbeeld van winkelwagen

Stel dat u een winkelwagen hebt met drie regelartikelen:

  • 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-sjabloon een eenvoudige tabel zijn met een lijst met de regelartikelen 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 sjabloon in de volgende tabel voor uw winkelwagen:

Product Aantal Totaal
Voetbal 1 $ 15,00
Tennisbal 5 $ 22.50
Loopschoenen 1 $ 25.00
Totaal $ 62.50

De regelartikelen bijwerken

Om de kortingen weer te geven die door het script worden toegepast, moeten we de regelartikelen 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 het regelartikel
  • 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 het regelartikel

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

Om deze informatie toe te voegen, gebruikt u de volgende attributen voor Liquid-objecten:

  • 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 uw sjablonen, kunt u uw klanten duidelijk maken hoe hun kortingen worden berekend.

Andere voorbeelden

Het volgende Liquid-voorbeeld toont de kortingen voor elk regelartikel:

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

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis