I have downloaded and installed Wishlist for Shopify and it works very good. However, it shows just a blank page when there is no list item. I would let it display no result message such as "You have no wishlist item".
The script I’m using is as below.
const LOCAL_STORAGE_WISHLIST_KEY = 'shopify-wishlist';
const LOCAL_STORAGE_DELIMITER = ',';
const BUTTON_ACTIVE_CLASS = 'active';
const GRID_LOADED_CLASS = 'loaded';
const selectors = {
button: '[button-wishlist]',
grid: '[grid-wishlist]',
productCard: '.card',
};
document.addEventListener('DOMContentLoaded', () => {
initButtons();
initGrid();
});
document.addEventListener('shopify-wishlist:updated', (event) => {
console.log('[Shopify Wishlist] Wishlist Updated ✅', event.detail.wishlist);
initGrid();
});
document.addEventListener('shopify-wishlist:init-product-grid', (event) => {
console.log('[Shopify Wishlist] Wishlist Product List Loaded ✅', event.detail.wishlist);
});
document.addEventListener('shopify-wishlist:init-buttons', (event) => {
console.log('[Shopify Wishlist] Wishlist Buttons Loaded ✅', event.detail.wishlist);
});
const fetchProductCardHTML = (handle) => {
const productTileTemplateUrl = `/products/${handle}?view=card`;
return fetch(productTileTemplateUrl)
.then((res) => res.text())
.then((res) => {
const text = res;
const parser = new DOMParser();
const htmlDocument = parser.parseFromString(text, 'text/html');
const productCard = htmlDocument.documentElement.querySelector(selectors.productCard);
return productCard.outerHTML;
})
.catch((err) => console.error(`[Shopify Wishlist] Failed to load content for handle: ${handle}`, err));
};
const setupGrid = async (grid) => {
const wishlist = getWishlist();
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);
};
const setupButtons = (buttons) => {
buttons.forEach((button) => {
const productHandle = button.dataset.productHandle || false;
if (!productHandle) return console.error('[Shopify Wishlist] Missing `data-product-handle` attribute. Failed to update the wishlist.');
if (wishlistContains(productHandle)) button.classList.add(BUTTON_ACTIVE_CLASS);
button.addEventListener('click', () => {
updateWishlist(productHandle);
button.classList.toggle(BUTTON_ACTIVE_CLASS);
});
});
};
const initGrid = () => {
const grid = document.querySelector(selectors.grid) || false;
if (grid) setupGrid(grid);
};
const initButtons = () => {
const buttons = document.querySelectorAll(selectors.button) || [];
if (buttons.length) setupButtons(buttons);
else return;
const event = new CustomEvent('shopify-wishlist:init-buttons', {
detail: { wishlist: getWishlist() }
});
document.dispatchEvent(event);
};
const getWishlist = () => {
const wishlist = localStorage.getItem(LOCAL_STORAGE_WISHLIST_KEY) || false;
if (wishlist) return wishlist.split(LOCAL_STORAGE_DELIMITER);
return [];
};
const setWishlist = (array) => {
const wishlist = array.join(LOCAL_STORAGE_DELIMITER);
if (array.length) localStorage.setItem(LOCAL_STORAGE_WISHLIST_KEY, wishlist);
else localStorage.removeItem(LOCAL_STORAGE_WISHLIST_KEY);
const event = new CustomEvent('shopify-wishlist:updated', {
detail: { wishlist: array }
});
document.dispatchEvent(event);
return wishlist;
};
const updateWishlist = (handle) => {
const wishlist = getWishlist();
const indexInWishlist = wishlist.indexOf(handle);
if (indexInWishlist === -1) wishlist.push(handle);
else wishlist.splice(indexInWishlist, 1);
return setWishlist(wishlist);
};
const wishlistContains = (handle) => {
const wishlist = getWishlist();
return wishlist.includes(handle);
};
const resetWishlist = () => {
return setWishlist([]);
};
I tried this
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 help me to resolve this issue.
Appreciate your help!
const emptyStatement = document.getElementById('oasis-wishlist');
if (emptyStatement.childNodes.length === 0) {
console.log('[Shopify Wishlist] ✅ You have no wishlist item');
};
const emptyStatement = () => {
const empty_Statement = ["You have no wishlist item."];
const resetWishlist = empty_Statement;
return setWishlist(['empty_Statement']);
document.getElementById("oasis-wishlist").innerHTML = emptyStatement;
};type here
2
Answers
Try out the below code this should fix your bug if not then let me know. I will try another method of rendering an empty statement.
Ok. so here you can add a condition while fetching Wishlist products. if
productarr.length==0
then set the inner HTML of Wishlist to<h1> Wishlist empty </h1>
else if there is data then print the data as per your choice. i can’t actually provide the code because it will alter whole of your code. apply the above logic accordingly and that will fix your code.