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







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