Uppdaterar dina Liquid-mallar för skript

Om du kör skript i din webbutik måste du kontrollera hur de påverkar sidorna i din butikssida. Många teman inkluderar kod för att stödja dina skript, men vissa gör det inte. Om ditt tema inte har koden, kan du lägga till den.

Felsökning

De flesta problem med skript och teman inbegriper radartikelskript som erbjuder rabatter. Till exempel är den totala kostnaden för ordern korrekt, men radartikelpriserna visar inte rabatterna. Kunderna behöver förstå hur deras rabatter beräknas. De vill se ursprungligt och rabatterat pris samt en kort beskrivning av rabatten. Om någon av dessa uppgifter saknas i din varukorg måste du lägga till Liquid-koden så att den visas.

Ett bra sätt att kontrollera hur ditt skript påverkar din butik är att besöka som kund och utföra de åtgärder som utlöser skriptet.

Liquid objektattribut

Följande listor innehåller Liquid Object-attribut som ofta behövs för att stödja skript i din butiks varukorg:

Objektattribut för varukorgen:

Radartikelattribut:

Skriptobjekt:

  • Skript-objekt kan användas för att returnera information om en butiks aktiva skript. Detta objekt kan vara användbart vid felsökning av skript.

Exempel

Följande exempel beskriver de ändringar som du kan göra i din cart.liquid-mall för att stödja ett radartikelskript.

Exempel på varukorg

Om du till exempel har en varukorg med tre radartiklar:

  • Fotboll - Antal: 1

    • Enhetspris: 15,00 USD
  • Tennisboll - Antal: 5

    • Enhetspris: 5,00 USD
  • Löparskor - Antal: 1

    • Enhetspris: 30,00 USD

Du har publicerat ett skript som tillämpar följande rabatter:

  • 10 % rabatt på två eller fler tennisbollar
  • 5 USD rabatt på alla skor

Då kan din cart.liquid-mall vara en enkel tabell över radartiklarna och en översikt över deras totala belopp:

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

Med de rabatter som skriptet tillämpar skapar denna mall följande tabell för din varukorg:

Produkt Kvantitet Totalt
Fotboll 1 15,00 USD
Tennisboll 5 22,50 USD
Löparskor 1 25,00 USD
Totalt 62,50 USD

Uppdatera radartiklarna

Vi måste uppdatera radartiklarna för att visa tre viktiga detaljer för att visa rabatterna som används av skriptet:

  • radpriset innan rabatter
  • radpriset efter rabatter
  • Ett meddelande som beskriver de rabatter som tillämpats.

För att göra detta använder du följande attribut för Liquid-artiklar:

  • line_item.total_discount returnerar det rabattbelopp som har tillämpats på radartikeln
  • line_item.original_line_price returnerar radartikelpriset innan rabatter
  • line_item.message returnerar ett meddelande som beskriver rabatterna som tillämpades på radartikeln.

Det kan bidra till att särskilja det ursprungliga radpriset från rabatterat pris med hjälp av en genomstrykningseffekt:

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

Din varukorg ska nu se ut så här:

Produkt Kvantitet Totalt
Fotboll 1 15,00 USD
Tennisboll 5 22,50 USD 25,00 USD (10 % rabatt på två eller fler tennisbollar)
Löparskor 1 25,00 USD 30,00 USD (5 USD rabatt på alla skor)
Totalt 62,50 USD

Uppdatera varukorgens översikt

För att hjälpa kunden att hålla reda på sitt orderpris ska du också visa:

  • den ursprungliga delsumman för varukorgen, för att låta kunderna jämföra beloppen före och efter till rabatterbjuden
  • de totala besparingarna som kunden erhållit i varukorgen.

För att lägga till den här informationen, använd följande Liquid objektsattribut:

  • cart.total_discount returnerar hur mycket rabatt som tillämpas på varor i varukorgen
  • cart.original_total_price returnerar delsumman av kundvagnen innan rabatter.

Med denna information kan ditt uppdaterade .summary-block se ut så här:

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

Din varukorgstabell ska nu se ut så här:

Produkt Kvantitet Totalt
Fotboll 1 15,00 USD
Tennisboll 5 22,50 USD 25,00 USD (10 % rabatt på två eller fler tennisbollar)
Löparskor 1 25,00 USD 30,00 USD (5 USD rabatt på alla skor)
Delsumma 70,00 USD
rabattbesparingar 7,50 $
Totalt 62,50 USD

Genom att lägga till några nya Liquid Objects till dina mallar kan du hjälpa dina kunder att förstå hur deras rabatter beräknas.

Andra exempel

Följande Liquid-exempel visar rabatterna för varje radartikel:

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

Se ett annat rabattexempel som inkluderar ändringar av Liquid-kod.

Är du redo att börja sälja med Shopify?

Prova gratis