11 - Adding Product Category Pages

In this chapter we’ll add some depth to the Products section of our site by creating a category template that shows all the entries assigned to a specific category.  We’ll then modify the products/index template to link to this new template.

 
Download the EE Code for 11 - Adding Product Category Pages

The Category Template
You’ll need a new template in your Products Template Group.  I’ve named mine “list” as it will list all the products in a specific category.  Here’s the code for the template:

{embed="embeds/html_header" my_page_title="Products List{exp:weblog:category_heading weblog="products"} | {category_name}{/exp:weblog:category_heading}"}
<body>
    <
div id="content">
        
{embed="embeds/logo_title"}
        {embed
="embeds/main_nav" my_location="products"}
        {embed
="embeds/search_section_intros" the_url_title="products"}
        
<div id="maincontent">
            <
div id="right_side">
                
{embed="embeds/latest_news"}
                {embed
="embeds/latest_products"}
            
</div><!-- close right_side -->
            <
div id="left_side">
                
{exp:weblog:category_heading weblog="products"}
                    
<h3>{category_name}</h3>
                    
{if category_description}
                        
<p><i>{category_description}</i></p>
                    
{/if}
                {
/exp:weblog:category_heading}

                {exp
:weblog:entries weblog="products" disable="member_data|trackbacks" orderby="title" sort="asc"}
                    
<h2 class="underline">{title}</h2>
                    <
img class="category_image" src="{product_thumbnail}" alt="{title}" title="{title}" height="112" width="150" />
                    
{product_description}
                    
<a href="#">View Product Details >></a>
                    <
div style="clear:left"></div>
                
{/exp:weblog:entries}
            
</div><!-- close left side div -->
        </
div><!-- close main content div -->
        
{embed="embeds/footer"}
    
</div>    <!-- close content div -->
   </
body>
</
html

Let’s dissect this template:

  • First thing off you’ll note that both the title tag and the main content area make use of an EE tag called exp:weblog:category_heading.  You can review the documentation for this tag.
  • This tag will display category content if the template is loaded with a category link.  In other words, this template we are creating will work in two modes - either as a “show every product regardless of category” or “show products in a specific category”- and how it behaves depends on how you’ve linked to it.
  • If it’s loaded straight, with no category in the URL, then it will show all products (and these exp:category_heading tags will not return any content).  If it’s loaded with a category link, the list of products will be filtered to that category, and these category_heading tags will return category content.
  • The exp:weblog:entries tag is very straightforward - you’ll note that there is nothing in the parameters telling it to display a specific category.  This can be confusing as sometimes you’ll think you’ll need to force a certain category in as a parameter, but in this case there is no need.  This exp:weblog:entries tag will look at the URL and change what it returns, depending on what it sees there.  The only thing I’ve done differently here is specify a sort order on “title”, so that products are listed alphabetically.
  • You’ll note an empty link to View Product Details.  We could simply show all product data on this template, but I wanted to go one level deeper with this page as more of a summary page then link to a single page where all product content is displayed.  We’ll do that in the next chapter.

OK - so get that template loaded, making any changes to the embed statements or weblog names for your local EE setup.  Click View to load the template.  It should load showing all your products alphabetically, with no category content showing.

Category Links
So how to get that new template to show a single category?  We need to go back to our Products Index template and modify the links there to link to this new template with category links.

Here’s the updated text version of my products/index template:

{embed="embeds/html_header" my_page_title="Products"}
<body>
    <
div id="content">
        
{embed="embeds/logo_title"}
        {embed
="embeds/main_nav" my_location="products"}
        {embed
="embeds/search_section_intros" the_url_title="products"}
        
<div id="maincontent">
            <
div id="right_side">
                
{embed="embeds/latest_news"}
                {embed
="embeds/latest_products"}
            
</div><!-- close right_side -->
            <
div id="left_side">
                
{exp:weblog:categories weblog="products" style="linear" show_empty="yes"}
                    
<h2 class="underline">{category_name}</h2>
                    <
p>
                        <
img class="category_image" src="{category_image}" alt="{category_name}" title="{category_name}" height="117" width="170" />
                        <
strong>Line Manager:</strong{category_manager}<br/>
                        <
strong>Phone:</strong{manager_phone}
                    
</p>
                    <
p>
                        
