カート内の商品数を表示する
カート内の商品数を表示する
フリーパーツの表示内容、フリーページの本文にて利用できる置換文字（class指定）を利用すると、ショッピングカートへのナビゲーションボタンなどに、カート内の商品数を表示できます。
「通常カート」、「定期・頒布会カート」それぞれに表示できます。
＜サンプルイメージ＞
本サンプルは表示デザインのCSSを別途記述しています。（スタートアップテーマでの例）
ナビゲーション上などに、「通常カート」と「定期・頒布会カート」へのリンクを分けて表示する方法は、「ショッピングカート」と「ショッピングカート（定期）」のナビゲーションについてをご覧ください。
表示される数字はショッピングカートの「数量」と同じです。
同じ商品を2個購入すると2に、同じ商品の違うバリエーションを購入してもそれぞれカウントされます。（赤を1個、青を1個で2となります。）
数字の桁区切り（カンマ）は入りません。（1000と出力されます。）
カート内の商品数はHTML出力時点では出力されておらず、ブラウザ上で置換されます。
よってJavaScriptプログラムへの利用された場合、正しく動作しない場合がございます。
＜注意事項＞
カート内の商品数置換文字はコマースクリエイター自動生成ページのみで動作します。 以下の場合は動作いたしません。
- コマースクリエイター＞ページ一覧にあるページ
- コマースクリエイター＞フリーページ一覧に保存した静的ページ
- コマースクリエイター＞アイテム一覧に保存した静的ページ
- その他、別の仕組みで表示されたページ
「通常カート」の場合
カート内の商品数を表示したいHTMLタグに「fs-client-cart-count」というclassを記述してください。
「fs-client-cart-count」というclassを記述されたHTMLタグにショッピングカートの「数量」の数字を出力します。
（例）
<div class="fs-client-cart-count"></div>
↓
<div class="fs-client-cart-count">1</div>
タグの内容はすべてショッピングカートの「数量」の数字に書き換わります。
見出しなどを記載している場合、削除されますのでご注意ください。
（成功例）
<div>カート内の商品数：<span class="fs-client-cart-count"></span></div>
↓
<div>カート内の商品数：<span class="fs-client-cart-count">1</span></div>
（ショッピングカートへのリンク例）
<div>カート内の商品数：<a href="/p/cart" class="fs-client-cart-count"></a></div>
↓
<div>カート内の商品数：<a href="/p/cart" class="fs-client-cart-count">1</a></div>
（失敗例）
<div class="fs-client-cart-count">カート内の商品数：</div>
↓
<div class="fs-client-cart-count">1</div>
「定期・頒布会カート」の場合
カート内の商品数を表示したいHTMLタグに「fs-client-subscriptionCart-count」というclassを記述してください。
「fs-client-subscriptionCart-count」というclassを記述されたHTMLタグにショッピングカートの「数量」の数字を出力します。
（例）
<div class="fs-client-subscriptionCart-count"></div>
↓
<div class="fs-client-subscriptionCart-count">1</div>
タグの内容はすべてショッピングカートの「数量」の数字に書き換わります。見出しなどを記載している場合、削除されますのでご注意ください。
（成功例）
<div>カート内の商品数：<span class="fs-client-subscriptionCart-count"></span></div>
↓
<div>カート内の商品数：<span class="fs-client-subscriptionCart-count">1</span></div>
（ショッピングカートへのリンク例）
<div>カート内の商品数：<a href="/p/cart" class="fs-client-subscriptionCart-count"></a></div>
↓
<div>カート内の商品数：<a href="/p/cart" class="fs-client-subscriptionCart-count">1</a></div>
（失敗例）
<div class="fs-client-subscriptionCart-count">カート内の商品数：</div>
↓
<div class="fs-client-subscriptionCart-count">1</div>
設定手順
例えば、ヘッダーナビゲーションにある［カート］というナビゲーションボタンに商品数を表示するとします。
- コマースクリエイター＞パーツ＞ヘッダーナビゲーションを開きます。
- スタートアップテーマを利用している場合は、以下のhtml部分に前述した置換文字（class指定）
fs-client-cart-countを追記します。
<li class="fs-p-headerNavigation__listItem">
<a href="/p/cart?type=purchase" class="fs-p-headerNavigation__viewCartButton fs-p-headerNavigation__link">
<i class="fs-icon--cart"></i>
<span class="fs-p-headerNavigation__viewCartButton__label">カート</span>
<span class="fs-p-cartItemNumber fs-client-cart-count fs-clientInfo"></span>
↑ここに記述しています↑
</a>
</li>
※スタートアップテーマではあらかじめデザイン用のCSS等が当たっておりますので、カスタマイズされている場合は、適宜記述場所をご確認ください。