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 your project code, how to create a template for automatic category pages within the Frontastic studio, 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 the API hub as well as being able to filter as a data source within the Frontastic studio (we'll come to that later in this article).

To access the API category list within your project, you can connect your Frontastic component 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 Frontastic component:

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. 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}
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 dynamic page area of the Frontastic studio 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 Frontastic studio, you'll automatically have a dynamic pages folder created, which includes a Category pages folder. Then you'll need to set up a Default layout of your category pages using Frontastic components as you would on any other page. It will then use the Product API data source so that every unique category on your site has its own page that follows this structure and each will have its 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 API hub automatically creates these based on the API data source and the layout you've created.

Setting up a default category page

Open the Frontastic studio, go to Dynamic pages, and select the Category pages folder

Click on Default page under the Dynamic page rules header, click + New page versionnext to the Page versions header, input a name, and click Save

Add layout elements, components, and components groups to your page but be sure to include the Product Listing Page component, here you'll select the Products in Category data source in the settings, then Preview your page, and click Save

Click the more icon on the Draft version of your page and select Make 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:

Click the more icon on the Default version of your page and select Duplicate version, input a name, and click Save

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 input an end date if you want to), then click Save

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:

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

Adding categories to your navigation in the Frontastic studio

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 studio and without the need for a developer.

❗️
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.

📘
You could create your category pages in the site builder and deactivate the dynamic page versions. This gives you more freedom but it'll be manual effort.

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

Open Site builder, click New, then select Create page folder

Input a Page name, a Relative path, and select where you want your category to sit within your page folder tree,

Expand the Data source section, select + Add data source filter, and select Product API search

Click + Add filter, select Category, then select a category type, and click the back arrow

Click Save on your page folder, then find and select your new page folder in the tree, then create a new page version by clicking New, then Create page version, input a name, and then click Save

Edit your page by adding layout elements and components, be sure to include a component that uses the Product data source API, then Preview, and Save your page
Make your page version live by clicking the more icon on the Draft version of your page and select Make default