{category_description}&nbsp;&nbsp;<a href="{path=products/list}">View Products >></a>
                    </
p>
                    <
div style="clear:left"></div>
                
{/exp:weblog:categories}
            
</div><!-- close left side div -->
        </
div><!-- close main content div -->
        
{embed="embeds/footer"}
    
</div>    <!-- close content div -->
   </
body>
</
html

The EE code that was added is in the “View Products” link, where it now has the following code:

<a href="{path=products/list}">View Products >></a

Because we’ve created this link within a exp:weblog:categories tag, EE will render the link using the category keyword and the category_url_title appended on after the template name of list.

The Results
Load the updated products/index and product/list templates and you should be able to bring up your site, click the Products tab, get a list of the product categories and be able to navigate to the new product/list template in category mode.

 

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of Inge Vejsbjerg

by Inge Vejsbjerg

Date: Thursday, October 23rd, 2008
Comment: #1

Thanks for a useful tutorial… which saved me lots of time and headaches

Picture of Gaurav

by Gaurav

Date: Friday, December 12th, 2008
Comment: #2

The variable {product_thumbnail} doesn’t seem to work properly. My images just won’t show up

Picture of Gaurav

by Gaurav

Date: Friday, December 12th, 2008
Comment: #3

Also the descriptions are not appearing exactly as we enter them. I mean they are not taking special characters like “”.

Picture of Diane

by Diane

Date: Monday, February 9th, 2009
Comment: #4

This tutorial is awesome!  I have learned so much.  I have gotten this far with no problems, but I cannot make the product_thumbnail on the Products List page by category work either.  It has an href embedded in the src and it is like the html tags are not balanced?

I am getting on the web page:
Product entries title Accessory 1
http://localhost/eecore1.6.7/images/front_seats_tn.jpg” alt=“Accessory 1” title=“Accessory 1” height=“112” width=“150” > Product entries description

Accessory #1

and if I look at the source, I have this for the img tag:
“a href=http://localhost/eecore1.6.7/images/front_seats_tn.jpg</a>” alt=“Accessory 1” title=“Accessory 1” height=“112” width=“150” >”

ps this is really weird, what I am keying for the img tag is not what is showing in the preview, so I am not sure how helpful this will be.

Mike Boyink

by Mike Boyink (Author)

Date: Monday, February 9th, 2009
Comment: #5

Diane -

Make sure your weblog configuration under:

Weblog Administration ›  Weblog Management ›  Edit Weblog > Automatically turn URLs and email addresses into links?

Is set to No.

Mike Boyink

by Mike Boyink (Author)

Date: Monday, February 9th, 2009
Comment: #6

Actually, that probably isn’t it.

Can you post your code - but surround it with [ code ] and [ / code] tags?  Remove the spaces…and EE will preserve your markup and EE code.

Picture of Diane

by Diane

Date: Monday, February 9th, 2009
Comment: #7

Mike, please disregard my previous post.  I went on to the next section and reread what you said about uploading my image.  Since I am working on a local WAMP server, I thought I could skip that step - wrong!  It works now!

Thank you!

Mike Boyink

by Mike Boyink (Author)

Date: Monday, February 9th, 2009
Comment: #8

OK - cool deal!

Picture of Diane

by Diane

Date: Monday, February 9th, 2009
Comment: #9

You were right about the turning URLs to links option. So setting that and using the upload fixed the problem.

I assume that getting in the habit of uploading is a good idea for when I do move to the server?

Mike Boyink

by Mike Boyink (Author)

Date: Monday, February 9th, 2009
Comment: #10

Yes.

Picture of Chapman

by Chapman

Date: Sunday, March 29th, 2009
Comment: #11

Hi Mike,
Thanks for the great tutorial. I wonder is it possible to change the URL structure? I like it to make it more like simple like this products/category/accessories/
without the “list” word. thanks

Mike Boyink

by Mike Boyink (Author)

Date: Sunday, March 29th, 2009
Comment: #12

Hi Chapman -

Yes, that’s possible.  Essentially what you do is combine products/index and products/list and use EE segments and conditionals to look at the URL and display the appropriate content.

Picture of Roy

by Roy

Date: Monday, April 27th, 2009
Comment: #13

Your tutorial have really help me out in learning EE.  I am building a portfolio site and am have a little problem.

