Navigate around the store

You now have all the product related information a customer needs to see how amazing your products look. Let's set up a menu to help the customer get to different categories.

Commerce gives you flexibility when it comes to creating collections of products. Collections or categories use the Hierarchies and Nodes feature, which gives you the flexibility to create any grouping you choose. For example, you may want to collect all products of a particular brand into a node, or bring together all sale items into a single node. A product can belong to multiple nodes, in multiple hierarchies.

In your store, you want to group products into two hierarchies, Men's and Women's. Each of these hierarchies contains nodes. Jeans and T-Shirts for Men along with Jeans, T-Shirts, and Bags for Women.

You want your top menu to use the Men's and Women's hierarchies, opening a sub menu with the appropriate nodes (T-Shirt, Jeans, Bags etc.).

This SDK query will get the information needed.

EPCC.ShopperCatalog.Hierarchies.GetHierarchyChildren({ hierarchyId })

The function getHierarchyNodes takes a hierarchyId and returns all the nodes for that hierarchy.

export async function getHierarchyNodes(hierarchyId: string): Promise<Node[]> {
  ...
}