Bubble icon on wishlist

[ArminasZi]

Hi. First of all thank you very much for posting this feature!

I wanted to ask is it possible to add bubble icon (like cart bubble icon), which shows the total number of items in the wishlist? Same as it shows the total number of items in cart when they are there.

Thanks a lot!

[dlerm]

@ArminasZi a bubble with wishlist item count can easily be added to the existing script.

Example:

1. Add the follow code to you theme where you want the bubble to be displayed
   • <div wishlist-item-count class="your-bubble-classes-goe-here>"></div>
   • Add any extra classes and connect it to you CSS to style the bubble whoever you want
2. In the Wishlist.js file, add/update the following lines of code:

• Line 6:

const selectors = {
  button: '[button-wishlist]',
  grid: '[grid-wishlist]',
  productCard: '.product-card',
  itemCount: '[wishlist-item-count]', // new selector for the item count element defined above
};

• Add a new function: initCount()

const initCount = () => {
  const itemCount = document.querySelector(selectors.itemCount) || false;
  if (itemCount) setupCount(itemCount);
};

• Add a new function: setupCount()

const setupCount = (itemCount) => {
   const wishlist = getWishlist();
  itemCount.innerText = wishlist.length;
};

• Line 12:

document.addEventListener('DOMContentLoaded', () => {
  initButtons();
  initGrid();
  initCount(); // NEW - trigger count to populate on page load
});

• Line 17:

document.addEventListener('shopify-wishlist:updated', (event) => {
  console.log('[Shopify Wishlist] Wishlist Updated ✅', event.detail.wishlist);
  initGrid();
  initCount(); // NEW - trigger count to update anytime the wishlist os updated
});