Liquid-mallien päivittäminen skriptejä varten

Jos käytät skriptejä verkkokaupassasi, sinun on tarkistettava, miten ne vaikuttavat myyntipaikkasi sivuihin. Monet teemat sisältävät koodin, joka tukee skriptejäsi, mutta jotkin eivät. Jos teemassasi ei ole koodia, voit lisätä sen.

Tällä sivulla

Vianmääritys

Useimmat skripteihin ja teemoihin liittyvät ongelmat koskevat rivikohtaskriptejä, jotka tarjoavat alennuksia. Esimerkiksi tilauksen kokonaishinta voi olla oikein, mutta rivikohtien hinnoissa ei näy alennuksia. Asiakkaiden on ymmärrettävä, miten heidän alennuksensa lasketaan. He haluavat nähdä alkuperäisen hinnan ja alennushinnan sekä lyhyen kuvauksen alennuksesta. Jos jokin näistä tiedoista puuttuu ostoskoristasi, sinun on lisättävä Liquid-koodi, jotta ne tulevat näkyviin.

Hyvä tapa tarkistaa, miten skriptisi vaikuttaa myyntipaikkaasi, on vierailla siellä asiakkaana ja suorittaa toiminnot, jotka käynnistävät skriptin.

Liquid-objektien attribuutit

Seuraavat luettelot sisältävät Liquid-objektien attribuutteja, joita yleisesti tarvitaan skriptien tukemiseen kauppasi ostoskorissa:

Ostoskoriobjektin attribuutit:

Rivikohdan attribuutit:

Skriptiobjekti:

Skriptiobjektia voidaan käyttää palauttamaan tietoja kaupan aktiivisista skripteistä. Tämä objekti voi olla hyödyllinen skriptejä virheenkorjattaessa.

Esimerkki

Seuraavassa esimerkissä kuvataan muutokset, jotka voit tehdä cart.liquid-malliisi rivikohtaskriptin tukemiseksi.

Esimerkkiostoskori

Esimerkiksi, jos ostoskorissasi on kolme rivikohtaa:

Jalkapallo
- Määrä: 1
- Yksikköhinta: 15,00 $
Tennispallo
- Määrä: 5
- Yksikköhinta: 5,00 $
Juoksukenkä
- Määrä: 1
- Yksikköhinta: 30,00 $

Ja olet julkaissut skriptin, joka soveltaa seuraavia alennuksia:

10 %:n alennus kahdesta tai useammasta tennispallosta
5 $:n alennus kaikista kengistä

Silloin cart.liquid-mallisi voisi olla yksinkertainen taulukko, joka luettelee rivikohdat ja yhteenvedon niiden kokonaissummista:

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

Skriptin soveltamilla alennuksilla tämä malli luo ostoskorillesi seuraavan taulukon:

Tuote	Määrä	Yhteensä
Jalkapallo	1	15,00 $
Tennispallo	5	22,50 $
Juoksukenkä	1	25,00 $
Yhteensä		62,50 $

Rivikohtien päivittäminen

Jotta skriptin soveltamat alennukset voidaan näyttää, rivikohdat on päivitettävä näyttämään kolme keskeistä tietoa:

rivikohdan hinta ennen alennuksia
rivikohdan hinta alennusten jälkeen
viesti, jossa kuvataan sovelletut alennukset.

Käytä tähän seuraavia Liquid-objektien attribuutteja:

line_item.total_discount palauttaa rivikohtaan sovelletun alennuksen määrän
line_item.original_line_price palauttaa rivikohdan hinnan ennen alennuksia
line_item.message palauttaa viestin, jossa kuvataan rivikohtaan sovelletut alennukset.

Alkuperäinen rivihinta voi olla hyödyllistä erottaa alennetusta rivihinnasta yliviivaustehosteella:

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

Ostoskorisi pitäisi nyt näyttää tältä:

Tuote	Määrä	Yhteensä
Jalkapallo	1	15,00 $
Tennispallo	5	22,50 $ ~~25,00 $~~ (10 %:n alennus kahdesta tai useammasta tennispallosta)
Juoksukenkä	1	25,00 $ ~~30,00 $~~ (5 $:n alennus kaikista kengistä)
Yhteensä		62,50 $

Ostoskorin yhteenvedon päivittäminen

Jotta asiakas pysyy selvillä tilauksensa hinnasta, sinun kannattaa näyttää myös seuraavat tiedot:

ostoskorin alkuperäinen välisumma, jotta asiakkaat voivat verrata summia ennen alennusta ja sen jälkeen
asiakkaan ostoskorissaan saamat kokonaissäästöt.

Käytä jälleen seuraavia Liquid-objektien attribuutteja näiden tietojen lisäämiseen:

cart.total_discount palauttaa ostoskorin tuotteisiin sovelletun alennuksen määrän
cart.original_total_price palauttaa ostoskorin välisumman ennen alennuksia.

Näiden tietojen avulla päivitetty .summary-lohkosi voi näyttää tältä:

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

Ostoskoritaulukkosi pitäisi nyt näyttää tältä:

Tuote	Määrä	Yhteensä
Jalkapallo	1	15,00 $
Tennispallo	5	22,50 $ ~~25,00 $~~ (10 %:n alennus kahdesta tai useammasta tennispallosta)
Juoksukenkä	1	25,00 $ ~~30,00 $~~ (5 $:n alennus kaikista kengistä)
Välisumma		70,00 $
Alennus		7,50 $
Yhteensä		62,50 $

Lisäämällä malleihisi muutamia uusia Liquid-objekteja voit auttaa asiakkaitasi ymmärtämään, miten heidän alennuksensa lasketaan.

Muita esimerkkejä

Seuraavassa Liquid-esimerkissä näytetään kunkin rivikohdan alennukset:

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

Katso toinen alennusesimerkki, joka sisältää Liquid-koodimuutokset.