Sådan opdaterer du dine Liquid-skabeloner til Scripts

Hvis du kører scripts i din webshop, skal du kontrollere, hvordan de påvirker siderne i dit butikslayout. Mange temaer omfatter kode til understøttelse af dine scripts, men nogle gør ikke. Du kan tilføje koden, hvis dit tema ikke har den.

Fejlfinding

De fleste problemer med scripts og temaer omhandler scripts vedrørende varelinjer, der tilbyder rabatter. Den samlede pris for ordren er f.eks. korrekt, men rabatten fremgår ikke af varelinjepriserne. Kunderne har behov for at forstå, hvordan deres rabatter beregnes. De ønsker at se den oprindelige pris og prisen inklusive rabatten samt en kort beskrivelse af rabatten. Hvis nogen af disse oplysninger mangler i din indkøbskurv, skal du tilføje Liquid-koden, så de vises.

En god måde at tjekke, hvordan dit script påvirker dit butikslayout, er at besøge butikken som en kunde og udføre de handlinger, der udløser scriptet.

Liquid-objektattributter

Følgende lister indeholder Liquid-objektattributter, der generelt kræves for at understøtte scripts i din butiks indkøbskurv:

Objektattributter for indkøbskurv:

Attributter for varelinje:

Scriptobjekt:

  • Scriptobjektet kan bruges til at returnere oplysninger om en butiks aktive scripts. Dette objekt kan være nyttigt ved fejlfinding af scripts.

Eksempel

I det følgende eksempel beskrives de ændringer, du kan foretage i din cart.liquid-skabelon for at understøtte et script til en varelinje.

Eksempel på indkøbskurv

Hvis du f.eks. har en indkøbskurv med tre varelinjer:

  • Fodbold

    • Antal: 1
    • Pris pr. enhed: 15,00 USD
  • Tennisbold

    • Antal: 5
    • Pris pr. enhed: 5,00 USD
  • Løbesko

    • Antal: 1
    • Pris pr. enhed: 30,00 USD

Og du har udgivet et script, der anvender følgende rabatter:

  • 10 % rabat på to eller flere tennisbolde
  • 5 USD i rabat på alle sko

Din cart.liquid-skabelon kan da f.eks. være en simpel tabel med varelinjerne og en oversigt over deres samlede beløb:

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

Herefter opretter denne skabelon følgende tabel til din indkøbskurv med de rabatter, der gælder for scriptet:

ProduktAntalI alt
Fodbold115,00 USD
Tennisbold522,50 USD
Løbesko125,00 USD
I alt62,50 USD

Opdater varelinjerne

For at få vist de rabatter, scriptet anvender, skal varelinjerne opdateres, så de viser tre vigtige oplysninger:

  • linjeprisen før rabatter
  • linjeprisen efter rabatter
  • en besked, der beskriver de anvendte rapporter.

Brug følgende Liquid-objektattributter til at gøre dette:

  • line_item.total_discount returnerer det rabatbeløb, der er anvendt på varelinjen
  • line_item.original_line_price returnerer varelinjens pris før rabatter
  • line_item.message returnerer en besked, der beskriver de rabatter, der er anvendt på varelinjen.

At bruge en effekt med gennemstregning kan være en hjælp til at skelne mellem den oprindelige linjepris og linjeprisen med rabat:

<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 indkøbskurv bør nu se således ud:

ProduktAntalI alt
Fodbold115,00 USD
Tennisbold522,50 USD 25,00 USD (10 % rabat på to eller flere tennisbolde)
Løbesko125,00 USD 30,00 USD (5 USD i rabat på alle sko)
I alt62,50 USD

Opdater oversigten over indkøbskurven

For at gøre det nemmere for kunderne at holde styr på deres ordrepris bør du også vise følgende:

  • indkøbskurvens oprindelige subtotal, så kunderne har mulighed for at sammenligne det samlede beløb før og efter rabatter
  • de samlede besparelser, kunden har opnået i indkøbskurven.

Igen skal du bruge følgende Liquid-objektattributter for at tilføje disse oplysninger:

  • cart.total_discount returnerer det rabatbeløb, der er anvendt på varer i indkøbskurven
  • cart.original_total_price returnerer indkøbskurvens subtotal før rabatter.

Med disse oplysninger ser din opdaterede .summary-blok nogenlunde sådan her ud:

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

Oversigten i din indkøbskurv bør nu se sådan her ud:

ProduktAntalI alt
Fodbold115,00 USD
Tennisbold522,50 USD 25,00 USD (10 % rabat på to eller flere tennisbolde)
Løbesko125,00 USD 30,00 USD (5 USD i rabat på alle sko)
Subtotal70,00 USD
Rabatbesparelser7,50 USD
I alt62,50 USD

Ved at føje nogle få, nye Liquid-objekter til din skabelon kan du hjælpe dine kunder med at forstå, hvordan deres rabatter beregnes.

Andre eksempler

Det følgende Liquid-eksempel viser rabatterne for hver varelinje:

  {% 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 et andet rabateksempel, der omfatter ændringer af Liquid-koden.

Kan du ikke finde de svar, du leder efter? Vi er her for at hjælpe.