Magento Theme Development: Category Page, Part 1

Congratulations on completing the home page of your new theme, and starting with the next page. In this tutorial, we'll start modifying the category page of our Magento theme. 

The category page essentially consists of four sections: the toolbar, grid mode, list mode and the sidebar. We'll deal with the first three sections in this article, and then in the next tutorial, we'll modify the sidebar and do some CSS fixes.

If you look at any category page of our theme, it'll currently look something like this:

Category Page before editing

While we want to make it look like this:

HTML design Category Page

If you notice, our current category page has wide empty spaces on the left and right. We need to figure out why the content area is not taking enough space. Let's first look at which template is responsible for rendering this page. We can do this by enabling template hints from the admin panel, as you have done multiple times before in this series.

Here we found out it had a three-column layout rendering this page, and this is the reason there is empty wide space on the left, as no blocks are assigned to the left sidebar.

Template Hints for Category Page

To make this page look like our HTML design, we'll change it to two columns. From the admin panel, go to Catalog > Manage Categories > Custom Design > Page Layout and change it to 2 columns with left bar.

Changing Page Layout

Now our page should have a two-column layout with a sidebar on the left side, as was the requirement of our design.

As in this article we'll only change the right area (not the sidebar), we'll start the editing process from the toolbar. With template hints on, we'll check the phtml files responsible for rendering that by again enabling the template hints.

As we found out it, is this file: \template\catalog/product/list/toolbar.phtml.

We'll copy that in our new theme, compare it with the code of our HTML file, and then start making changes. Our current code of the toolbar.phtml file looks like this:

We have to compare it with the HTML code responsible for the toolbar part, which is this:

We'll start modifying this code by putting in the dynamic tags and different for and if statements. For instance, to render the links for grid and list modes for the view mode, we'll add this code:

What this code essentially does is iterate over all the active modes (list and grid), and then list an anchor tag for each one of these. Here, very smartly, we have assigned different classes and titles to them, using the $_label variable, which will be different for each mode. 

Similarly you can modify the sort-by and limiter parts yourself by comparing it with the actual toolbar.phtml file. After the modifications, the final code for this file will look something like this:

And if we refresh the page now, it'll look something like this. Everything is in place, but the CSS is quite off, which we'll fix in the next article.

Toolbar after editing

Now it's time to change the actual products displayed on this page. Products here can be shown in two different ways, i.e. list mode and grid mode. If we enable template hints to find out the file responsible for this part, we'll see that the code for both grid and list mode are written in the same file, which is frontend\rwd\default\template\catalog/product/list.phtml.

The list code in this file is on lines 44 to 116, which is this:

We now have to compare it with the HTML list code in productlist.html in our HTML template.

Modifying this code is fairly simple. We'll use these initialization lines:

Then we'll place a for loop around the li tag:

And lastly we'll replace the product name, price, description, image file link and URL with the dynamic tags. The final code will look like this:

Now, if we refresh the page, we'll see the category page in list mode will look something like this. I know it's not what we want it to look like, but all our HTML is in place, so now we just need to modify its CSS, which we'll do in the next tutorial.

List Mode after editing

Now coming to grid mode, the code for that is from 118 to 176 in the same list.phtml file.

The HTML code looks like this in the productgrid.html file in our HTML template:

Modifying this part will be quite similar to what we did in the list part. First of all we'll do some initialization, the same as in the default list.phtml file. 

Next we'll wrap each li item inside a for loop to iterate over all products.

Lastly we'll replace the product attributes like product name, price, description, etc., with relevant dynamic tags. You can find them quite conveniently from the actual list.phtml file.

The final code will look like this:

Now if you refresh the page, the grid mode will look like this:

Grid Mode after editing

In this article, we have modified the toolbar and list and grid sections of this page. In the next article we'll modify the sidebar, and do some CSS style fixes. By the end of the next article, our category page will look quite similar to the HTML design.



Related Articles