Wishlist Power on Impact - header icon with count bubble

footer.liquid

(...)

<script>
class WishlistCount extends HTMLElement {

  constructor() {
    super();
    this.#addEventListeners();
  }

  connectedCallback() {
    this.#handleProductChange();
  }

  disconnectedCallback() {
    this.#removeEventListeners();
  }

  #addEventListeners() {
    // Listen for product added event
    document.addEventListener('ooo-wishlist:product-added', this.#handleProductChange.bind(this));
    // Listen for product removed event
    document.addEventListener('ooo-wishlist:product-removed', this.#handleProductChange.bind(this));
  }

  #removeEventListeners() {
    document.removeEventListener('ooo-wishlist:product-added', this.#handleProductChange.bind(this));
    document.removeEventListener('ooo-wishlist:product-removed', this.#handleProductChange.bind(this));
  }

  #handleProductChange(event) {
    window.Maestrooo.wishlist.getContent().then((data) => {
      let productsCount = 0;
      if (data.products){
        productsCount = data.products.length;
      }

      this.querySelector('#ooo-wishlist-bubble').innerHTML = productsCount;

      if(productsCount === 0){
        this.classList.add("opacity-0")
      } else {
        this.classList.remove("opacity-0")
      }
    });
  }
}

function initializeWhenApiReady() {
  if (window.Maestrooo?.wishlist && !window.customElements.get('wishlist-count')) {
    window.customElements.define('wishlist-count', WishlistCount);
  }
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initializeWhenApiReady);
} else {
  initializeWhenApiReady();
}

</script>

{% schema %}
(...)

header.liquid

(...)

<a href="/pages/wishlist" class="tap-area sm:block">
  <span class="sr-only">{{ 'header.general.open_wishlist' | t }}</span>
  {%- render 'icon' with 'heart', class: 'picto__star picto__star--empty' -%}

  <div class="header__cart-count">
    <wishlist-count class="count-bubble opacity-0" aria-hidden="true">
      <div id="ooo-wishlist-bubble">0</div>
    </wishlist-count>
  </div>
</a>

<a href="{{ routes.cart_url }}" data-no-instant class="relative tap-area" {% if settings.cart_type != 'page' and request.page_type != 'cart' %}aria-controls="cart-drawer"{% endif %}>
(...)