Instead of null, send a message for no value statement

[peoplevillage]

@dlerm
Hi,
Thanks for the great application. The wishlist works excellently on the Warehouse vintage theme (Not Shopify 2.0), Symmetry Shopify 2.0 theme, and my own unpublished theme.
I would like to show a message that no item is added to the wishlist such as "You have no wishlist item".

I tried

const emptyStatement = () => {
  const empty_Statement = "You have no wishlist item.";
  const resetWishlist = empty_Statement;
  return setWishlist([empty_Statement]);

  document.getElementById("oasis-wishlist").innerHTML = emptyStatement();
};

const emptyStatement = () => {
  const empty_Statement = ["You have no wishlist item."];
  const resetWishlist = empty_Statement;
  return setWishlist(['empty_Statement']);

  document.getElementById("oasis-wishlist").innerHTML = emptyStatement;
};

and

const emptyStatement = document.getElementById('oasis-wishlist');
if (emptyStatement.childNodes.length === 0) {
  console.log('[Shopify Wishlist] ✅ You have no wishlist item');
};

but they don't work.

Please let me know how to show No result message.

I had to change a couple of things to let the wishlist work.

1. Had to remove fill="red" in the heart.svg file to let the heart button work.
2. Needed to change the productCard from productCard: '.product-card' to productCard: '.card' in wishlist.js (You may add a note in your README.md).
3. The image is not included in the product-card for many Shopify themes. To display the wishlist with images, I added a div with a class (wishlist-image-wrap) and added the code in theme.liquid file.

 {% style %}
    {%- if template == 'page.wishlist' or page.url == '/pages/wishlist' -%}
      .wishlist-image-wrap {
        display: block;
        margin-bottom: 24px;
      }
      {% else %}
      .wishlist-image-wrap {
        display: none;
      }
    {%- endif -%}
    {% endstyle %}

and added the wishlist-image-wrap div inside the card class.

 <div class="wishlist-image-wrap">
      <a href="{{ product.url }}">
        <img class="wishlist-image lazyload image--fade-in" src="{{ product.featured_image | img_url: '200x' }}" alt="{{ product.featured_image.alt | escape }}">
      </a>
    </div>

I think the only thing you need to fix is remove fill="red" in the heart.svg file.
It works great with an easy-to-modify style (look & feel) for any Shopify theme.
Thank you for the awesome work!

[dlerm]

@peoplevillage I think the easiest way to show an "empty" wishlist message would be by editing the setupGrid function inside of Wishlist.js, like this:

const setupGrid = async (grid) => {
  const wishlist = getWishlist();

 
  if (!wishlist.length) {
    // Wishlist is empty, show message
    grid.innerHTML =  'You have no wishlist items.';
  } else {
    // Show wishlist items
    const requests = wishlist.map(fetchProductCardHTML);
    const responses = await Promise.all(requests);
    const wishlistProductCards = responses.join('');
    grid.innerHTML = wishlistProductCards;
  }
    
  grid.classList.add(GRID_LOADED_CLASS);
  initButtons();

  const event = new CustomEvent('shopify-wishlist:init-product-grid', {
    detail: { wishlist: wishlist }
  });
  document.dispatchEvent(event);
};