Shopify心愿单无商品时显示空白，求添加空状态提示方案

我安装了Shopify的Wishlist功能，功能运行正常，但心愿单无商品时仅显示空白页面，希望在此场景下显示“您暂无心愿商品”的提示信息。以下是当前使用的脚本代码，我尝试了两种实现方法但均无效，恳请协助解决该问题。

当前使用的脚本代码 #

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([]);
};

尝试过的无效方法 #

方法一 #

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 = document.getElementById('oasis-wishlist');
if (emptyStatement.childNodes.length === 0) {
  console.log('[Shopify Wishlist] ✅ You have no wishlist item');
};

修复方案 #

问题核心在于setupGrid函数未处理心愿单为空的场景，直接将网格内容设为空字符串。只需要在该函数中添加空状态判断逻辑即可：

修改后的setupGrid函数：

const setupGrid = async (grid) => {
  const wishlist = getWishlist();
  // 处理空心愿单场景
  if (wishlist.length === 0) {
    grid.innerHTML = '<p style="text-align:center; padding: 2rem 0; color:#666;">您暂无心愿商品</p>';
    grid.classList.add(GRID_LOADED_CLASS);
    
    const event = new CustomEvent('shopify-wishlist:init-product-grid', {
      detail: { wishlist: wishlist }
    });
    document.dispatchEvent(event);
    return;
  }
  
  // 原有加载商品卡片逻辑
  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);
};

修改说明 #

1. 先判断wishlist.length === 0，为空时直接给网格设置提示文本（可根据需求调整样式）
2. 空状态下仍需添加GRID_LOADED_CLASS并触发对应事件，保证逻辑一致性
3. 非空状态继续执行原有商品卡片加载逻辑

修改完成后，心愿单无商品时页面将显示指定提示文本，不再是空白页。

内容的提问来源于stack exchange，提问作者Pretty Styles