Create Side Navigation

In this section, we’ll guide you through building product listing pages, improving search results through custom settings in the panel, and how to access filtered product data for a dynamic and responsive user experience.

bapiClient.categories.getByPath

Here, we’ll show you how you can build additional side navigation on your product listing pages.

Side navigation.

What is this endpoint for?

The endpoint is used to retrieve more information about a category, such as its ID or name. You can use the fetch function from the useCategories composable, to fetch all underlying categories. Note that paths are multilingual and can vary between languages and countries. They’re perfect for URLs, since they follow the same format.

Each category can be identified by either the ID (like 123) or the path (like cloth/hoodies). To fetch products by a specific category, we need the ID. Luckily, we can use the Core function: useProducts(...).fetch({ category: 'cloth/hoodies' }) to get all products in this category.

Dev-to-Dev Hint

If no categories are returned, you can check whether the storefront API can find the specified category using Postman or a similar tool. Add our path to the end of this URL and you should get either a 404 error or the requested category. For instance, here we try to get women/shorts:

https://<backbone-url>/v1/categories/women/shorts?shopId=<shop-id>

Example

The following call is used in demo shop to get the root categories and a maximum of 3 children for each:

const {
  data,
  fetch,
  fetching,
} = useCategories()

await fetch({
  path: '/',
  children: 3,
  includeHidden: true,
})

The data returned looks like this:

{
  activeNode: undefined,
  categories: [
    {
      id: 2045,
      path: '/women',
      name: 'Women',
      slug: 'women',
      description: '',
      parentId: 0,
      rootlineIds: [Array],
      childrenIds: [],
      properties: [],
      isHidden: false,
      depth: 1,
      supportedFilter: [Array],
      shopLevelCustomData: {},
      countryLevelCustomData: {},
      children: []
    },
    {
      id: 2046,
      path: '/men',
      name: 'Men',
      slug: 'men',
      ...
  ]
}

activeNode is undefined, because there is no category with the path “/” as it’s the root folder. If we were to search for a specific category, such as /women, we would get the category object in the activeNode property.

Next Steps

with parameter.

Retrieve multiple shop categories to create a side navigation on PLPs

Example

Next Steps