wishlist-custom

<div class="wishlist-wrapper">
  <h2>YOUR WISHLIST</h2>

  <button onclick="clearWishlist()" class="clear-btn">Clear wishlist</button>

  <div id="wishlist-container"></div>

  <div class="wishlist-actions">
    <button onclick="addAllToCart()">Add all items to cart</button>
    <a href="/cart">View cart</a>
  </div>
</div>

<style>
.wishlist-wrapper { max-width: 1000px; margin: auto; }
.wishlist-item { display: flex; gap: 20px; margin: 20px 0; border-bottom: 1px solid #ddd; padding-bottom: 20px; }
.wishlist-item img { width: 120px; }
.clear-btn { float: right; background: brown; color: white; padding: 8px 14px; border-radius: 20px; }
.wishlist-actions { text-align: center; margin-top: 30px; }
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  loadWishlist();
});

function loadWishlist() {
  let wishlist = JSON.parse(localStorage.getItem("wishlist")) || [];
  
  // ❗ सबसे important fix
  wishlist = wishlist.filter(item => item && item !== "null");

  let container = document.getElementById("wishlist-container");
  container.innerHTML = "";

  console.log("CLEAN WISHLIST:", wishlist);

  if (wishlist.length === 0) {
    container.innerHTML = "<p>No items in wishlist</p>";
    return;
  }

  wishlist.forEach(handle => {

   fetch("/products/" + handle + ".js")
      .then(res => res.json())
      .then(product => {

        let div = document.createElement("div");

        div.innerHTML = `
          <div style="margin:20px 0; border-bottom:1px solid #ddd;">
            <a href="/products/${product.handle}">
              <img src="${product.images[0]}" width="120">
              <p>${product.title}</p>
              <p>₹${product.price / 100}</p>
            </a>
          </div>
        `;

        container.appendChild(div);
      });
  });
}
</script>