【COLOR ME】お気に入りボタンとグローバルメニューのお気に入り商品数の表示を連動させる

＜＜　問題　＞＞
カラーミーショップを使って制作したECサイトの改修で下記を追加したが

• ①商品ごとのお気に入りボタン（商品詳細ページ）
• ②お気に入りアイコン（共通ヘッダー）
• ③お気に入りアイコン右上にお気に入り商品数を表示

ページの再読み込みをしないと③が増減しなかった。

※イメージ

■ 実現したいこと
①のクリックと③の数字を連動させたい。
（お気に入りボタンのクリックで数字を増減させたい）

---

＜＜　原因　＞＞
カラーミーショップの独自タグは正しいお気に入りの商品数を表示しない。

---

＜＜　解決　＞＞
単純に、お気に入りボタンのクリック時に③の数字を取得して+1,-1するようにした。

  $(document).ready(function() {
    $('.favorite-button').click(function() {
      var $button = $(this);
      var favNumberElements = $('.favorite-nmb');
      var favNumber = parseInt(favNumberElements.first().text());

      // アニメーションをリセット
      $favoriteBub.stop(true, true);

      if ($button.hasClass('fav-items')) {
        $button.removeClass('fav-items');
        favNumber--;
      } else {
        $button.addClass('fav-items');
        favNumber++;
      }

      // favNumberが0なら非表示に
      favNumberElements.css('opacity', favNumber === 0 ? '0' : '1');

      // すべての.favorite-nmb 要素に新しい数値を設定
      // レイアウト上PC,SPそれぞれに同要素を設置していてもOK
      favNumberElements.text(favNumber);
    });
  });

---

自分では試していませんが、Cookieからちゃんとした数字を取得して表示する方法もあるみたいです。
その他のカスタマイズについても参考にさせていただきました。
参考）https://naeco.jp/colorme-fav-custom