Liquid Snippets by ALSEL
📄 ページテンプレート初級

カートページの商品一覧と数量更新

ショッピングカート内の商品を一覧表示し、数量入力欄と削除ボタンで直接管理するカートページテンプレート。小計とチェックアウトボタンも含む。

用途
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 ループで追加フィルタを加える。
タグ:cartquantityform-submissionproduct-listcheckout

コード

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>

出典・ライセンス

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