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[]> {
...
}
Try using the above function to get the store menu up and running. There's a featured section in both the Men's and Women's menu that needs some entries.
Once you've wired up the getHierarchyNodes
function you should be able to click the menu links to category pages for your products!
In Commerce hierarchies and nodes are a very versatile feature that can be used to represent many different structures. You can learn more here