Liquid-Vorlagen für Scripts aktualisieren

Wenn du Scripts in deinem Onlineshop ausführst, musst du überprüfen, wie sie sich auf die Seiten in deiner Storefront auswirken. Viele Themes enthalten Code zur Unterstützung deiner Scripts, einige jedoch nicht. Wenn dein Theme den Code nicht enthält, kannst du ihn hinzufügen.

Auf dieser Seite

Fehlerbehebung

Die meisten Probleme mit Scripts und Themes betreffen Scripts für Positionen, die Rabatte anbieten. Zum Beispiel ist der Gesamtpreis der Bestellung korrekt, aber die Preise der Positionen zeigen die Rabatte nicht an. Kund:innen müssen verstehen, wie ihre Rabatte berechnet werden. Sie möchten den Originalpreis und den rabattierten Preis sowie eine kurze Beschreibung des Rabatts sehen. Wenn eines dieser Details in deinem Warenkorb fehlt, musst du den Liquid-Code hinzufügen, damit sie angezeigt werden.

Eine gute Möglichkeit, um zu überprüfen, wie sich dein Script auf deine Storefront auswirkt, ist, deinen Shop als Kund:in zu besuchen und die Aktionen durchzuführen, die das Script auslösen.

Liquid-Objektattribute

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

Attribute des Cart-Objekts:

Attribute der Position:

Script-Objekt:

Das Script-Objekt kann verwendet werden, um Informationen über die aktiven Scripts eines Shops zurückzugeben. Dieses Objekt kann beim Debuggen von Scripts nützlich sein.

Beispiel

Im folgenden Beispiel werden die Änderungen beschrieben, die du an deiner cart.liquid-Vorlage vornehmen kannst, um ein Script für Positionen zu unterstützen.

Beispiel-Warenkorb

Wenn du beispielsweise einen Warenkorb mit drei Positionen hast:

Fußball
- Menge: 1
- Stückpreis: 15,00 $
Tennisball
- Menge: 5
- Stückpreis: 5,00 $
Laufschuh
- Menge: 1
- Stückpreis: 30,00 $

Und du hast ein Script veröffentlicht, das die folgenden Rabatte anwendet:

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

Dann ist deine cart.liquid-Vorlage möglicherweise eine einfache Tabelle, in der die Positionen und eine Übersicht ihrer Gesamtbeträge aufgeführt sind:

<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 vom Script angewendeten Rabatten erstellt diese Vorlage die folgende Tabelle für deinen Warenkorb:

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

Aktualisierung der Positionen

Um die vom Script angewendeten Rabatte anzuzeigen, müssen wir die Positionen aktualisieren, um drei wichtige Informationen anzuzeigen:

der Preis der Position vor Rabatten
der Preis der Position nach Rabatten
eine Nachricht, die die angewendeten Rabatte beschreibt.

Verwende dazu die folgenden Liquid-Objektattribute:

line_item.total_discount gibt den Betrag des Rabatts zurück, der auf die Position angewendet wurde
line_item.original_line_price gibt den Preis der Position vor den Rabatten zurück
line_item.message gibt eine Nachricht zurück, die die auf die Position angewendeten Rabatte beschreibt.

Es kann hilfreich sein, den ursprünglichen Preis der Position vom rabattierten Preis durch einen Durchstreicheffekt zu unterscheiden:

<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 jetzt so aussehen:

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

Aktualisierung der Warenkorb-Übersicht

Damit die Kund:innen den Überblick über ihren Bestellpreis behalten, solltest du auch Folgendes anzeigen:

die ursprüngliche Zwischensumme des Warenkorbs, damit Kund:innen die Gesamtbeträge vor und nach dem Rabatt vergleichen können
die Gesamtersparnis, die die Kund:innen in ihrem Warenkorb erzielt haben.

Verwende auch hier wieder die folgenden Liquid-Objektattribute, um diese Informationen hinzuzufügen:

cart.total_discount gibt den Betrag des Rabatts zurück, der auf Artikel im Warenkorb angewendet wurde
cart.original_total_price gibt die Zwischensumme des Warenkorbs vor Rabatten zurück.

Mit diesen Informationen könnte dein aktualisierter .summary-Block wie folgt 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>

Deine Warenkorbtabelle sollte jetzt so aussehen:

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

Indem du deinen Vorlagen einige neue Liquid-Objekte hinzufügst, hilfst du deiner Kundschaft zu verstehen, wie ihre Rabatte berechnet werden.

Andere Beispiele

Das folgende Liquid-Beispiel zeigt die Rabatte für jede Position:

{% 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 dir ein weiteres Rabattbeispiel an, das die Änderungen am Liquid-Code enthält.