Aktualisieren Ihrer Liquid-Vorlagen für Skripte

Wenn Sie Skripte in Ihrem Online-Shop ausführen, müssen Sie überprüfen, wie sich diese auf die Seiten in Ihrem Shop auswirken. Viele Themes enthalten Code zum Support Ihrer Skripte, manche jedoch nicht. Wenn Ihr Theme den Code nicht enthält, können Sie ihn hinzufügen.

Die neueste Version des Timber-Frameworks und die folgenden offiziellen Shopify-Themes unterstützen Skripte:

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. Sie möchten den ursprünglichen und den reduzierten Preis sowie eine kurze Beschreibung des Rabattes sehen. Wenn eines dieser Details in Ihrem Warenkorb fehlt, müssen Sie den entsprechenden Liquid-Code hinzufügen, damit es angezeigt wird.

Eine gute Möglichkeit, zu überprüfen, wie sich ein Skript auf Ihren Shop 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 Ihres 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 Sie an der cart.liquid-Vorlage vornehmen können, damit diese ein Einzelartikel-Skript unterstützt.

Beispiel-Warenkorb

Wenn Sie beispielsweise einen Warenkorb mit drei Einzelartikeln haben:

  • 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 Sie haben 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 Ihren 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 verwenden Sie 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>

Ihr 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, sollten Sie 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 verwenden Sie 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 Ihr 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>

Ihre 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 Ihren Vorlagen können Sie für Ihre 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 %}

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

Sind Sie bereit, mit Shopify zu verkaufen?

Probieren Sie es kostenlos aus