Mengemas kini templat Liquid anda untuk Skrip

Jika anda menjalankan skrip dalam kedai dalam talian anda, maka anda perlu menyemak cara skrip tersebut menjejaskan halaman dalam laman kedai anda. Kebanyakan tema menyertakan kod untuk menyokong skrip anda, tetapi ada yang tidak berbuat demikian. Jika tema anda tidak mempunyai kod itu, maka anda boleh menambahkannya.

Pada halaman ini

Penyelesaian masalah

Kebanyakan isu dengan skrip dan tema melibatkan skrip item baris yang menawarkan diskaun. Contohnya, jumlah harga pesanan adalah betul, tetapi harga item baris tidak menunjukkan diskaun. Pelanggan perlu memahami cara diskaun mereka dikira. Mereka mahu melihat harga asal dan harga diskaun berserta penerangan ringkas tentang diskaun tersebut. Jika mana-mana butiran ini tiada daripada troli anda, maka anda perlu menambahkan kod Liquid supaya butiran tersebut dipaparkan.

Cara yang baik untuk menyemak cara skrip anda menjejaskan laman kedai anda ialah dengan melawatinya sebagai pelanggan dan melakukan tindakan yang mencetuskan skrip tersebut.

Atribut objek Liquid

Senarai berikut mengandungi atribut objek Liquid yang biasanya diperlukan untuk menyokong skrip dalam troli kedai anda:

Atribut objek troli:

Atribut item baris:

Objek skrip:

Objek skrip boleh digunakan untuk mengembalikan maklumat tentang skrip aktif kedai. Objek ini boleh berguna semasa menyahpepijat skrip.

Contoh

Contoh berikut menerangkan perubahan yang boleh anda buat pada templat cart.liquid anda untuk menyokong skrip item baris.

Contoh troli

Contohnya, jika anda mempunyai troli dengan tiga item baris:

Bola sepak
- Kuantiti: 1
- Harga seunit: $15.00
Bola tenis
- Kuantiti: 5
- Harga seunit: $5.00
Kasut lari
- Kuantiti: 1
- Harga seunit: $30.00

Dan anda telah menerbitkan skrip yang menggunakan diskaun berikut:

Potongan 10% untuk dua atau lebih bola tenis
Potongan $5 untuk semua kasut

Kemudian, templat cart.liquid anda mungkin jadual ringkas yang menyenaraikan item baris dan ringkasan jumlah amaunnya:

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

Dengan diskaun yang digunakan oleh skrip, templat ini mencipta jadual berikut untuk troli anda:

Produk	Kuantiti	Jumlah
Bola sepak	1	$15.00
Bola tenis	5	$22.50
Kasut lari	1	$25.00
Jumlah		$62.50

Kemaskinikan item baris

Untuk memaparkan diskaun yang dikenakan oleh skrip, item baris perlu dikemaskinikan untuk menunjukkan tiga maklumat penting:

harga baris sebelum diskaun
harga baris selepas diskaun
mesej yang menerangkan diskaun yang digunakan.

Untuk melakukan perkara ini, gunakan atribut objek Liquid yang berikut:

line_item.total_discount mengembalikan amaun diskaun yang telah digunakan pada item baris
line_item.original_line_price mengembalikan harga item baris sebelum diskaun
line_item.message mengembalikan mesej yang menerangkan diskaun yang telah digunakan pada item baris.

Menggunakan kesan coret dapat membantu membezakan harga baris asal dengan harga baris diskaun:

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

Troli anda kini seharusnya kelihatan seperti ini:

Produk	Kuantiti	Jumlah
Bola sepak	1	$15.00
Bola tenis	5	$22.50 ~~$25.00~~ (Potongan 10% untuk dua atau lebih bola tenis)
Kasut lari	1	$25.00 ~~$30.00~~ (Potongan $5 untuk semua kasut)
Jumlah		$62.50

Kemaskinikan ringkasan troli

Untuk membantu pelanggan menjejak harga pesanan mereka, anda juga perlu menunjukkan:

subjumlah asal troli, untuk membolehkan pelanggan membandingkan jumlah sebelum dan selepas diskaun
jumlah penjimatan yang diterima pelanggan untuk troli mereka.

Sekali lagi, untuk menambah maklumat ini, gunakan atribut objek Liquid yang berikut:

cart.total_discount mengembalikan amaun diskaun yang digunakan pada item dalam troli
cart.original_total_price mengembalikan subjumlah troli sebelum diskaun.

Dengan maklumat ini, blok .summary anda yang dikemas kini mungkin kelihatan seperti ini:

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

Jadual troli anda kini sepatutnya kelihatan seperti ini:

Produk	Kuantiti	Jumlah
Bola sepak	1	$15.00
Bola tenis	5	$22.50 ~~$25.00~~ (Potongan 10% untuk dua atau lebih bola tenis)
Kasut lari	1	$25.00 ~~$30.00~~ (Potongan $5 untuk semua kasut)
Subjumlah		$70.00
Penjimatan diskaun		$7.50
Jumlah		$62.50

Dengan menambah beberapa objek Liquid baharu pada templat anda, anda boleh membantu pelanggan anda memahami cara diskaun mereka dikira.

Contoh lain

Contoh Liquid yang berikut menunjukkan diskaun untuk setiap item baris:

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

Lihat contoh diskaun lain yang menyertakan perubahan kod Liquid.