อัปเดตเทมเพลต Liquid สำหรับใช้กับสคริปต์

หน้านี้พิมพ์ขึ้นเมื่อ Apr 20, 2024 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ https://help.shopify.com/th/manual/checkout-settings/script-editor/update-liquid-templates-for-scripts

หากคุณใช้งานสคริปต์ในร้านค้าออนไลน์ของคุณคุณจำเป็นต้องตรวจสอบว่าสคริปต์นั้นมีผลกระทบต่อหน้าในร้านของคุณอย่างไร ธีมส่วนมากมีโค้ดเพื่อรองรับสคริปต์ของคุณแต่ธีมบางชนิดก็ไม่รองรับ หากธีมของคุณไม่มีโค้ดคุณสามารถเพิ่มได้

ในหน้านี้

การแก้ไขปัญหา

ปัญหาส่วนใหญ่เกี่ยวกับสคริปต์และธีมมักเกี่ยวข้องกับสคริปต์สินค้ารายการที่เสนอส่วนลด ตัวอย่างเช่นราคารวมของคำสั่งซื้อถูกต้องแต่ราคาสินค้าเฉพาะรายการจะไม่แสดงส่วนลด ลูกค้าต้องทำความเข้าใจว่าส่วนลดของพวกเขานั้นคำนวนอย่างไร พวกเขาต้องการดูราคาเดิมและราคาที่ลดราคาแล้วรวมถึงคำอธิบายโดยย่อของส่วนลด หากรายละเอียดเหล่านี้ขาดหายไปจากตะกร้าสินค้าของคุณคุณจำเป็นต้องเพิ่มโค้ด Liquid เพื่อให้รายละเอียดเหล่านี้ปรากฎขึ้น

วิธีที่ดีในการตรวจสอบว่าสคริปต์ของคุณมีผลต่อร้านของคุณอย่างไรคือการเยี่ยมชมร้านในฐานะลูกค้าและดำเนินการการกระทำที่จะทำให้สคริปต์ทำงาน

แอตทริบิวต์อ็อบเจกต์ Liquid

รายการต่อไปนี้ประกอบด้วยแอตทริบิวต์ของอ็อบเจกต์ Liquid ที่จำเป็นสำหรับการรองรับสคริปต์ในตะกร้าสินค้าของร้านค้าของคุณ:

แอตทริบิวต์ของอ็อบเจกต์ตะกร้าสินค้า:

แอตทริบิวต์ของสินค้าเฉพาะรายการ:

อ็อบเจกต์สคริปต์:

  • คุณสามารถใช้สคริปต์อ็อบเจกต์เพื่อเรียกดูข้อมูลเกี่ยวกับสคริปต์ที่ใช้งานอยู่ของร้านค้าได้ อ็อบเจกต์นี้อาจมีประโยชน์เมื่อต้องการแก้จุดบกพร่องของสคริปต์

ตัวอย่าง

ตัวอย่างต่อไปนี้อธิบายการเปลี่ยนแปลงที่คุณสามารถทำได้ในเทมเพลต cart.liquid เพื่อรองรับสคริปต์สินค้าเฉพาะรายการ

ตัวอย่างตะกร้าสินค้า

ตัวอย่างเช่นหากคุณมีตะกร้าสินค้าเฉพาะรายการสามรายการ:

  • ลูกฟุตบอล

    • จำนวน: 1
    • ราคาต่อหน่วย: $15.00

  • ลูกเทนนิส

    • จำนวน: 5
    • ราคาต่อหน่วย: $5.00

  • รองเท้าสำหรับวิ่ง

    • จำนวน: 1
    • ราคาต่อหน่วย: $30.00

และคุณได้เผยแพร่สคริปต์ที่ใช้ส่วนลดดังต่อไปนี้:

  • ส่วนลด 10% สำหรับลูกเทนนิสสองลูกหรือมากกว่า
  • ส่วนลด $5 สำหรับรองเท้าทั้งหมด

เทมเพลต cart.liquid ของคุณอาจเป็นตารางอย่างง่ายที่แสดงรายการสินค้าเฉพาะรายการและสรุปจำนวนเงินทั้งหมด:

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

เมื่อมีการใช้ส่วนลดโดยสคริปต์ เทมเพลตนี้จะสร้างตารางต่อไปนี้สำหรับตะกร้าสินค้าของคุณ:

