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.
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} <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. Here’s my working example.
Category Navigation
Previous Comments
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
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 “”.
by .(JavaScript must be enabled to view this email address)
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.
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.
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.
by .(JavaScript must be enabled to view this email address)
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!
by .(JavaScript must be enabled to view this email address)
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?
by .(JavaScript must be enabled to view this email address)
Date: Saturday, March 28th, 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
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.
by .(JavaScript must be enabled to view this email address)
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?
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.
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.
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.
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.
by .(JavaScript must be enabled to view this email address)
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?
by Mike Boyink (Author)
Date: Tuesday, February 9th, 2010
Comment: #19
If that’s all you need to show then you’re fine.
by .(JavaScript must be enabled to view this email address)
Date: Tuesday, February 9th, 2010
Comment: #20
Great, many thanks for the response.
by .(JavaScript must be enabled to view this email address)
Date: Monday, February 15th, 2010
Comment: #21
Thank you so much for this great tutorial. It helped me to make my site much more dynamic. But now I’m stuck on something and I was hoping (praying) you might be able to help!!
On my site, http://heyday.ehclients.com/index.php/site/index-test, each building (“Rock Row”, “Blox”, “4xFourplex”, or “Jack & Jill”) is a category, and I use a single template called “buildings” to load in the content for each category, using the exp:weblog:category_heading tag. So if you click on a building name in the navigation on the right, the “buildings” template is populated with content from the appropriate building/category. For example: http://heyday.ehclients.com/index.php/site/buildings/category/rock_row/
At the bottom of each building page is a blog feed—it shows entries related to the current building. On the right are the archives of that building’s blog entries. Now here’s where I’m stuck. When a user clicks on one of those entries, I want everything to stay the same except that that single entry loads below in the blog section. I was able to get this to work before I made the site dynamic, but now the entry loads into a general page without the category specific info—I guess because I’m not passing it through a category link. All I’m looking for to happen is to keep the category-specific info on the page and just change the blog entry below. Is this possible?
Here is the code for the archive links (for Rock Row building, which is category id “4”):
{if “{category_id}” == “4”}
{exp:weblog:category_archive weblog=“buildings” style=“linear” show=“4” orderby=“date” sort=“desc”}
{entry_titles}
{title}
{/entry_titles}
{/exp:weblog:category_archive}
{/if}
Any help would be greatly appreciated!! Thanks so much in advance!
by Mike Boyink (Author)
Date: Tuesday, February 16th, 2010
Comment: #22
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.
by .(JavaScript must be enabled to view this email address)
Date: Tuesday, February 16th, 2010
Comment: #23
Mike,
Thank you so much for your help. I was able to express some of the category info using the {categories} looping pair as you suggested.
The only thing that I can’t seem to work out still is that now, on the single entry page, I can’t get the archives to work properly. For some reason they are printing the title of the current entry over and over, despite the fact that, if you look at the source code, the urls surrounding the title links are correct. You can see this at:
http://heyday.ehclients.com/index.php/site/archives/driveway_install/
Any idea why this might be happening? I’ve been trying to sort it out for hours and can’t seem to crack it! Here is the code (for the first category):
<h4>Archives</h4>
{exp:weblog:entries weblog=“buildings”}
{if {categories}”{category_id}”{/categories} == “4”}
{exp:weblog:category_archive weblog=“buildings” style=“linear” show=“4” orderby=“date” sort=“desc”}
{entry_titles}
{title}
{/entry_titles}
{/exp:weblog:category_archive}
{/if}
{/exp:weblog:entries}
Thank you again so much! I did try posting to the forum btw but haven’t received any responses so I really really appreciate your insight….
L
by Mike Boyink (Author)
Date: Tuesday, February 16th, 2010
Comment: #24
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.
by .(JavaScript must be enabled to view this email address)
Date: Tuesday, February 16th, 2010
Comment: #25
Understandable—thanks anyways!
by .(JavaScript must be enabled to view this email address)
Date: Thursday, March 11th, 2010
Comment: #26
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.
by .(JavaScript must be enabled to view this email address)
Date: Friday, March 12th, 2010
Comment: #27
I found a thread in ee forum about this:
http://expressionengine.com/forums/viewthread/86353/
by .(JavaScript must be enabled to view this email address)
Date: Friday, March 12th, 2010
Comment: #28
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.
by .(JavaScript must be enabled to view this email address)
Date: Thursday, October 23rd, 2008
Comment: #1
Thanks for a useful tutorial… which saved me lots of time and headaches