Memperbarui template Liquid untuk Skrip

Jika Anda menjalankan skrip di toko online, Anda perlu memeriksa pengaruhnya terhadap halaman di etalase toko online Anda. Banyak tema menyertakan kode untuk mendukung skrip Anda, tetapi beberapa tidak. Jika tema Anda tidak memiliki kode tersebut, Anda dapat menambahkannya.

Di halaman ini

Penyelesaian masalah

Sebagian besar masalah dengan skrip dan tema melibatkan skrip item pesanan yang menawarkan diskon. Misalnya, harga total pesanan sudah benar, tetapi harga item pesanan tidak menampilkan diskon. Pelanggan perlu memahami cara penghitungan diskon mereka. Mereka ingin melihat harga asli dan harga diskon serta deskripsi singkat diskon. Jika salah satu detail ini tidak ada di keranjang Anda, Anda perlu menambahkan kode Liquid agar detail tersebut muncul.

Cara yang baik untuk memeriksa pengaruh skrip terhadap etalase toko online Anda adalah dengan berkunjung sebagai pelanggan dan melakukan tindakan yang memicu skrip.

Atribut objek Liquid

Daftar berikut berisi atribut objek Liquid yang umumnya diperlukan untuk mendukung skrip di keranjang toko Anda:

Atribut objek keranjang:

Atribut item pesanan:

Objek skrip:

Objek skrip dapat digunakan untuk menampilkan informasi tentang skrip aktif toko. Objek ini dapat berguna saat melakukan debug skrip.

Contoh

Contoh berikut menjelaskan perubahan yang dapat Anda buat pada template cart.liquid Anda untuk mendukung skrip item pesanan.

Contoh keranjang

Misalnya, jika Anda memiliki keranjang dengan tiga item pesanan:

Bola sepak
- Kuantitas: 1
- Harga satuan: $15,00
Bola tenis
- Kuantitas: 5
- Harga satuan: $5,00
Sepatu lari
- Kuantitas: 1
- Harga satuan: $30,00

Dan Anda telah memublikasikan skrip yang menerapkan diskon berikut:

Diskon 10% untuk dua bola tenis atau lebih
Diskon $5 untuk semua sepatu

Maka, template cart.liquid Anda mungkin berupa tabel sederhana yang mencantumkan item pesanan dan ringkasan jumlah totalnya:

<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 diskon yang diterapkan oleh skrip, template ini akan membuat tabel berikut untuk keranjang Anda:

Produk	Kuantitas	Total
Bola sepak	1	$15,00
Bola tenis	5	$22,50
Sepatu lari	1	$25,00
Total		$62,50

Perbarui item pesanan

Untuk menampilkan diskon yang diterapkan oleh skrip, kita perlu memperbarui item pesanan untuk menampilkan tiga informasi penting:

harga item pesanan sebelum diskon
harga item pesanan setelah diskon
pesan yang menjelaskan diskon yang diterapkan.

Untuk melakukannya, gunakan atribut objek Liquid berikut:

line_item.total_discount menampilkan jumlah diskon yang telah diterapkan pada item pesanan
line_item.original_line_price menampilkan harga item pesanan sebelum diskon
line_item.message menampilkan pesan yang menjelaskan diskon yang diterapkan pada item pesanan.

Akan lebih baik jika Anda membedakan harga item pesanan asli dari harga item pesanan yang didiskon menggunakan efek coretan:

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

Keranjang Anda sekarang akan terlihat seperti ini:

Produk	Kuantitas	Total
Bola sepak	1	$15,00
Bola tenis	5	$22,50 ~~$25,00~~ (Diskon 10% untuk dua bola tenis atau lebih)
Sepatu lari	1	$25,00 ~~$30,00~~ (Diskon $5 untuk semua sepatu)
Total		$62,50

Perbarui ringkasan keranjang

Untuk membantu pelanggan melacak harga pesanannya, Anda juga harus menampilkan:

subtotal asli keranjang, agar pelanggan dapat membandingkan total sebelum dan sesudah diskon
total penghematan yang diterima pelanggan di keranjang mereka.

Sekali lagi, untuk menambahkan informasi ini, gunakan atribut objek Liquid berikut:

cart.total_discount menampilkan jumlah diskon yang diterapkan pada item di keranjang
cart.original_total_price menampilkan subtotal keranjang sebelum diskon.

Dengan informasi ini, blok .summary Anda yang diperbarui mungkin akan terlihat 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>

Tabel keranjang Anda sekarang akan terlihat seperti ini:

Produk	Kuantitas	Total
Bola sepak	1	$15,00
Bola tenis	5	$22,50 ~~$25,00~~ (Diskon 10% untuk dua bola tenis atau lebih)
Sepatu lari	1	$25,00 ~~$30,00~~ (Diskon $5 untuk semua sepatu)
Subtotal		$70,00
Penghematan diskon		$7,50
Total		$62,50

Dengan menambahkan beberapa objek Liquid baru ke templat, Anda dapat membantu pelanggan memahami cara diskon mereka dihitung.

Contoh lainnya

Contoh Liquid berikut menunjukkan diskon untuk setiap item pesanan:

{% 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 diskon lain yang menyertakan perubahan kode Liquid.