📄 ページテンプレート初級
カートページの商品一覧と数量更新
ショッピングカート内の商品を一覧表示し、数量入力欄と削除ボタンで直接管理するカートページテンプレート。小計とチェックアウトボタンも含む。
用途
Shopify のカートページ(/cart)で、顧客が商品の数量を変更したり削除したりできる従来型のカートUIを実装するとき。
設置場所
templates/cart.liquid に配置し、theme.liquid から自動的に読み込まれる。フォーム送信時は /cart への POST でバックエンド処理が実行される。
注意点
アセット画像(continue_shopping_icon.gif、cancel_icon.gif、update_icon.gif、checkout_icon.gif)が theme の assets フォルダに存在する前提。quantity 入力時に数値バリデーションがないため、負数やテキスト入力があるとエラーになる可能性があるので、JavaScript で事前チェックを追加するとよい。cart.item_count が 0 でも除外される商品がある場合(廃止商品など)は、cart.items ループで追加フィルタを加える。
コード
55 行 / liquid<script type="text/javascript">
function remove_item(id) {
document.getElementById('updates_'+id).value = 0;
document.getElementById('cart').submit();
}
</script>
<div id="cart-page">
{% if cart.item_count == 0 %}
<p>Your shopping cart is empty...</p>
<p><a href="/"><img src="{{ 'continue_shopping_icon.gif' | asset_url }}" alt="Continue shopping"/></a><p>
{% else %}
<form action="/cart" method="post" id="cart">
<table class="cart">
<tr>
<th colspan="2">Product</th>
<th class="short">Qty</th>
<th>Price</th>
<th>Total</th>
<th class="short">Remove</th>
</tr>
{% for item in cart.items %}
<tr class="{% cycle 'odd', 'even' %}">
<td class="short">{{ item.product.featured_image | product_img_url: 'thumb' | img_tag }}</td>
<td><a href="{{item.product.url}}">{{ item.title }}</a></td>
<td class="short"><input type="text" class="quantity" name="updates[{{item.variant.id}}]" id="updates_{{item.variant.id}}" value="{{item.quantity}}" onfocus="this.select();"/></td>
<td class="cart-price">{{ item.price | money }}</td>
<td class="cart-price">{{item.line_price | money }}</td>
<td class="short"><a href="#" onclick="remove_item({{item.variant.id}}); return false;" class="remove"><img src="{{ 'cancel_icon.gif' | asset_url }}" alt="Remove" /></a></td>
</tr>
{% endfor %}
</table>
<p class="updatebtn"><input type="image" value="Update Cart" name="update" src="{{ 'update_icon.gif' | asset_url }}" alt="Update" /></p>
<p class="subtotal">
<strong>Subtotal:</strong> {{cart.total_price | money_with_currency }}
</p>
<p class="checkout"><input type="image" src="{{ 'checkout_icon.gif' | asset_url }}" alt="Proceed to Checkout" value="Proceed to Checkout" name="checkout" /></p>
{% if additional_checkout_buttons %}
<div class="additional-checkout-buttons">
<p>- or -</p>
{{ content_for_additional_checkout_buttons }}
</div>
{% endif %}
</form>
{% endif %}
</div>
出典・ライセンス
- Repository:
- https://github.com/Shopify/liquid
- License:
- MIT
このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。
関連項目
📄 ページテンプレート初級
ページテンプレート
Shopify の汎用ページテンプレート。ページのタイトルと本文コンテンツを Shopify 管理画面から取得して表示する基本的な構造。
📁 liquid·MIT·5 行
📄 ページテンプレート初級
リダイレクト
ヘッドレステーマで Shopify ストアフロントへのリダイレクト機能を提供するセクション。管理画面に「リダイレクト」という名称で登場し、ページから別 URL への誘導を実装する基盤となる。
📁 shopify-headless-theme·MIT·7 行
📄 ページテンプレート初級
トップページの基本テンプレート
Shopify Liquid の最小限のテンプレート例。HTML に日付変数を埋め込み、商品ページへのリンクを配置する基本構造を示す。
📁 liquid·MIT·7 行
📄 ページテンプレート初級
固定ページのテンプレート
Shopify 管理画面で作成した固定ページ(利用規約、プライバシーポリシーなど)を表示するテンプレート。ページタイトルと本文コンテンツを描画する。
📁 mcliquid-theme·MIT·8 行
📄 ページテンプレート初級
ページの基本テンプレート
固定ページ(About など)の基本レイアウト。ページタイトルとコンテンツを HTML の article 要素でマークアップし、管理画面で編集したテキストを表示する。
📁 liquid·MIT·9 行
📄 ページテンプレート初級
固定ページのテンプレート
固定ページ(ポリシー、会社概要、利用規約など)の基本レイアウト。ページタイトルと本文を中央揃えで表示する。
📁 ks-bootshop·MIT·10 行