Okay, we are ready to go, now in order to make the plugin work we have to create a set of pages :

  • The categories page,
  • The category details page,
  • The product details page.

Understanding the :slug key concept in OctoberCMS

Before going deeper in the Catalog plugin configuration you need to understand how OctoberCMS uses dynamic variables in urls.

Making the categories page

Here we want to display all our categories. For that, first we need to create... The page ! So go to the CMS section of the backend, select Pages/Add. Here we will call this page All categories, and add the Catalog/Categories component to it. We will configure the component later, so add the component to the template code and save.

{% component 'categories' %}

Making the category details page, with products of that category

Now let's create another page, that we will call Category details, and add the Catalog/Product list component. One more time, just save as we will configure the component just after creating the last page.

{% component 'product_list' %}

Don't forget to add :slug into your page url, as it's the parameter that will be used to retrieve each category.

Making the product details page

So now, as you may know, we create the... Product details page ! Right, one more time, create a new page that we will call Product details, and add the Catalog/Product details component.

{% component 'product_details' %}

One more time, don't forget to add :slug into your page url, as it's the parameter that will be used to retrieve each product.

Linking pages and elements

Okay, we have our pages, now we can end the configuration by telling the components how to make links between pages.

Go back to the all-categories page and in the Categories component set the Links to category-details. This is our category details page, so now in our All categories page, we have links on each category like that:


You should see something like that in the parameter inspector of the component : All categories page configuration

Same for the Category details page : All categories page configuration Here we want to set the product list component with the url needed to link products to there own page. That's what is done by setting the product-details page in the Product parameter. Now we have urls for products like this:


Finally, in the Product details page, we have nothing to do, let the default configuration as is. All categories page configuration

And that's it ! Our Catalog is configured.

Next step will be creating groups, custom fields, products and categories (comming soon).