Cập nhật mẫu Liquid cho tập lệnh

Trang này được in vào May 08, 2024. Để lấy phiên bản hiện tại, vui lòng truy cập https://help.shopify.com/vi/manual/checkout-settings/script-editor/update-liquid-templates-for-scripts.

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

Xử lý vấn đề

Hầu hết các vấn đề về đoạn mã và chủ đề đều liên quan đến đoạn mã mục hàng có ưu đãi giảm giá. Ví dụ: Tổng giá của đơn hàng chính xác nhưng giá theo mục hàng lại không thể hiện ưu đãi giảm giá. Khách hàng cần hiểu cách tính ưu đãi giảm giá. Họ muốn xem giá gốc và giá đã chiết khấu cũng như nội dung mô tả ngắn gọn ưu đãi giảm giá. Nếu giỏ hàng thiếu bất kỳ thông tin chi tiết nào trong số những thông tin này, bạn cần thêm mã Liquid để chúng hiển thị.

Một cách hay để kiểm tra ảnh hưởng của đoạn mã đến cửa hàng là truy cập với vai trò khách hàng 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 chứa những thuộc tính đối tượng Liquid cần có để hỗ trợ đ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ã:

Có thể sử dụng đối tượng đoạn mã để trả lại thông tin về đ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ả những thay đổi bạn có thể thực hiện 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 chứa ba mục hàng:

Bóng đá
- Số lượng: 1
- Đơn giá :300.000 đồng
Bóng tennis
- Số lượng: 5
- Đơn giá: 5,00 USD
Giày chạy
- Số lượng: 1
- Đơn giá: 30,00 USD

Và bạn đã đăng một đoạn mã áp dụng những ưu đãi giảm giá sau:

giảm giá 10% khi mua hai quả bóng tennis trở lên
giảm giá 100.000 đồng toàn bộ giày

Khi đó, mẫu cart.liquid của bạn có thể là bảng đơn giản liệt kê các mục hàng và bản tóm tắt tổng số lượng các mục hàng đó:

<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 ưu đãi giảm giá mà đoạn mã áp dụng, mẫu này sẽ tạo cho giỏ hàng một bảng như sau:

Sản phẩm	Số lượng	Tổng
Bóng đá	1	300.000 đồng
Bóng tennis	5	450.000 đồng
Giày chạy	1	25,00 $
Tổng		1.250.000 đồng

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

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

giá mục hàng trước khi giảm giá
giá mục hàng sau khi giảm giá
thông báo mô tả các ưu đãi giảm giá đã áp dụng.

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

line_item.total_discount trả lại số tiền giảm giá áp dụng cho mục hàng
line_item.original_line_price trả lại giá theo mục hàng trước khi giảm giá
line_item.message trả lại thông báo mô tả ưu đãi giảm giá đã áp dụng cho mục hàng.

Có thể phân biệt giá mục hàng ban đầu với giá đã chiết khấu bằng cách sử dụng hiệu ứng gạch ngang chữ:

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

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

Sản phẩm	Số lượng	Tổng
Bóng đá	1	300.000 đồng
Bóng tennis	5	450.000 đồng ~~500.000 đồng~~ (giảm giá 10% khi mua hai quả bóng tennis trở lên)
Giày chạy	1	500.000 đồng ~~600.000 đồng~~ (giảm giá 100.000 đồng cho toàn bộ giày)
Tổng		1.250.000 đồng

Cập nhật tổng quan giỏ hàng

Để giúp khách 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 có thể so sánh tổng số tiền trước và sau khi giảm giá
tổng số tiền khách hàng tiết kiệm được với giỏ hàng này.

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

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

Với thông tin này, khối .summary đã cập nhật sẽ 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 trông sẽ như sau:

Sản phẩm	Số lượng	Tổng
Bóng đá	1	300.000 đồng
Bóng tennis	5	450.000 đồng ~~500.000 đồng~~ (giảm giá 10% khi mua hai quả bóng tennis trở lên)
Giày chạy	1	500.000 đồng ~~600.000 đồng~~ (giảm giá 100.000 đồng cho toàn bộ giày)
Tổng phụ		1.400.000 đồng
Số tiền tiết kiệm được nhờ ưu đãi giảm giá		7,50 $
Tổng		1.250.000 đồng

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

Ví dụ khác

Ví dụ về Liquid sau đây cho thấy ưu đãi 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ụ ưu đãi giảm giá khác có sự thay đổi mã Liquid.

Cập nhật mẫu Liquid cho tập lệnh

Trên trang này

Xử lý vấn đề

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

Ví dụ

Ví dụ về giỏ hàng

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

Cập nhật tổng quan giỏ hàng

Ví dụ khác

Bạn đã sẵn sàng bán hàng với Shopify?