如何在Wix Velo中按店铺分类展示会员心愿单商品？

可以实现。核心逻辑是获取会员心愿单数据→关联商品所属店铺分类→按分类分组→动态渲染分组后的内容，以下是具体实现步骤和代码示例：

1. 前置准备 #

• 确保页面已开启Wix Velo开发模式（点击页面右上角"代码"按钮）
• 确认商品已设置对应的店铺分类（可使用Wix默认商品分类，或自定义商品字段存储店铺分类）

2. 实现步骤及代码 #

步骤1：获取登录会员的心愿单数据 #

首先验证用户登录状态，再调用Wix Stores API获取心愿单商品列表：

import { getWishlist } from 'wix-stores';
import { currentMember } from 'wix-members';

// 获取登录会员的心愿单商品
async function fetchWishlistItems() {
  try {
    // 验证用户已登录
    await currentMember.getMember();
    const wishlist = await getWishlist();
    return wishlist.items;
  } catch (err) {
    console.error('获取心愿单失败:', err);
    // 用户未登录时返回空数组，可在页面添加提示
    return [];
  }
}

步骤2：给心愿单商品补充店铺分类信息 #

心愿单返回的商品数据仅包含基础信息，需调用API获取完整商品数据，提取店铺分类：

import { getProduct } from 'wix-stores';

// 补充商品的店铺分类信息
async function enrichWishlistWithCategory(items) {
  return Promise.all(
    items.map(async (item) => {
      const product = await getProduct(item.productId);
      // 这里假设店铺分类是商品的第一个默认分类，若用自定义字段则改为product.customFields.xxx
      const shopCategory = product.categories.length ? product.categories[0].name : '未分类';
      return { ...item, shopCategory };
    })
  );
}

步骤3：按店铺分类分组商品 #

使用数组reduce方法将商品按分类名称分组：

// 按店铺分类对商品分组
function groupItemsByCategory(enrichedItems) {
  return enrichedItems.reduce((groups, item) => {
    const category = item.shopCategory;
    groups[category] = groups[category] || [];
    groups[category].push(item);
    return groups;
  }, {});
}

步骤4：动态渲染分组后的心愿单 #

在页面添加一个空白容器（ID设为wishlistContainer），通过代码动态创建分类标题和商品列表：

import { $w } from 'wix-frontend';

// 渲染分组后的心愿单
async function renderGroupedWishlist() {
  const rawItems = await fetchWishlistItems();
  const enrichedItems = await enrichWishlistWithCategory(rawItems);
  const groupedItems = groupItemsByCategory(enrichedItems);

  const container = $w('#wishlistContainer');
  container.empty(); // 清空原有内容

  // 遍历每个分类，渲染标题和商品
  Object.entries(groupedItems).forEach(([category, items]) => {
    // 创建分类标题
    const categoryTitle = $w.createText();
    categoryTitle.text = category;
    categoryTitle.fontSize = 20;
    categoryTitle.fontWeight = 'bold';
    categoryTitle.marginBottom = '15px';

    // 创建商品列表容器
    const itemsBox = $w.createBox();
    itemsBox.layout = 'vertical';
    itemsBox.gap = '12px';

    // 渲染每个商品项
    items.forEach(item => {
      const productBox = $w.createBox();
      productBox.layout = 'horizontal';
      productBox.gap = '10px';
      productBox.padding = '10px';
      productBox.border = '1px solid #f0f0f0';
      productBox.borderRadius = '4px';

      // 商品图片
      const productImg = $w.createImage();
      productImg.src = item.productImage;
      productImg.width = '70px';
      productImg.height = '70px';
      productImg.borderRadius = '4px';

      // 商品信息
      const infoBox = $w.createBox();
      infoBox.layout = 'vertical';
      const nameText = $w.createText();
      nameText.text = item.productName;
      nameText.fontSize = 14;
      const priceText = $w.createText();
      priceText.text = `¥${item.price}`;
      priceText.fontSize = 14;
      priceText.color = '#e63946';

      infoBox.addChildren([nameText, priceText]);
      productBox.addChildren([productImg, infoBox]);
      itemsBox.addChild(productBox);
    });

    // 将分类标题和商品列表加入主容器
    container.addChildren([categoryTitle, itemsBox]);
  });
}

// 页面加载时触发渲染
$w.onReady(async () => {
  await renderGroupedWishlist();
});

3. 注意事项 #

• 若使用自定义店铺分类字段，需修改enrichWishlistWithCategory中的分类获取逻辑，比如从product.customFields.shopCategory取值
• 可添加用户未登录的提示，比如在fetchWishlistItems的catch分支中，给页面上的提示文本组件赋值
• 若心愿单商品数量较多，建议添加分页逻辑，避免一次性渲染过多DOM元素影响性能
• 样式可根据页面设计调整，比如修改字体、颜色、间距等

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