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 studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `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 the API hubAPI hub - The API hub combines our code, your code, and APIs to create the backend of a commerce site. Any backend development or extensions are done here. Known as `Catwalk` in code. as well as being able to filter as a data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site. within the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. (we'll come to that later in this article).

To access the API category list within your project, you can connect your Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. 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 componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code.:

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 pagedynamic page - A type of page that creates the default layout of pages that use the same structure but with different data, for example, a Product Details Page, wishlist, cart, search, and so on. Previously known as `master page`. area of the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. 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 studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`., you'll automatically have a dynamic pagesdynamic pages - A type of page that creates the default layout of pages that use the same structure but with different data, for example, a Product Details Page, wishlist, cart, search, and so on. Previously known as `master 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 componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. as you would on any other page. It will then use the Product API data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site. 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 hubAPI hub - The API hub combines our code, your code, and APIs to create the backend of a commerce site. Any backend development or extensions are done here. Known as `Catwalk` in code. automatically creates these based on the API data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site. and the layout you've created.

Setting up a default category page

  1. Open the Frontastic studio, go to Dynamic pages, and select the Category pages folder
  1. 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
  1. 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
  1. 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:

  1. Click the more icon on the Default version of your page and select Duplicate version, input a name, and click Save
  1. 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 studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. 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.

  1. Open Site builder, click New, then select Create page folder
  1. Input a Page name, a Relative path, and select where you want your category to sit within your page folder tree,
  1. Expand the Data source section, select + Add data source filter, and select Product API search
  1. Click + Add filter, select Category, then select a category type, and click the back arrow
  1. 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
  1. 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

  2. Make your page version live by clicking the more icon on the Draft version of your page and select Make default


Did this page help you?