Vendure电商平台导航菜单实现指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01081/article/details/148488138

Vendure电商平台导航菜单实现指南

vendure A headless GraphQL commerce platform for the modern web 项目地址: https://gitcode.com/gh_mirrors/ve/vendure

导航菜单的重要性

在电商平台中，导航菜单是用户浏览商品的主要途径。一个结构清晰、层次分明的导航系统能够显著提升用户体验，帮助用户快速找到所需商品。Vendure作为现代化的电商框架，提供了灵活的方式来实现导航菜单功能。

基础实现：获取顶级商品分类

Vendure中的商品分类(Collections)是构建导航菜单的基础元素。我们可以通过GraphQL查询获取顶级分类：

query GetTopLevelCollections {
  collections(options: { topLevelOnly: true }) {
    items {
      id
      slug
      name
      featuredAsset {
        id
        preview
      }
    }
  }
}

这个查询会返回所有顶级分类，每个分类包含ID、URL slug、名称以及特色图片等信息。这是构建简单导航菜单的最基本方式。

构建层级导航树

实际电商平台通常需要展示多级分类结构。Vendure支持分类的层级关系，我们可以通过以下步骤构建树形导航：

首先修改查询，获取每个分类的parentId信息：

query GetAllCollections {
  collections {
    items {
      id
      slug
      name
      parentId
      featuredAsset {
        id
        preview
      }
    }
  }
}

使用TypeScript将扁平数据转换为树形结构：

// 定义类型
export type HasParent = { id: string; parentId: string | null };
export type TreeNode<T extends HasParent> = T & {
    children: Array<TreeNode<T>>;
};
export type RootNode<T extends HasParent> = {
    id?: string;
    children: Array<TreeNode<T>>;
};

// 转换函数
export function arrayToTree<T extends HasParent>(nodes: T[]): RootNode<T> {
    const topLevelNodes: Array<TreeNode<T>> = [];
    const mappedArr: { [id: string]: TreeNode<T> } = {};

    // 创建哈希表
    for (const node of nodes) {
        mappedArr[node.id] = { ...(node as any), children: [] };
    }

    // 构建树结构
    for (const id of nodes.map((n) => n.id)) {
        if (mappedArr.hasOwnProperty(id)) {
            const mappedElem = mappedArr[id];
            const parentId = mappedElem.parentId;
            if (!parentId) {
                topLevelNodes.push(mappedElem);
                continue;
            }
            if (mappedArr[parentId]) {
                mappedArr[parentId].children.push(mappedElem);
            }
        }
    }
    
    return { children: topLevelNodes };
}