(...)

<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 %}
(...)