My category names {category_name} displays all my categories even though I set show_empty=“no”.  The code below is between {exp:weblog:entries weblog=“portfolio” disable=“member_data|trackbacks” limit=“1”}  {/exp:weblog:categories}

<div id="pagTxt">viewing {exp:weblog:categories weblog="portfolio" style="linear" show_empty="no" } {category_name}{/exp:weblog:categories} {current_page} of {total_pages}</div

Any idea why it shows all the category names?

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, April 28th, 2009
Comment: #14

Hi Roy—

Looks like you’ve posted on the EE forums as well so probably best to focus there as this isn’t directly related to this tutorial.

Picture of Juliano Moreira Dasilva

by Juliano Moreira Dasilva

Date: Tuesday, June 30th, 2009
Comment: #15

Hi Mike, I’m a bit confused here. My products page shows up fine as expected, with all the categories accessories, drivetrain and interior. I have also created a template called “list” which display the data that I had added thru publish > products. The issue here is that when I click on the link “view Products” on the products page, I get the home page instead the product listed. Any clues? Thanks for you help.

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, July 1st, 2009
Comment: #16

Hi Juliano

I think I know…but learning to troubleshoot these issues is key to becoming productive with EE…:)

So here’s a clue. Loading the home page when you expect something else is usually EE’s default 404 process at work.

Picture of Juliano Moreira Dasilva

by Juliano Moreira Dasilva

Date: Wednesday, July 1st, 2009
Comment: #17

Mike, what a stupid mistake! After investigating the code, I realized that I had created the product group template as “gb_product” as opposed to just product. I fixed the path=gb_product/list and everything looks fine. I need to pay more attention to my code. Thanks and sorry to bother you for such a stupid mistake.

Picture of Michael

by Michael

Date: Tuesday, February 9th, 2010
Comment: #18

I was wondering is it OK to display the ‘category_heading’ tag without anything inside? In my case I don’t want to display the category name or description on my products list page. I have tried it and it seems to work OK but was wondering if it’s bad EE practice and may lead to issues doen the road?

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, February 9th, 2010
Comment: #19

If that’s all you need to show then you’re fine.

Picture of Michael

by Michael

Date: Tuesday, February 9th, 2010
Comment: #20

Great, many thanks for the response.

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, February 16th, 2010
Comment: #21

Hey Larissa -

Since this is something a bit different than the tutorial is working through it’s probably better posted in the EE Forums where more eyes will see it.

In general single entry pages are treated differently than category pages in EE—however you can pull category content on a single entry page you typically use the {category}{/categories} looping pair for the weblog entries tag.

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, February 16th, 2010
Comment: #22

Hey Larissa -

I really don’t mean to be “that way” about it—but I am going to point you back to the forums on this one as it is outside of what’s being covered in the tutorial above.

While I don’t mind supporting the tutorials I have here on Train-ee what I want to prevent from happening is becoming “EE Support V2” since 1st-Party tech support is included with your license and they have paid staff to help in that respect.

Picture of tommaso

by tommaso

Date: Thursday, March 11th, 2010
Comment: #23

Thank you Mike, very useful tutorial (and still after one year!)
I got here to this point and I wonder how could I render the url to (assuming list url segment is already been eliminated)
products/accessories/
instead of
products/category/accessories/

I tried to turn off “Use Category URL Titles In Links? ” in global weblog preferences, but this gives
products/C1/
instead of the category name

Any help would greatly be appreciated!
Thanks.

Picture of tommaso

by tommaso

Date: Friday, March 12th, 2010
Comment: #24

I found a thread in ee forum about this:
http://expressionengine.com/forums/viewthread/86353/

Picture of tommaso

by tommaso

Date: Friday, March 12th, 2010
Comment: #25

Hi, just to let you know if someone had the same wish to reduce the url, and is working with ee core,
I resolved my problem by substituting ee query module with this “category id” plugin
http://expressionengine.com/forums/viewthread/80262/

Just remember to use {exp:category_id ... parse=“inward”} if you want to use it as parameter for other tags.

If you want the final template send me an e-mail.

Picture of Giampiero

by Giampiero

Date: Thursday, October 7th, 2010
Comment: #26

