📄 ページテンプレート初級
カートページの商品一覧・チェックアウト
ショッピングカートが空のときはフロントページの商品を表示し、アイテムがあるときはカート内容を表形式で表示するカートページテンプレート。数量変更・削除・チェックアウトボタンを備える。
用途
cart.liquid テンプレートとして、カートページにカート内商品の表示・管理機能を実装したいとき。量産テーマではなく、テスト用またはカスタムテーマの基礎に。
設置場所
templates/cart.liquid に配置する。または既存のカートテンプレートを置き換える際の参考に、フォーム ID・JavaScript の remove_item 関数、テーブル構造などを抜き出してカスタマイズする。
注意点
このコードは古い Shopify Online Store 1.0 の形式で、モダンテーマ(Online Store 2.0)では動作保証外。product_img_url フィルタのサイズ値('thumb'など)と asset_url の画像ファイル名(update.png、checkout.png)は実際のテーマ設定に合わせて修正する必要がある。数量入力後の自動送信やバリデーション(最小購入数など)がないため、実運用ではカート検証ロジックを追加する。
コード
59 行 / liquid<h1>Shopping Cart</h1>
{% if cart.item_count == 0 %}
<p><strong>Your shopping basket is empty.</strong> Perhaps a featured item below is of interest...</p>
<table id="gallery">
{% tablerow product in collections.frontpage.products cols: 3 limit: 12 %}
<div class="gallery-image">
<a href="{{ product.url | within: collections.frontpage }}" title="{{ product.title | escape }} — {{ product.description | strip_html | truncate: 50 | escape }}"><img src="{{ product.images.first | product_img_url: 'medium' }}" alt="{{ product.title | escape }}" /></a>
</div>
<div class="gallery-info">
<a href="{{ product.url | within: collections.frontpage }}">{{ product.title | truncate: 30 }}</a><br />
<small>{{ product.price | money }}{% if product.compare_at_price_max > product.price %} <del>{{ product.compare_at_price_max | money }}</del>{% endif %}</small>
</div>
{% endtablerow %}
</table>
{% else %}
<script type="text/javascript">
function remove_item(id) {
document.getElementById('updates_'+id).value = 0;
document.getElementById('cartform').submit();
}
</script>
<form action="/cart" method="post" id="cartform">
<table id="basket">
<tr>
<th>Item Description</th>
<th>Price</th>
<th>Qty</th>
<th>Delete</th>
<th>Total</th>
</tr>{% for item in cart.items %}
<tr class="basket-{% cycle 'odd', 'even' %}">
<td class="basket-column-one">
<div class="basket-images">
<a href="{{ item.product.url }}" title="{{ item.title | escape }} — {{ item.product.description | strip_html | truncate: 50 | escape }}"><img src="{{ item.product.images.first | product_img_url: 'thumb' }}" alt="{{ item.title | escape }}" /></a>
</div>
<div class="basket-desc">
<p><a href="{{ item.product.url }}">{{ item.title }}</a></p>
{{ item.product.description | strip_html | truncate: 120 }}
</div>
</td>
<td class="basket-column">{{ item.price | money }}{% if item.variant.compare_at_price > item.price %}<br /><del>{{ item.variant.compare_at_price | money }}</del>{% endif %}</td>
<td class="basket-column"><input type="text" size="4" name="updates[{{item.variant.id}}]" id="updates_{{ item.variant.id }}" value="{{ item.quantity }}" onfocus="this.select();"/></td>
<td class="basket-column"><a href="#" onclick="remove_item({{ item.variant.id }}); return false;">Remove</a></td>
<td class="basket-column">{{ item.line_price | money }}</td>
</tr>{% endfor %}
</table>
<div id="basket-right">
<h3>Subtotal {{ cart.total_price | money }}</h3>
<input type="image" src="{{ 'update.png' | asset_url }}" id="update-cart" name="update" value="Update" />
<input type="image" src="{{ 'checkout.png' | asset_url }}" name="checkout" value="Checkout" />
{% if additional_checkout_buttons %}
<div class="additional-checkout-buttons">
<p>- or -</p>
{{ content_for_additional_checkout_buttons }}
</div>
{% endif %}
</div>
</form>{% endif %}
出典・ライセンス
- 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 行