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. 

< p> 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 the Frontastic Editor, 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 the Editor (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 area of the Frontastic Editor 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 the Editor, you'll automatically have a Master Pages folder created within Master, which includes a Category Pages folder. Then you'll need to set up a Default layout of your Category Pages using 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 the Frontastic Editor, go to Master, and select the Category Pages folder
Set up a category page
2
Click on Default Page under the Master Page Rules header, click + New Page next to the Assigned Pages header, input a name, and click Save, then add cells and Tastic kits to your page but be sure to include the Product Listing Tastic, here you will select the Products in Category data stream in the Configuration, then Preview your page and click Save
Creating new category page
3
Click the more icon on the Draft version of your page and select Make Default
Making draft version default

Scheduling a new version of the default Category Page

You can create a new version of a Category Page and make it go live when you want it to. To do this:

1
Click the more icon on the Default version of your page and select Duplicate version, input a name, and click Save
Scheduling a new version of a category page
2
Click the more icon of your new draft, select Schedule, then select the date and time you want to make your page live for, you can also select an end date if you want to 
Adding the time for scheduling a category page

Then you can edit the Category Page as normal by clicking the edit 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 select Edit Schedule, and edit the dates and times in the pop-up, then click Save:

Changing the scheduled time on a category page

To remove the scheduled time, click the more icon the scheduled version, then select Make Draft:

Removing a scheduled time on a category page

Adding categories to your navigation in the Frontastic Editor

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 the Frontastic Editor and without the need for a Developer.

Please note: 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 Stage, click New, then select Create Node
Creating node for bespoke category page
2
Input a Node Name, a Relative Path, and select where you want your category to sit within your Navigation, then expand the Streams section, select + Add Stream, and select Product APISearch
Editing node configuration for category page
3
Click + Add filter, select Category, then select a category type, and clic the back arrow
Add stream to category page
4
Click Save on your node, then find and select your new node in the navigation, then create a new page by clicking New, then Create Page, input a name, and then click Save
Creating new page for category pages
5
Edit your page by adding cells and Tastics, be sure to include a Tastic that uses the Product Stream API, then Preview, and Save your page 

6
Make your page active by clicking the more icon on the Draft version of your page and select Make Default


‹Back

Tips

Still need help? Contact us Contact us