การอัปเดตเทมเพลต Liquid ของคุณสำหรับ 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

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

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

ราคาสินค้าเฉพาะรายการก่อนหักส่วนลด
ราคาสินค้าเฉพาะรายการหลังหักส่วนลด
ข้อความที่อธิบายส่วนลดที่ใช้

หากต้องการดำเนินการดังกล่าว ให้ใช้คุณลักษณะอ็อบเจกต์ 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