#08　カートページのLiquidについて

2021年12月21日 17:44

このページを見ることでカートページで使われるLiquidについて詳しくなれます。

Bootstrapでコーディングをします。
使用するLiquidは元々あるコードをそのまま使います。
商品サムネイル画像のサイズだけ中サイズから小サイズに変更しました。

完成コードは以下です。

{% if cart.item_count > 0 %}

    <div class="container">
      <div class="row">
        <p class="h2 my-5 text-center">カートの中身</p>
      </div>
      <div class="my-5">
        <form action="/cart" method="POST" class="row" novalidate>
            <div class="col-12 col-md-8">
              <div class="card shadow">
                <div class="card-body">
                    <table class="table table-borderless">
                      <thead>
                        <th colspan="2">製品</th>
                        <th>価格</th>
                        <th>数量</th>
                        <th>小計</th>
                      </thead>
                      <tbody>
                        {% for item in cart.items %}
                          <tr>
                            <td>
                              <a href="{{ item.url | within: collections.all }}">
                                <img src="{{ item | img_url: 'small' }}" alt="{{ item.title | escape }}">
                              </a>
                            </td>
                            <td>
                              <a href="{{ item.url }}">{{ item.product.title }}</a>
                              <p class="small">{{ item.variant.title }}</p>                              
                              <a href="/cart/change?line={{ forloop.index }}&amp;quantity=0">削除</a>
                            </td>
                            <td>{{ item.price | money }}</td>
                            <td>
                              <input type="number" name="updates[]" id="updates_{{ item.key }}" value="{{ item.quantity }}" min="0">
                            </td>
                            <td>
                              {% if item.original_line_price != item.line_price %}{{ item.original_line_price | money }}{% endif %}
                              {{ item.line_price | money }}
                              {% for discount in item.discounts %}{{ discount.title }}{% endfor %}
                            </td>
                          </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                </div>
              </div>          
            </div>
            <div class="col-12 col-md-4">
              <div class="card shadow">
                <div class="card-body">
                  <p class="h3">合計</p>
                  <p>{{ cart.total_price | money }}</p>
                  <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-primary" name="update">更新</button>
                    <button type="submit" class="btn btn-primary" name="checkout">チェックアウト</button>
                  </div>
                </div>
              </div>
            </div>
        </form>
      </div>
    </div>

{% else %}

    <div class="container">
      <div class="row">
        <h2 class="text-center h2">Cart</h2>
        <p>カートの中身が空です。</p>
      </div>
    </div>

{% endif %}

◆liquidの解説

{% if cart.item_count > 0 %}
　処理A
{% else %}
　処理B
{% endif %}

もしカートの中身が0より大きければ（カートの中身があれば）
処理Aを実行する
カートの中身がなければ
処理Bを実行する

{% for item in cart.items %}
　<tr>
　　<td>
　　<a href="{{ item.url | within: collections.all }}">
　　<img src="{{ item | img_url: 'small' }}" alt="{{ item.title | escape }}">
　　</a>
　　</td>
　　<td>
　　　<a href="{{ item.url }}">{{ item.product.title }}</a>
　　　<p class="small">{{ item.variant.title }}</p>
　　　<a href="/cart/change?line={{ forloop.index }}&quantity=0">削除</a>
　　</td>
　　<td>{{ item.price | money }}</td>
　　<td>
　　　<input type="number" name="updates[]" id="updates_{{ item.key }}" value="{{ item.quantity }}" min="0">
　　</td>
　　<td>
　　　{% if item.original_line_price != item.line_price %}
　　　　{{ item.original_line_price | money }}
　　　{% endif %}
　　　　{{ item.line_price | money }}
　　　
　　　{% for discount in item.discounts %}
　　　　{{ discount.title }}
　　　{% endfor %}
　　</td>
　</tr>
{% endfor %}

{% for item in cart.items %}
　ループ処理
{% endfor %}

カートの中に入っている商品情報を取得する

これより下の内容は for ループ処理の中にあるコードになります
→ カートの中身に入っている商品情報を取得している状態です

<a href="{{ item.url | within: collections.all }}"></a>

item.url　カートの中身に入っている商品のURL

| within: collections.all
カートの中身に入っている商品の詳細ページのURLの中に
コレクションのハンドルを含めるためのフィルター

