Shopify スクリプト用の Liquid テンプレートの更新

オンラインストアでスクリプトを実行している場合、ストアフロントのページにどのような影響があるかを確認する必要があります。多くのテーマにはスクリプトをサポートするコードが含まれていますが、含まれていないテーマもあります。お使いのテーマにコードが含まれていない場合は、追加することができます。

このページの内容

トラブルシューティング

スクリプトとテーマに関するほとんどの問題は、ディスカウントを提供する項目スクリプトに関連しています。たとえば、注文の合計金額は正しいのに、項目の価格にディスカウントが表示されない、といったケースです。お客様は、ディスカウントがどのように計算されたかを確認する必要があります。お客様は、元の価格とディスカウント後の価格、そしてディスカウントの簡単な説明が表示されることを期待しています。これらの詳細のいずれかがカートに表示されない場合は、Liquidコードを追加して表示されるようにする必要があります。

スクリプトがストアフロントにどのような影響を与えるかを確認する良い方法は、お客様としてストアにアクセスし、スクリプトをトリガーする操作を実行してみることです。

Liquidオブジェクトの属性

以下のリストは、ストアのカートでスクリプトをサポートするために一般的に必要となる Liquid オブジェクトの属性です。

カートオブジェクトの属性：

項目属性：

スクリプトオブジェクト：

スクリプトオブジェクトを使用すると、ストアで有効なスクリプトに関する情報を返すことができます。このオブジェクトは、スクリプトのデバッグに役立ちます。

例

以下の例では、項目スクリプトをサポートするために cart.liquid テンプレートに加えることができる変更について説明します。

カートの例

たとえば、カートに以下の3つの項目があるとします。

サッカーボール
- 数量：1
- 単価：$15.00
テニスボール
- 数量：5
- 単価：$5.00
ランニングシューズ
- 数量：1
- 単価：$30.00

そして、以下のディスカウントを適用するスクリプトを公開したとします。

テニスボール2個以上で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~~ (テニスボール2個以上で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~~ (テニスボール2個以上で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 コードの変更を含む、別のディスカウントの例をご覧ください。