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: Thursday, October 23rd, 2008
Comment: #1
Thanks for a useful tutorial… which saved me lots of time and headaches