Liquid Snippets by ALSEL
🛒 カート/チェックアウト初級

カートページの商品一覧

ショッピングカートの内容を一覧表示し、各商品の数量変更と削除機能を提供するテンプレート。カート内の商品数が0の場合は空カート表示、それ以外は商品ごとに画像・タイトル・価格・数量入力欄を出す。

用途
Shopify の cart.liquid テンプレートで、ユーザーがカートの中身を確認・編集したり、チェックアウトに進んだりするときに使用。
設置場所
templates/cart.liquid に配置するテンプレート。フォーム送信先は `/cart` に固定され、数量更新と削除操作は JavaScript と POST で処理される。
注意点
このコードは Shopify 初期テンプレートで、現在の Online Store 2.0 にはベストプラクティスが異なる。`product_img_url` フィルターは廃止されているため、`image_url` フィルターに置き換える必要がある。JavaScript の `remove_item()` 関数で数量を0にしてフォーム送信する仕様だが、ブラウザの confirm 確認が無いため誤削除を防ぐため `onclick` に `if (confirm('削除しますか?'))` を追加すると安全。また `onfocus` 属性は HTML5 では非推奨なので、CSS または modern JavaScript のイベントリスナーで置き換えるのが望ましい。
タグ:cartproductquantityformlegacy

コード

67 行 / liquid
<script type="text/javascript">
  function remove_item(id) {
      document.getElementById('updates_'+id).value = 0;
      document.getElementById('cartform').submit();
  }
</script>

<div>

  {% if cart.item_count == 0 %}
    <h4>Your shopping cart is looking rather empty...</h4>
  {% else %}
  <form action="/cart" method="post" id="cartform">

  <div id="cart">

  <h3>You have {{ cart.item_count }} {{ cart.item_count | pluralize: 'product', 'products' }} in here!</h3>

    <ul id="line-items">
      {% for item in cart.items %}
      <li id="item-{{item.id}}" class="clearfix">
        <div class="thumb">
          <div class="prodimage">
          <a href="{{item.product.url}}" title="View {{item.title}} Page"><img src="{{item.product.featured_image | product_img_url: 'thumb' }}" alt="{{item.title | escape }}" /></a>
        </div></div>
        <h3 style="padding-right: 150px">
      <a href="{{item.product.url}}" title="View {{item.title | escape }} Page">
        {{ item.title }}
        {% if item.variant.available == true %}
           ({{item.variant.title}})
        {% endif %}
      </a>
    </h3>
        <small class="itemcost">Costs {{ item.price | money }} each, <span class="money">{{item.line_price | money }}</span> total.</small>
        <p class="right">
          <label for="updates">How many? </label>
          <input type="text" size="4" name="updates[{{item.variant.id}}]" id="updates_{{item.variant.id}}" value="{{item.quantity}}" onfocus="this.select();"/><br />
          <a href="#" onclick="remove_item({{item.variant.id}}); return false;" class="remove"><img style="padding:15px 0 0 0;margin:0;" src="{{ 'delete.gif' | asset_url }}" /></a>
        </p>
      </li>
      {% endfor %}
      <li id="total">
        <input type="image" id="update-cart" name="update" value="Update My Cart" src="{{ 'update.gif' | asset_url }}" />
        Subtotal:
        <span class="money">{{ cart.total_price | money_with_currency }}</span>
      </li>
    </ul>

  </div>

    <div class="info">
    <input type="image" value="Checkout!" name="checkout" src="{{ 'checkout.gif' | asset_url }}" />
    </div>

    {% 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 の Bundled Section Rendering に対応したカートドロワーセクション。カート更新時に動的にフェッチされ、AJAX で自動的に再レンダリングされる。

📁 ks-bootshop·MIT·6
🛒 カート/チェックアウト中級

カート件数バッジ

カート内の商品件数を表示するバッジを、Shopify の Bundled section rendering 機能で動的に更新する。カート更新時に AJAX で再レンダリングされ、常に最新の件数を表示。

📁 ks-bootshop·MIT·6
🛒 カート/チェックアウト中級

カートドロワー

ページ右側からスライドインするオフキャンバスカートドロワー。商品一覧、メモ機能、フッター情報を1つのコンテナで管理し、アップセル機能にも対応する。

📁 ks-bootshop·MIT·32
🛒 カート/チェックアウト初級

カート注文備考欄

カートページに注文時の備考を記入できるテキストエリアを開閉形式で表示する。テーマ設定で有効化するとカート内容がある場合のみ表示され、JavaScript で自動保存機能に対応する。

📁 ks-bootshop·MIT·37
🛒 カート/チェックアウト初級

カートフッターの割引・小計・チェックアウト

カートドロワーの下部に割引適用状況、小計、チェックアウトボタンを表示するスニペット。適用割引があれば金額と共に一覧表示し、セール価格と定価の二重表示にも対応する。

📁 ks-bootshop·MIT·45
🛒 カート/チェックアウト中級

カート内の商品一覧

カートに入っている商品を行ごとに表示し、数量変更・削除・割引情報の表示に対応するスニペット。カートが空のときは空カートメッセージを表示する。

📁 ks-bootshop·MIT·118