Uppdatera dina Liquid-mallar för skript

Om du kör skript i din webbshop måste du kontrollera hur de påverkar sidorna i ditt digitala skyltfönster. Många teman innehåller kod som stöder 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 gäller postskript som erbjuder rabatter. Orderns totalpris kan till exempel vara korrekt, men posternas priser visar inte rabatterna. Kunder behöver förstå hur deras rabatter beräknas. De vill se originalpriset och det rabatterade priset 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 de visas.

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

Liquid-objektattribut

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

Varukorgsobjektattribut:

Postattribut:

Skriptobjekt:

  • Skriptobjektet kan användas för att returnera information om en butiks aktiva skript. Det här objektet kan vara användbart vid felsökning av skript.

Exempel

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

Exempelvarukorg

Om du till exempel har en varukorg med tre poster:

  • Fotboll
    • Antal: 1
    • Styckpris: 15,00 $
  • Tennisboll
    • Antal: 5
    • Styckpris: 5,00 $
  • Löparsko
    • Antal: 1
    • Styckpris: 30,00 $

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

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

Då kan din cart.liquid-mall vara en enkel tabell som listar posterna och en sammanfattning av 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 rabatterna som tillämpas av skriptet skapar den här mallen följande tabell för din varukorg:

ProduktAntalSumma
Fotboll115,00 $
Tennisboll522,50 $
Löparsko125,00 $
Summa62,50 $

Uppdatera posterna

För att visa rabatterna som tillämpas av skriptet måste vi uppdatera posterna för att visa tre viktiga uppgifter:

  • postpriset före rabatter
  • postpriset efter rabatter
  • ett meddelande som beskriver de rabatter som tillämpades.

För att göra det här, använd följande Liquid-objektattribut:

  • line_item.total_discount returnerar rabattbeloppet som har tillämpats på posten
  • line_item.original_line_price returnerar postpriset före rabatter
  • line_item.message returnerar ett meddelande som beskriver de rabatter som tillämpades på posten.

Det kan hjälpa att skilja det ursprungliga postpriset från det rabatterade postpriset med 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 bör nu se ut så här:

ProduktAntalSumma
Fotboll115,00 $
Tennisboll522,50 $ 25,00 $ (10 % rabatt på två eller fler tennisbollar)
Löparsko125,00 $ 30,00 $ (5 $ rabatt på alla skor)
Summa62,50 $

Uppdatera varukorgssammanfattningen

För att hjälpa kunden att hålla koll på orderpriset bör du även visa:

  • varukorgens ursprungliga delsumma, så att kunderna kan jämföra totalsumman före och efter rabatten
  • den totala besparingen som kunden fick i sin varukorg.

För att lägga till den här informationen, använd återigen följande Liquid-objektattribut:

  • cart.total_discount returnerar rabattbeloppet som tillämpas på artiklar i varukorgen
  • cart.original_total_price returnerar varukorgens delsumma före rabatter.

Med den här informationen 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 bör nu se ut så här:

ProduktAntalSumma
Fotboll115,00 $
Tennisboll522,50 $ 25,00 $ (10 % rabatt på två eller fler tennisbollar)
Löparsko125,00 $ 30,00 $ (5 $ rabatt på alla skor)
Delsumma70,00 kr
Rabatt7,50 kr
Summa62,50 $

Genom att lägga till några nya Liquid-objekt i 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 post:

{% 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 Liquid-kodändringarna.