Hi Mike, thanks for your great tutorial. I am seriously thinking to buy your book updated for EE2.
Now, you list here just 2 or 3 products. What if you have 100 or more items in one category?
The user should have filters to narrow down the selection.
What should be a good strategy to achieve that? Subcategories? Using custom fields? Any idea?
Can you give some tip? Thank you!

Giampiero

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, October 7th, 2010
Comment: #27

Hi Giampiero -

It’s tough to say without knowing more.  I might split up products into more than one weblog/channel.  Or use subcategories.  Or use relationships.  Or use tags.  ;)

It would all depend on the site, the design, the client etc.

Picture of Giampiero

by Giampiero

Date: Friday, October 8th, 2010
Comment: #28

Let’s say I have over 1000 products splitted in 10 main categories. The route I took is the same as your tutorial. One of the main categories is for example meat and subcategories are beef, pork, sausages… So, clicking on “beef” the page shows up 20 items. I would like to have more sophisticated filters (i.e. taste, origin…) and was thinking about tags. The best is to get something like: http://www.alessi.com/en/category/clocks-153/1/4
Maybe it is too sophisticated but It is better thinking great… I do not even know now if EE is the right tool, but I think it is.
By now, can you just suggest me a way to filter by subcategories? Or would you advise a better strategy? Thanks

Mike Boyink

by Mike Boyink (Author)

Date: Friday, October 8th, 2010
Comment: #29

From a URL/functionality perspective subcategories function the same as categories.  Category hierarchy is for display only. In other words, once you’ve clicked to a subcategory you’ll lose the parent category in the URL.

There is also the search parameter for the channel/weblog entries tag - where you could create a drop-down with unique values then search for those values.

In any event, the more filtering you want users to be able to do the more you’ll be working with custom URL structures, segment variables, and possibly custom queries.

But now we’re getting past the point of the comments here on Train-ee, which is really to support the content of the tutorial.  I’d suggest a post over the EE forums for more input from a bigger community…;)

Picture of Giampiero

by Giampiero

Date: Friday, October 8th, 2010
Comment: #30

When in a Product List page, (in your working example http://small-business.train-ee.com/index.php/products/list/category/accessories/ ) I have tried this:
{exp:channel:categories channel=“products” backspace=“6”}
{category_name}
{/exp:channel:categories}
I can get a full list of ALL categories and subs, with working links. Is there any method to limit the category display to the active category (accessories) with child categories only?
This filter could be enough for me.
And sorry if I am past the point…
Thanks for your support, again

Picture of Harry

by Harry

Date: Wednesday, November 3rd, 2010
Comment: #31

Hi Mike. Really enjoying this tutorial, but am stumbling on the last step of this chapter (11). Trying to get the category links together and have followed your instructions. However, using the path=products/list in my template produces URLs like this: .../index.php/site/products/list/category/drivetrain

I know that the site segment shouldn’t be there, and I can get rid of it if I change the name of my site’s index page back to just index.php, but then my homepage doesn’t load properly. I think an earlier comment touched on this and I checked all the code and can’t find out what’s going on. Any ideas?

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, November 3rd, 2010
Comment: #32

Your site homepage should only be Index.php. Not sure why you need site there Is that template set to be the site home page?

Picture of Harry

by Harry

Date: Thursday, November 4th, 2010
Comment: #33

Cheers Mike, I’ve set the site template group to be my homepage and all is well. Thanks for the swift reply!

Picture of Maria Johnston

by Maria Johnston

Date: Wednesday, January 12th, 2011
Comment: #34

Hi Mike,

Thanks for the tut! My simple question. I want to have a page that lists all my 4 categories, and the projects within each. But I don’t want them to appear in a random order, but ordered by category. So, Category #1: projects A, B and C; then Category #2: projects D, E and F, etc…

I’ve tried this and all I’ve achieved is having every project appear in every category, like so: Category #1: A, B, C, D E, F,; Category #2: A, B, C, D E, F; etc. So, even I did specify a category for each project, they are acting like they belong to all 4 categories.

If it helps here’s the code:

{exp:weblog:categories weblog=“projects_new” style=“linear” show_empty=“yes”}       
    {category_name}
    {exp:weblog:entries weblog=“projects_new” disable=“member_data|trackbacks” style=“linear”}       
    {project_name}
    {/exp:weblog:entries}
    {/exp:weblog:categories}

(I got rid of the html, left the expressions)

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...

dy>