How Category Pages Work

A Category Page makes use of the Categories defined in your commerce system, for example, commercetools, and therefore all your APIs. 

In this article, we'll show you how Categories work within Frontastic, how to add them to your navigation in Catwalk, how to create a template for automatic Category Pages within Backstage, as well as some other tips.

How Categories Work

A Category Page will display all Products that have a specific Category attached in the API. If you add more Categories within your commerce system or remove any, the same will be done within Frontastic. For example, if you add a Category called "jeans" in commercetools, a Category called "jeans" would now be available within the API Category list within Catwalk as well as being able to filter as a Stream within Backstage (we'll come to that later in this article).

To access the API Category list within your Catwalk, you can connect your Tastic to Redux:

export default connect((globalState, props) => {
	return {
		...props,
		categories: globalState.category.categories
	} 
})(YourTasticClass)

You can then check if the categories are properly loaded inside your Tastic:

if (this.props.categories.isComplete()) {
   const categories = this.props.categories.data
}

You should now have an array of all configured Categories there. These categories are of the following structure:

[{
    _type: "Frontastic\Common\ProductApiBundle\Domain\Category",
		categoryId: "someUUID",
		name: "Root Catalog",
		depth: 0,
		path: "/someUUID"
	}, {
    _type: "Frontastic\Common\ProductApiBundle\Domain\Category",
		categoryId: "someSubSubSubUUID",
		name: "Some Sub-Category name",
		depth: 3,
		path: "/someUUID/someSubUUID/someSubSubUUID/someSubSubSubUUID"
}]

You can now build these into your navigation.

Below is an example of how you can iterate over these categories, but this depends on what your navigation looks like. Please don't copy and paste this example into your code, but use it as a guide for your own data:

const categoryRawData = [{
  _type: "Frontastic\\Common\\ProductApiBundle\\Domain\\Category",
  categoryId: "someUUID",
  name: "Root Catalog",
  depth: 0,
  path: "/someUUID"
}, {
  _type: "Frontastic\\Common\\ProductApiBundle\\Domain\\Category",
  categoryId: "someSubSubSubUUID",
  name: "Some Sub-Category name",
  depth: 3,
  path: "/someUUID/someSubUUID/someSubSubUUID/someSubSubSubUUID"
}]

// finding the top level navigation items
const rootNodes = categoryRawData.filter(category => category.depth === 0)
const firstRootChildren = categoryRawData.filter(category => category.path.includes(rootNodes[0].categoryId) && category.depth > rootNodes[0].depth)

The URL that's created follows the following pattern by default but is configurable: /c/{category-id}/{slug}, where the Category ID is a string in the array, this can come from your Commerce backend, for example, a commercetools UUID would be something like 3ead515e-947a-46c1-8bc2-1625fc8ead88. The Slug is the name you want to associate with your Category so it's easily identifiable for your customers as well as SEO.

Category Pages Template Layout

You need to create a single template for all your Category Pages within the Master App so even though they'll contain different Categories, they'll all have the same Layout across your site.

When your Project is set up within Backstage, you'll automatically have a Master Pages folder created within the Master App, which includes a Category Pages folder. Then you'll need to set up a Default layout of your Category Pages using the Page editor and Tastics as you would on any other Page. It will then use the Product API Stream so that every unique Category on your site has its own Page that follows this structure and each will have it's own URL that follows a structure like /c/[category-id]/[slug], for example, https://mypage.com/c/3ead515e-947a-46c1-8bc2-1625fc8ead88/jeans. This is because our Catwalk automatically creates these based on the API stream and the layout you've created.

Setting Up a Default Category Page
1
Open Backstage, go to the Master App and select the Category Pages folder
Category Pages Set Up Step 1 GIF
2
Click on Default Page under the Master Page Rules header, click the + icon next to the Assigned Pages header, input a name, click Save then add Cells and Kits to your Page Layout
Category Pages Set Up Step 2 GIF
Scheduling a New Version of the Default Category Page

You can create a new Category Page and make it go live when you want it to.

1
Click the more icon on the Default version of your Page and select Create Draft From Page
Category Pages Scheduling Step 1 GIF
2
Click the more icon in the Draft version of your Page and select Schedule, then input the data and the time you want to make the Page live and when you want it to come down
Category Pages Scheduling Step 2 GIF

Then you can edit the Category Page as normal by clicking the pencil icon on the Scheduled version of your Page.

To change the scheduled time, click the more icon on the Scheduled version of your Page, then click Edit Schedule and edit the dates and times in the pop up, then click Save:

Category Pages Scheduling Edit GIF

To remove the Scheduled time, click the more icon on the Scheduled version of your Page then click Make Draft:

Category Pages Scheduling Remove GIF

Adding Categories to Your Navigation in Backstage

If you want to add a Category to the main part of your navigation for a special occasion, such as a sales event, you can do this within Backstage and without the need for a Developer.

Please note: By adding a Category this way will create a page with duplicate content but with a different URL. This will also mean that it won't follow your usual Category Page template (as we've gone through above), you'll have to create and manage the layouts separately and as a unique page so we recommend using this method sparingly.

If you do decide that you want to do this, you can follow the steps below.

1
Open the Stage App, click New, then select Create Node
Category Pages Add to Navigation Step 1 GIF
2
Input a Node Name, a Relative Path and select where you want your Category to sit within your Navigation, then click Save
Category Pages Add to Navigation Step 2 GIF
3
Expand the Streams section, click Add Stream then select Product API Search
Category Pages Add to Navigation Step 3 GIF
4
Click the + icon under Stream Configuration, select Category and then choose the Category Type you want to include
Category Pages Add to Navigation Step 4 GIF
5
Click the back arrow, click Save on the pop up, then create a new Page by clicking new then Create Page and inputting a name then click Save
Category Pages Add to Navigation Step 5 GIF
6
Set up your Page layout with Cells and Kits
Category Pages Add to Navigation Step 6 GIF
7
Add a Tastic that uses a Product Stream API, for example, Product Slider or Product Listing, as well as any other Tastics you want to display on your Page
Category Pages Add to Navigation Step 7 GIF
8
Change the configurations to how you'd like them and Preview your Page
Category Pages Add to Navigation Step 8 GIF
9
Make any adjustments to your Tastics and use the Live Preview to check how it will look for your customers
Category Pages Add to Navigation Step 9 GIF
10
Click Save, then click the More icon on the name of your Page and select Make Default
Category Pages Add to Navigation Step 10 GIF

‹Back

Tips

Still need help? Contact Us Contact Us