Cập nhật mẫu Liquid cho Scripts

Nếu chạy tập lệnh trong cửa hàng trực tuyến, bạn cần kiểm tra xem chúng ảnh hưởng thế nào đến các trang trên cửa hàng. Nhiều chủ đề có chứa mã để hỗ trợ tập lệnh, nhưng một số chủ đề lại không. Nếu chủ đề không có sẵn mã, bạn có thể tự thêm vào.

Khắc phục sự cố

Hầu hết các sự cố về đoạn mã và chủ đề liên quan đến các đoạn mã mục hàng cung cấp giảm giá. Ví dụ: tổng giá của đơn hàng đã chính xác, nhưng giá của mục hàng không hiển thị khoản giảm giá. Khách hàng cần hiểu cách tính toán khoản giảm giá. Họ muốn xem giá ban đầu và giá sau khi giảm cùng với mô tả ngắn gọn về khoản giảm giá. Nếu giỏ hàng thiếu bất kỳ chi tiết nào trong số này, cần thêm mã Liquid để chúng hiển thị.

Cách hiệu quả để kiểm tra xem đoạn mã ảnh hưởng đến cửa hàng như thế nào là đóng vai khách hàng truy cập và thực hiện các thao tác kích hoạt đoạn mã.

Thuộc tính đối tượng Liquid

Danh sách sau đây chứa các thuộc tính đối tượng Liquid thường dùng để hỗ trợ các đoạn mã trong giỏ hàng của cửa hàng:

Thuộc tính đối tượng giỏ hàng:

Thuộc tính mục hàng:

Đối tượng đoạn mã:

  • Đối tượng đoạn mã có thể được dùng để trả về thông tin về các đoạn mã đang hoạt động của cửa hàng. Đối tượng này có thể hữu ích khi gỡ lỗi đoạn mã.

Ví dụ

Ví dụ sau đây mô tả các thay đổi có thể thực hiện đối với mẫu cart.liquid để hỗ trợ đoạn mã mục hàng.

Ví dụ về giỏ hàng

Ví dụ: nếu bạn có giỏ hàng với ba mục hàng:

  • Quả bóng đá
    • Số lượng: 1
    • Đơn giá: $15.00
  • Quả bóng tennis
    • Số lượng: 5
    • Đơn giá: $5.00
  • Giày chạy bộ
    • Số lượng: 1
    • Đơn giá: $30.00

Và bạn đã xuất bản một đoạn mã áp dụng các khoản giảm giá sau:

  • Giảm 10% khi mua từ hai quả bóng tennis trở lên
  • Giảm $5 cho mọi đôi giày

Sau đó, mẫu cart.liquid có thể là một bảng đơn giản liệt kê các mục hàng và tóm tắt tổng số tiền:

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

Với các khoản giảm giá do đoạn mã áp dụng, mẫu này tạo bảng sau cho giỏ hàng:

Sản phẩmSố lượngTổng
Quả bóng đá1$15.00
Quả bóng tennis5$22.50
Giày chạy bộ1$25.00
Tổng$62.50

Cập nhật mục hàng

Để hiển thị các khoản giảm giá do đoạn mã áp dụng, cần cập nhật các mục hàng để hiển thị ba thông tin chính sau:

  • giá của mục hàng trước khi giảm giá
  • giá của mục hàng sau khi giảm giá
  • thông báo mô tả các khoản giảm giá đã được áp dụng.

Để thực hiện việc này, hãy sử dụng các thuộc tính đối tượng Liquid sau:

  • line_item.total_discount trả về số tiền giảm giá đã áp dụng cho mục hàng
  • line_item.original_line_price trả về giá của mục hàng trước khi giảm giá
  • line_item.message trả về thông báo mô tả các khoản giảm giá đã được áp dụng cho mục hàng.

Có thể sử dụng hiệu ứng gạch ngang để giúp phân biệt giá ban đầu của mục hàng với giá sau khi giảm:

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

Giỏ hàng của bạn lúc này sẽ trông như sau:

Sản phẩmSố lượngTổng
Quả bóng đá1$15.00
Quả bóng tennis5$22.50 $25.00 (Giảm 10% khi mua từ hai quả bóng tennis trở lên)
Giày chạy bộ1$25.00 $30.00 (Giảm $5 cho mọi đôi giày)
Tổng$62.50

Cập nhật tóm tắt giỏ hàng

Để giúp khách hàng theo dõi giá đơn hàng, bạn cũng nên hiển thị:

  • tổng phụ ban đầu của giỏ hàng, để khách hàng so sánh tổng tiền trước và sau khi giảm giá
  • tổng số tiền tiết kiệm được từ giỏ hàng.

Một lần nữa, để thêm thông tin này, hãy sử dụng các thuộc tính đối tượng Liquid sau:

  • cart.total_discount trả về số tiền giảm giá được áp dụng cho các mặt hàng trong giỏ hàng
  • cart.original_total_price trả về tổng phụ của giỏ hàng trước khi giảm giá.

Với thông tin này, khối .summary đã cập nhật có thể trông như sau:

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

Bảng giỏ hàng của bạn lúc này sẽ trông như sau:

Sản phẩmSố lượngTổng
Quả bóng đá1$15.00
Quả bóng tennis5$22.50 $25.00 (Giảm 10% khi mua từ hai quả bóng tennis trở lên)
Giày chạy bộ1$25.00 $30.00 (Giảm $5 cho mọi đôi giày)
Tổng phụ$70.00
Tiết kiệm nhờ giảm giá$7.50
Tổng$62.50

Bằng cách thêm một vài đối tượng Liquid mới vào các mẫu, bạn có thể giúp khách hàng hiểu cách tính khoản giảm giá.

Các ví dụ khác

Ví dụ về Liquid sau đây hiển thị khoản giảm giá cho từng mục hàng:

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

Xem ví dụ về giảm giá khác có bao gồm các thay đổi đối với mã Liquid.