#08 カートページの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 }}&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 %}
この記事が気に入ったらサポートをしてみませんか?