สินค้า ปริมาณ ยอดรวม
ลูกฟุตบอล 1 $15.00
ลูกเทนนิส 5 $22.50
รองเท้าสำหรับวิ่ง 1 $25.00
ยอดรวม $62.50

อัปเดตสินค้าเฉพาะรายการ

หากต้องการแสดงส่วนลดที่ใช้งานสคริปต์เราจำเป็นต้องอัปเดตสินค้าเฉพาะรายการเพื่อแสดงข้อมูลสำคัญ 3 รายการดังต่อไปนี้:

  • ราคาต่อรายการก่อนใช้ส่วนลด
  • ราคาต่อรายการหลังใช้ส่วนลด
  • ข้อความที่อธิบายส่วนลดที่ถูกนำไปใช้

หากต้องการดำเนินการให้ใช้แอตทริบิวต์อ็อบเจกต์ Liquid ต่อไปนี้:

  • line_item.total_discount แสดงจำนวนส่วนลดที่ใช้กับสินค้าเฉพาะรายการ
  • line_item.original_line_price แสดงราคาสินค้าเฉพาะรายการก่อนส่วนลด
  • line_item.message แสดงข้อความที่อธิบายส่วนลดที่ใช้กับสินค้าเฉพาะรายการ

การใช้เอฟเฟกต์ขีดทับสามารถช่วยเน้นให้เห็นถึงความต่างระหว่างราคาดั้งเดิมและราคาที่ลดแล้ว

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

ตะกร้าสินค้าของคุณควรจะมีลักษณะดังนี้:

สินค้า ปริมาณ ยอดรวม
ลูกฟุตบอล 1 $15.00
ลูกเทนนิส 5 $22.50 $25.00(ส่วนลด 10% สำหรับลูกเทนนิสมากกว่าสองลูก)
รองเท้าสำหรับวิ่ง 1 $25.00 $30.00 (ส่วนลด $5 สำหรับรองเท้าทุกคู่)
ยอดรวม $62.50

อัปเดตข้อมูลสรุปของตะกร้าสินค้า

เพื่อช่วยให้ลูกค้าติดตามราคาของคำสั่งซื้อของพวกเขาคุณควรจะแสดง:

  • ยอดรวมเดิมของตะกร้าสินค้าเพื่อให้ลูกค้าเปรียบเทียบยอดรวมของก่อนและหลังส่วนลด
  • ยอดเงินรวมส่วนลดที่ลูกค้าได้รับในตะกร้าสินค้าของพวกเขา

หากต้องการเพิ่มข้อมูลนี้ให้ใช้แอตทริบิวต์อ็อบเจกต์ Liquid ต่อไปนี้:

  • cart.total_discount เรียกดูจำนวนส่วนลดที่ใช้กับสินค้าในตะกร้าสินค้า
  • cart.original_total_price เรียกดูยอดรวมของตะกร้าสินค้าก่อนหักส่วนลด

เมื่อมีข้อมูลนี้แล้วบล็อก .summary ที่อัปเดตแล้วของคุณอาจมีลักษณะดังนี้:

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

ขณะนี้ตารางตะกร้าสินค้าของคุณควรมีลักษณะดังนี้:

สินค้า ปริมาณ ยอดรวม
ลูกฟุตบอล 1 $15.00
ลูกเทนนิส 5 $22.50 $25.00(ส่วนลด 10% สำหรับลูกเทนนิสมากกว่าสองลูก)
รองเท้าสำหรับวิ่ง 1 $25.00 $30.00 (ส่วนลด $5 สำหรับรองเท้าทุกคู่)
ยอดรวมย่อย $70.00
เงินที่ประหยัดเพราะส่วนลด $7.50
ยอดรวม $62.50

เมื่อเพิ่มอ็อบเจกต์ Liquid ใหม่บางอย่างไปยังเทมเพลตของคุณคุณสามารถช่วยให้ลูกค้าเข้าใจวิธีคำนวณส่วนลดได้

ตัวอย่างอื่นๆ

ตัวอย่าง Liquid ต่อไปนี้แสดงส่วนลดสำหรับสินค้าเฉพาะรายการแต่ละรายการ:

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

ดูตัวอย่างส่วนลดอื่นที่มีการเปลี่ยนแปลงโค้ด Liquid

พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง

ทดลองใช้งานฟรี