說明
登入

更新您的 Liquid 範本以支援 Shopify 指令碼

如果您在網路商店執行指令碼，請檢查這些指令碼對線上店面各頁面的影響。多數佈景主題都已包含支援指令碼的程式碼，但也有些沒有。如果您的佈景主題沒有這段程式碼，您可以自行加入。

本頁內容

疑難排解

指令碼與佈景主題最常見的問題，多半出在提供折扣的商品項目指令碼。例如，訂單總金額正確，但商品項目的價格未顯示折扣。顧客需要知道折扣如何計算，他們希望看到原價與折扣後價格，以及簡短的折扣說明。如果購物車缺少上述資訊，您需要加入 Liquid 程式碼，讓這些內容顯示出來。

檢視指令碼對線上店面的影響，最佳做法是以顧客身分造訪並執行會觸發指令碼的操作。

Liquid 物件屬性

下列清單列出在商店購物車中支援指令碼常用的 Liquid 物件屬性：

購物車物件屬性：

商品項目屬性：

script 物件：

  • script 物件可用來傳回商店中作用中的指令碼相關資訊。此物件在除錯指令碼時很有幫助。

範例

以下範例說明您可以如何調整 cart.liquid 範本，以支援商品項目指令碼。

購物車範例

例如，購物車內有三個商品項目：

  • 足球
    • 數量：1
    • 單價：$15.00
  • 網球
    • 數量：5
    • 單價：$5.00
  • 慢跑鞋
    • 數量：1
    • 單價：$30.00

並且您已發佈一個會套用下列折扣的指令碼：

  • 網球兩顆以上 9 折
  • 所有鞋款折抵 $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 (網球兩顆以上 9 折)
慢跑鞋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 (網球兩顆以上 9 折)
慢跑鞋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 程式碼變更的discount example。