【コマースクリエイターHTML・CSS調整】カートに入れた商品数をヘッダー部分カートボタンに表示させる方法を紹介

【コマースクリエイターHTML・CSS調整】カートに入れた商品数をヘッダー部分カートボタンに表示させる方法を紹介

コマースクリエイターではカートに入れた商品数をヘッダー等にある「カートを見る」といったボタンに表示させることができます。

お買い物中のユーザーもカートに商品が入っているかを認識しやすくなります。今回はその表示方法をご紹介していきます。

カート内の商品数表示とは

冒頭でも触れましたが、ユーザーがカート内に入れた商品数を「カートを見る」といったボタンに表示させる機能のことです。

例えば商品が三つカートに入っている状態であれば、「3」と表示されます。つまりカートに入っている商品の合計数量が表示されるという仕組みです。

表示するメリット

ご利用のお客様に対してはカートに商品が入っていることが常に確認していただけます。

運営側としては、商品をカートに入れたまま忘れて放置されてしまうのを防ぐ効果も見込めるでしょう。

表示方法

実はこの機能コマースクリエイターのスタートアップテーマに付属しているヘッダー内のカートボタンには最初から実装されているので、その部分のclass指定を利用すれば簡単に実装が可能です。

必要な記述

下記のソースを「カートを見る」ボタンの要素に加えるだけです。

[code language=”html”]
<span class="fs-p-cartItemNumber fs-client-cart-count fs-clientInfo is-ready fs-client-cart-count–0">0</span>
[/code]

※「カートを見る」ボタンは画像の場合が多いと思いますので、＜img＞部分の後に追記するのが簡単です。

※コマースクリエイターのデフォルトのcssが効いているのでこのままでも使えます。

※サイズや位置などはお好みでCSSを調整してください。

実際の記述例を紹介

弊社運営サイト水切りピッタリさんの「カートを見る」ボタンのHTML例です。
参考にどうぞ。

[code language=”html”]
<li class="cart">
<a href="https://www.mizukiri.jp/p/cart">
<img src="{% items[/cart.png] %}" alt="カートを見る">
<span class="fs-p-cartItemNumber fs-client-cart-count fs-clientInfo is-ready fs-client-cart-count–0">0</span>
</a>
</li>
[/code]

※上記のような記述の場合は＜li＞か＜a＞の要素にposition:relative;を効かせるのがおすすめです。

※コマースクリエイター用のCSSが効いているのでスケルトンテーマで構築したサイトでも動作します。

補足

数量の表示動作だけさせたい場合は下記のclassを表示したいHTMLに記述してください。

[code language=”html”]
class="fs-client-cart-count"
[/code]

※数量の表示だけでますが、見た目や表示する位置は調整が必要です。

以上で実装完了

これでカート内の商品数表示を簡単に実装ができるはずです。コマースクリエイターご利用店舗様はぜひお試しください。

コマースクリエイターでの構築は・・

コマースクリエイターでの構築作業、移行作業はフューチャーショップ専門のかねひらイーシーパートナーズまで、お気軽にご相談ください。