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

カートページのテンプレート

Shopify のカートページテンプレート。商品一覧の表示、数量変更、削除機能、チェックアウトボタン、およびおすすめ商品の表示に対応する。

用途
ストアのカートページとして使用。ユーザーが選択した商品を確認・編集し、チェックアウト画面へ遷移させる。
設置場所
templates/cart.liquid に配置する。または cart セクションのテンプレートとして使用し、layouts/theme.liquid から `{% section 'cart' %}` で呼び出す。
注意点
このテンプレートは古い Liquid 構文(`{% cycle %}` タグ、インラインの `onfocus` イベント)を使用しており、モダンなオンラインストア 2.0 では `cart-drawer` セクションに置き換わっている。数量入力欄の値が数値型でない場合、計算が正しく動作しないため、前後に型変換フィルタを挿入する。`collections.frontpage` はデフォルトコレクションであり、存在しない場合は商品が表示されないので、テーマ設定またはメタオブジェクトで推奨商品源を切り替える。
タグ:cartformquantitymoney-filterlegacy-template

コード

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

  <div id="page" class="innerpage clearfix">.
    {% if cart.item_count == 0 %}
         <h1>Your cart is currently empty.</h1>
      {% else %}

    <h1>Your Cart <span>({{ cart.item_count }} {{ cart.item_count | pluralize: 'item', 'items' }}, {{cart.total_price | money_with_currency }} total)</span></h1>

    <form action="/cart" method="post" id="cart-form">

    <div id="cart-wrap">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th scope="col" class="td-image"><label>Image</label></th>
          <th scope="col" class="td-title"><label>Product Title</label></th>
          <th scope="col" class="td-count"><label>Count</label></th>
          <th scope="col" class="td-price"><label>Cost</label></th>
          <th scope="col" class="td-delete"><label>Remove</label></th>
        </tr>

        {% for item in cart.items %}
        <tr class="{% cycle 'reg', 'alt' %}">
          <td colspan="5">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td class="td-image"><a href="{{item.product.url}}">{{ item.product.featured_image |  product_img_url: 'thumb' | img_tag }}</a></td>
                <td class="td-title"><p>{{ item.title }}</p></td>
                <td class="td-count"><label>Count:</label> <input type="text" class="quantity item-count" name="updates[{{item.variant.id}}]" id="updates_{{item.variant.id}}" value="{{item.quantity}}" onfocus="this.select();"/></td>
                <td class="td-price">{{item.line_price | money }}</td>
                <td class="td-delete"><a href="#" onclick="remove_item({{item.variant.id}}); return false;">Remove</a></td>
              </tr>
            </table>
          </td>
        </tr>
        {% endfor %}
      </table>

      <div id="finish-up">

        <div class="latest-news-box">
          {{ pages.shopping-cart.content }}
        </div>

        <p class="order-total">
          <span><strong>Order Total:</strong> {{cart.total_price | money_with_currency }}</span>
        </p>

        <p class="update-cart"><input type="submit" value="Refresh Cart" name="update" /></p>

          <p class="go-checkout"><input type="submit" 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 %}

      </div>

    </div>

    </form>

    {% endif %}



    <h1 class="other-products"><span>Other Products You Might Enjoy</span></h1>
    <ul class="item-list clearfix">

      {% for product in collections.frontpage.products limit:2 %}
      <li>
        <form action="/cart/add" method="post">
        <div class="item-list-item">
          <div class="ili-top clearfix">
            <div class="ili-top-content">
              <h2><a href="{{product.url}}">{{product.title}}</a></h2>
              <p>{{ product.description | truncatewords: 15 }}</p>
            </div>
            <a href="{{product.url}}" class="ili-top-image"><img src="{{ product.featured_image | product_img_url: 'small' }}" alt="{{ product.title | escape }}"/></a>
          </div>

          <div class="ili-bottom clearfix">
            <p class="hiddenvariants" style="display: none">{% for variant in product.variants %}<span><input type="radio" name="id" value="{{variant.id}}" id="radio_{{variant.id}}" style="vertical-align: middle;" {%if forloop.first%} checked="checked" {%endif%} /><label for="radio_{{variant.id}}">{{ variant.price | money_with_currency }} - {{ variant.title }}</label></span>{% endfor %}</p>
            <input type="submit" class="" value="Add to Basket" />
            <p>
              <a href="{{product.url}}">View Details</a>

              <span>
                {% if product.compare_at_price %}
                  {% if product.price_min != product.compare_at_price %}
                    {{product.compare_at_price | money}} -
                    {% endif %}
                {% endif %}
                <strong>
                  {{product.price_min | money}}
                </strong>
              </span>
            </p>
          </div>
        </div>
        </form>
      </li>
      {% endfor %}

    </ul>

    <div id="three-reasons" class="clearfix">
      <h3>Why Shop With Us?</h3>
      <ul>
        <li class="two-a">
          <h4>24 Hours</h4>
          <p>We're always here to help.</p>
        </li>
        <li class="two-c">
          <h4>No Spam</h4>
          <p>We'll never share your info.</p>
        </li>
        <li class="two-d">
          <h4>Secure Servers</h4>
          <p>Checkout is 256bit encrypted.</p>
        </li>
      </ul>
    </div>

  </div>
  <!-- end page -->

出典・ライセンス

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
🛒 カート/チェックアウト初級

カートページの商品一覧

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

📁 liquid·MIT·67