<img src="{{ item | img_url: 'small' }}" alt="{{ item.title | escape }}">

{{ item | img_url: 'small' }}
カートの中身に入っている商品の小サイズのサムネイルのURLを取得

{{ item.title | escape }}　カートの中身に入っている商品名を取得

※escapeフィルター　
エスケープとは？HTMLタグ <> をそのままブラウザに表示することを
エスケープ処理といいます。
escapeフィルターを使うことで、文字列として<>を表示します。

<a href="{{ item.url }}">{{ item.product.title }}</a>

{{ item.url }}
カートの中身に入っている商品のURL

{{ item.product.title }}
カートの中身に入っている商品名

<p class="small">{{ item.variant.title }}</p>

{{ item.variant.title }}
カートの中身に入っている商品のオプションのタイトルを取得する
オプションのタイトルの例
今回はオプションが「小」サイズなので、
「小」になります。

オプションのタイトルが複数の場合の例
カートの中身に入っている商品のオプションが
サイズ、色だった場合
「S / Black」のようにSサイズの黒色というオプションを
取得することになる

<a href="/cart/change?line={{ forloop.index }}&quantity=0">削除</a>

カートの中身に1つだけ商品が入っている場合に
実際に書き出されたコード
<a href="/cart/change?line=1&quantity=0">削除</a>

カートの中身に2つ商品が入っている場合に
実際に書き出されたコード
<a href="/cart/change?line=1&quantity=0">削除</a>
<a href="/cart/change?line=2&quantity=0">削除</a>

※カートの中身に3つ商品が入っているなら、3、というふうに
　カートの中身の商品数によって、ここの数字が増えていくイメージ

{{ forloop.index }}
カートの中身に入っている商品の番号を1から順にURLに返す
※0からではなく1から始まる

<td>{{ item.price | money }}</td>

item.price　カートの中身に入っている商品の価格

| money の表記
¥100

※「一般設定」の「通貨フォーマット」に基づいて価格を表記

<input type="number" name="updates[]" id="updates_{{ item.key }}" value="{{ item.quantity }}" min="0">

id="updates_{{ item.key }}"
↓
実際に書き出されたコード
id="updates_41917467066538:47b1a99d798136b12fd946f9fef55767"
※ 1つしか存在しないIDのようなもの
　カートの中身に入っている商品のID

value="{{ item.quantity }}"
カートの中身に入っている商品の個数

個数が1つなら　value="1"
個数が2つなら　value="2"

　<td>
　　　{% if item.original_line_price != item.line_price %}
　　　　{{ item.original_line_price | money }}
　　　{% endif %}
　　　{{ item.line_price | money }}
　　　
　　　{% for discount in item.discounts %}
　　　　{{ discount.title }}
　　　{% endfor %}
　</td>

◆割引前と割引後の価格が違う場合は、両方の価格を表示する
　割引前と割引後の価格が同じ場合は、割引後の価格のみ表示する

{% if item.original_line_price != item.line_price %}
　{{ item.original_line_price | money }}
{% endif %}
{{ item.line_price | money }}

----------------------------------------------------
Liquidの説明
----------------------------------------------------
item.original_line_price
カートの中身に入っている商品の割引前の価格

item.line_price
カートの中身に入っている商品の割引後の価格

----------------------------------------------------
日本語化
----------------------------------------------------

もし割引前と割引後の価格が違う場合のみ
　割引前の価格を表示する
↓
Liquidはこうなる
　{{ item.original_line_price | money }}
　{{ item.line_price | money }}

結果：item.original_line_price　割引前の価格と
　　　item.line_price　割引後の価格が表示される

もし割引前と割引後の価格が同じ場合
　何も表示しない
↓
Liquidはこうなる
　{{ item.line_price | money }}
結果：item.line_price 割引後の価格が表示される

◆割引があれば、割引名を表示する

{% for discount in item.discounts %}
　{{ discount.title }}
{% endfor %}

item.discounts　カートの中身に入っている商品の割引情報

割引があれば、for文で繰り返し表示する

for文を使う理由は、割引の種類が1つだけではないためです。
例えば、季節限定のセールや新規登録者限定クーポンなど
複数の割引キャンペーンを同時に行っている場合に対応するためです。

この記事が気に入ったらサポートをしてみませんか？

#08 カートページのLiquidについて

#08　カートページのLiquidについて