Oppdaterer Liquid-malene dine for Scripts

Hvis du kjører skript i nettbutikken din, må du sjekke hvordan de påvirker sidene i utstillingsvinduet. Mange temaer inneholder kode for å støtte skriptene dine, men noen av dem gjør ikke det. Dersom temaet ditt ikke har koden, kan du legge den til.

Feilsøking

De fleste problemer med skript og temaer involverer linjeelementskript som tilbyr rabatter. For eksempel er totalprisen for bestillingen riktig, men linjevareprisene viser ikke rabattene. Kundene må forstå hvordan rabattene beregnes. De vil se den opprinnelige og den rabatterte prisen i tillegg til en kort beskrivelse av rabatten. Hvis noen av disse detaljene mangler i handlekurven, må du legge til Liquid-koden slik at de blir synlige.

En god måte å sjekke hvordan skriptet ditt påvirker utstillingsvinduet på, er å besøke butikken som en kunde og utføre handlingene som utløser skriptet.

Egenskaper for Liquid-objekt

Følgende lister inneholder Egenskaper for Liquid-objekt som vanligvis kreves for å støtte skript i butikkens handlekurv:

Egenskaper for handlekurv-objekt:

Egenskaper for linjeelement:

Skriptobjekt:

  • Skriptobjekter kan brukes til å returnere informasjon om de aktive skriptene i en butikk. Dette objektet kan være nyttig ved feilsøking av skript.

Eksempel

Det følgende eksempelet beskriver endringene du kan gjøre i cart.liquid-malen for å støtte et linjevareskript.

Eksempel på handlekurv

For eksempel: Hvis du har en handlekurv med tre linjeelementer:

  • Fotball

    • Mengde: 1
    • Enhetspris: $ 15,00
  • Tennisball

    • Mengde: 5
    • Enhetspris: $ 5,00
  • Løpesko

    • Mengde: 1
    • Enhetspris: $ 30,00

Og du har publisert et skript som bruker følgende rabatter:

  • 10 % rabatt på to eller flere tennisballer
  • $ 5 rabatt på alle sko

Deretter kan cart.liquid-malen være en enkel tabell som viser linjeelementene og et sammendrag av totalbeløpene:

<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 rabattene som brukes av skriptet, oppretter denne malen følgende tabell for handlekurven:

Produkt Antall Totalt
Fotball 1 $ 15,00
Tennisball 5 $ 22,50
Løpesko 1 $ 25,00
Totalt $ 62,50

Oppdater linjevarene

For å vise rabattene som brukes av skriptet, må vi oppdatere linjeelementene for å vise tre nøkkelopplysninger:

  • linjeprisen før rabatter
  • linjeprisen etter rabatter
  • en melding som beskriver rabattene som ble brukt.

For å gjøre dette må du bruke følgende egenskaper for Liquid-objekt:

  • line_item.total_discount Returnerer rabattbeløpet som har blitt brukt på linjevaren
  • line_item.original_line_price Returnerer linjevarens pris før rabattene
  • line_item.message Returnerer en melding som beskriver rabattene som ble lagt til på linjevaren.

Det kan hjelpe med å skille den opprinnelige linjeprisen fra den rabatterte linjeprisen ved å bruke en gjennomstrekingseffekt:

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

Handlekurven din skal nå se slik ut:

Produkt Antall Totalt
Fotball 1 $ 15,00
Tennisball 5 $ 22,50 $ 25,00 (10 % rabatt på to eller flere tennisballer)
Løpesko 1 $ 25,00 $ 30,00 ($ 5 rabatt på alle sko)
Totalt $ 62,50

Oppdater handlekurvsammendraget

For å hjelpe kunden med å holde oversikt over totalprisen, bør du også vise:

  • den opprinnelige delsummen av handlekurven, slik at kundene kan sammenligne prisen før og etter rabatten ble lagt til
  • det totale beløpet kunden har spart.

Igjen, for å legge til denne informasjonen, kan du bruke følgende Liquid-objektegenskaper:

  • cart.total_discount Returnerer rabattbeløpet som gjelder for varer i handlekurven
  • cart.original_total_price Returnerer delsummen av handlekurven før rabatter.

Med denne informasjonen kan den oppdaterte .summary-blokken din se slik ut:

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

Handlekurvtabellen skal nå se slik ut:

Produkt Antall Totalt
Fotball 1 $ 15,00
Tennisball 5 $ 22,50 $ 25,00 (10 % rabatt på to eller flere tennisballer)
Løpesko 1 $ 25,00 $ 30,00 ($ 5 rabatt på alle sko)
Totalsum $ 70,00
Beløp spart på grunn av rabatt 7,50 $
Totalt $ 62,50

Ved å legge til noen nye Liquid-objekter i malene dine, kan du hjelpe kundene med å forstå hvordan rabattene beregnes.

Andre eksempler

Følgende Liquid-eksempel viser rabattene for hver enkelt linjevare:

  {% 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 annet rabatteksempel som inkluderer Liquid-kodeendringene.

Er du klar til å begynne å selge med Shopify?

Prøv det gratis