はじめに

こんにちは！
BASEのカートチームでバックエンドエンジニアをしている、かがの（@ykagano）です！

みなさん、ECカートでよく見るこのバッジをご存知ですか？（右上の赤丸部分です）

official-theme-cart-badge

これはカートに商品がいくつ入っているかを示すカートバッジです。
このカートバッジはPay IDアプリではすでに表示されていますが、これまでBASEのWebショップには表示されていませんでした。

今回はこのカートバッジをWebのショップにリリースしましたので、そのお話をしたいと思います。

カートバッジの実装方法

カートバッジは以前、Webのショップでも一時期表示されていました。
しかし、表示の都度、DBへの負荷を高めてしまうという課題が当時あり、過去に取り下げられた経緯があります。

当時の課題

BASEのショップ画面と、カート画面は別のアプリケーションになっており、当時はこのショップ画面とカート画面のドメインが異なっているという課題がまずありました。

そのため、ショップ画面に表示されるカートバッジは、ドメインの異なるカートアプリケーションにアクセスして商品数を表示する必要がありました。
ショップ画面にiframeを表示して、表示されたiframeからカートドメインにアクセスすることでカート内の商品数を表示するという実装でした。

しかしその実装では、ユーザーがショップにアクセスする度、iframeからカートのバックエンドにリクエストが発生する状態でした。
表示の都度発生するDBアクセスにより負荷を高めてしまうため、カートバッジは取り下げられることになりました。

当時のカートバッジの表示フロー

現在では、ショップとカートのドメインが一致するようになったため、iframeで実装する必要がなくなりました。
そのため、今回は Local Storage を使用してブラウザにカートの商品数を記録することにしました。

カート画面での各種イベント発生時に、Local Storageの商品数を更新し、ショップ画面に商品数を反映したカートバッジを表示するものとなります。
これならバックエンドに負荷はかかりません。

今回のカートバッジの表示フロー

sequenceDiagram
    actor user as 購入者のブラウザ
    participant front as ショップ
    participant cart as カート
    
    user ->> front: Webショップにアクセス
    front -->> user: ショップ画面を表示
    user ->> cart: ショップ画面で商品を追加（カート画面に移動）
    cart -->> user: Local Storageの商品数を更新
    user ->> cart: 商品数量を変更
    cart -->> user: Local Storageの商品数を更新
    user ->> front: ショップに戻る
    front -->> user: ショップ画面を表示
    user ->> user: 商品数をブラウザのLocal Storageから取得
    user ->> user: カートバッジに商品数を表示

各デザインテーマにリリース

BASEではショップオーナーがショップのデザインを簡単にカスタマイズできるテンプレートをデザインテーマとして用意しています。
コードを書かなくてもショップの見た目を整えられる無料・有料のデザインテーマには、大きく分けて以下の3種類があります。

オフィシャルテーマ：BASEの提供する無料テーマ
デザイナーズテーマ：提携クリエイターによって作成された有料テーマ
カスタムテーマ：『HTML編集App』によってショップが自由にカスタマイズした無料テーマ

今回この全てのデザインテーマにカートバッジを表示できるようにリリースしました。

テーマの違いについての詳細は以下のサイトをご参照ください。

baseu.jp

それぞれ以下の日程にカートバッジをリリースしています。

既存のカスタムテーマと有料のデザイナーズテーマにカートバッジを表示する場合は、それぞれショップオーナー様、テーマ作者様での追加対応が必要となります。

対象	リリース日	備考
無料のオフィシャルテーマ	2024/10/25	カートバッジが自動反映されて表示されます
無料のカスタムテーマ（『HTML編集App』で編集したテーマ）	2025/2/5	新規作成時はカートバッジが追加されています既存の作成済みカスタムテーマは作者のショップオーナー様によるHTML編集が必要です
有料のデザイナーズテーマ	2025/2/5	テーマ作者様での追加対応が必要です

既存のカスタムテーマやデザイナーズテーマはなぜ対応が必要なのか

カスタムテーマとデザイナーズテーマのデザイン自体はBASEで管理されていませんが、BASE側で共通のタグに対してコードを埋め込むことは可能です。

当初はカスタムテーマ、デザイナーズテーマにも、オフィシャルテーマと同様に汎用的なカートバッジを表示する想定で開発を進めていました。

こちらのページにBASEのDevelopersページでのTemplate仕様が記載されています。

<body>仕様 · Developers

上記ページに記載の通り、既存のBASEメニューのタグがすでに埋め込まれています。

{BASEMenuTag}

今回もこちらを修正してカートバッジのHTML要素を埋め込んでいます。

BASEメニュータグは下記のように出力されます（カートバッジは非表示状態です）。

<div id="baseMenu">
  <ul class="clearfix">
    <li class="base">
      <a target="_blank" href="https://thebase.in?from=ショップID&amp;p=shop">
        <img src="/img/shop/base.png" alt="ネットショップを開設するならBASE" title="BASE" height="30">
      </a>
    </li>
    <li class="cart">
      <a href="https://c.thebase.in/order/cart/ショップID">
        <img src="/img/shop/cart.png" alt="shopping cart" height="30">
        <div class="cart-badge" style="display: none;">
          <div class="cart-qty" style="display: none;"></div>
        </div>
      </a>
    </li>
  </ul>
</div>

汎用的なカートバッジを表示するために、約100件あるデザイナーズテーマの全てでテストを行う予定でしたが、結果としてテストは実施途中で打ち切りました。

カスタムテーマ、デザイナーズテーマはそれぞれショップの雰囲気に合わせて細かくカスタマイズされたテーマになります。
そこに汎用のカートバッジを一律で表示するのは難しいと判断したためです。

そのため、アプローチ方法を変えて、既存のカスタムテーマやデザイナーズテーマにはテーマ作者様に組み込んでいただく方法を取りました。

具体的には下記CSSを組み込んでいただく形となります。位置やサイズ等は個別にカスタマイズください。

.cart {
  position: relative;
}
.cart-badge {
  display: block!important;
}
.cart-qty {
  position: absolute;
  top: 4px;
  right: 5px;
  padding: 0 1px;
  min-width: 14px;
  background: #fa5171;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

カートバッジの組み込み方法の詳細はこちらのページをご参照ください。

<body>仕様 · Developers

デザイナーズテーマはカートバッジの表示にどれぐらい対応しているのか

デザイナーズテーマはテーマ作者様の修正後にBASEへの申請を行っていただき、BASEで審査を行います。

今回、カートバッジについては私の方で審査を行わせていただきました。

結果、2/5のリリースから2週間で約22%のデザイナーズテーマがカートバッジを表示してくれるようになりました！

リリース後にお知らせを通知したのが、2/12のため、実際にはお知らせから1週間でテーマ申請されたものがほとんどになります。

リリース後にお知らせをすると、一部のテーマ作者様はすぐに対応して申請いただけることが分かりました。

テーマの作者様はどのような実装がされていたのかですが、まず上記CSSの通り実装すると下記のカートバッジが表示されます。

カスタムテーマの新規作成時に表示されるカートバッジ

custom-theme-cart-badge

デザイナーズテーマの作者様は各々のデザインに合わせて色やサイズや位置を細かく調整されていました。

以下にその例として、テーマごとのカートバッジを3つご紹介します。

Euforia（ユーフォリア）	OULU	Retail Pro

Dolce Vivace 様にて作成	GRAYEL Inc. 様にて作成	ymtk 様にて作成
テーマの詳細を見る	テーマの詳細を見る	テーマの詳細を見る