Aktualisieren deiner Liquid-Vorlagen für Skripte

Wenn du Skripte in deinem Online-Shop ausführst, musst du überprüfen, wie sich diese auf die Seiten in deiner Storefront auswirken. Viele Themes enthalten Code zum Support deiner Skripte, manche jedoch nicht. Wenn dein Theme den Code nicht enthält, kannst du ihn hinzufügen.

Fehlerbehebung

Die meisten Probleme mit Skripten und Themes treten bei Einzelartikel-Skripten auf, die Rabatte bieten. Es kann zum Beispiel der Gesamtpreis der Bestellung korrekt sein, aber die Preise der Einzelartikel zeigen die Rabatte nicht an. Kunden müssen verstehen, wie ihre Rabatte berechnet werden. Du möchtest den ursprünglichen und den reduzierten Preis sowie eine kurze Beschreibung des Rabattes sehen. Wenn eines dieser Details in deinem Warenkorb fehlt, musst du den entsprechenden Liquid-Code hinzufügen, damit es angezeigt wird.

Eine gute Möglichkeit, zu überprüfen, wie sich ein Skript auf deine Storefront auswirkt, besteht darin, diesen als Kunde zu besuchen und die Aktionen auszuführen, die das Skript auslösen.

Liquid-Objektattribute

Die folgenden Listen enthalten Liquid-Objektattribute, die häufig zur Unterstützung von Skripten im Warenkorb deines Shops benötigt werden:

Objektattribute für Warenkörbe:

Einzelartikel-Attribute:

Skriptobjekt:

  • Das Skriptobjekt kann verwendet werden, um Informationen über die aktiven Skripte eines Shops auszugeben. Dieses Objekt kann beim Debuggen von Skripten nützlich sein.

Beispiel

Das folgende Beispiel zeigt die Änderungen, die du an der cart.liquid-Vorlage vornehmen kannst, damit diese ein Einzelartikel-Skript unterstützt.

Beispiel-Warenkorb

Wenn du beispielsweise einen Warenkorb mit drei Einzelartikeln hast:

  • Fußball - Menge: 1

    • Stückpreis: 15,00 USD
  • Tennisball - Anzahl: 5

    • Stückpreis: 5,00 USD
  • Laufschuh - Menge: 1

    • Stückpreis: 30,00 USD

Und du hast ein Skript veröffentlicht, mit dem die folgenden Rabatte angewendet werden:

  • 10 % Rabatt auf zwei oder mehr Tennisbälle
  • 5 USD Rabatt auf alle Schuhe

Dann ist die cart.liquid-Vorlage vielleicht eine einfache Tabelle, in der die Einzelartikel und die Summe der Gesamtbeträge aufgelistet werden:

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

Mit den Rabatten, die vom Skript angewendet werden, erstellt diese Vorlage die folgende Tabelle für deinen Warenkorb:

Produkt Anzahl Gesamt
Fußball 1 15,00 USD
Tennisball 5 22,50 USD
Laufschuh 1 25,00 USD
Gesamt 62,50 USD

Einzelartikel aktualisieren

Damit die vom Skript angewandten Rabatte angezeigt werden, müssen wir die Einzelartikel so aktualisieren, dass sie drei wichtige Informationen anzeigen:

  • Der Einzelartikelpreis vor Rabatten
  • Der Einzelartikelpreis nach Rabatten
  • eine Nachricht zur Erläuterung der angewendeten Rabatte.

Zu diesem Zweck verwendest du die folgenden Liquid-Objektattribute:

  • line_item.total_discount gibt den Rabattbetrag zurück, der auf die Einzelartikel angewendet wurde.
  • line_item.original_line_price gibt den Preis des Einzelartikels vor den Rabatten aus
  • line_item.message Sendet eine Nachricht zurück, die die Rabatte beschreibt, die auf den Einzelartikel angewendet wurden.

Mithilfe von Durchstreichungen kann der ursprüngliche Einzelpreis besser vom rabattierten Einzelpreis unterschieden werden.

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

Dein Warenkorb sollte nun folgendermaßen aussehen:

Produkt Anzahl Gesamt
Fußball 1 15,00 USD
Tennisball 5 22,50 USD 25,00 USD (10 % Rabatt auf zwei oder mehr Tennisbälle)
Laufschuh 1 25,00 USD 30,00 USD (5 USD auf alle Schuhe)
Gesamt 62,50 USD

Die Warenkorbzusammenfassung aktualisieren

Um dem Kunden zu helfen, den Bestellpreis zu verfolgen, solltest du auch Folgendes anzeigen:

  • die ursprüngliche Zwischensumme des Warenkorbs, damit die Kunden die Beträge vor und nach den Rabatten vergleichen können
  • Die gesamten Einsparungen, die der Kunde auf seinen Warenkorb erzielt hat.

Zum Hinzufügen dieser Informationen verwende abermals die folgenden Liquid-Objektattribute:

  • cart.total_discount gibt den Rabattbetrag aus, der auf Artikel im Warenkorb angewendet wird
  • cart.original_total_price gibt die Zwischensumme des Warenkorbs vor den Rabatten aus.

Mit diesen Informationen könnte dein aktualisierter .summary Block folgendermaßen aussehen:

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

Dein Warenkorb-Tabelle sollte nun so aussehen:

Produkt Anzahl Gesamt
Fußball 1 15,00 USD
Tennisball 5 22,50 USD 25,00 USD (10 % Rabatt auf zwei oder mehr Tennisbälle)
Laufschuh 1 25,00 USD 30,00 USD (5 USD auf alle Schuhe)
Zwischensumme 70,00 USD
Rabattersparnis 7,50 USD
Gesamt 62,50 USD

Mit dem Hinzufügen einiger neuer Liquid-Objekte zu deinen Vorlagen kannst du für deine Kunden die Berechnung ihrer Rabatte transparenter gestalten.

Weitere Beispiele

Das folgende Liquid-Beispiel zeigt die Rabatte für jeden Einzelartikel:

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

Sieh ein anderes Rabattbeispiel an, das die Liquid-Code-Änderungen enthält.

Bereit, mit Shopify zu verkaufen?

Kostenlos ausprobieren