So in Chapter 14, we implemented the Services section of our model site, and assigned those services to the same categories as our existing Products.

In this chapter, we’ll display Services related to Products on the Products category pages, and Products related to Services on the Services category pages.  Confused yet? 

We’ll need two new embedded templates (one each for related products and related services), and we’ll need to edit the two existing category templates for those sections. 

Note that the full-text versions of the templates will be available at the bottom of this post.

New Related Services Template
This template will go on the Products category page, and pull in the Services that are assigned to the same category as the currently-viewed Products category.  The template is a simple one, and gets saved into your “embeds” template group:

This template is just a simple weblog:entries tag, with as much disabled as possible that returns an unordered list of linked titles.

But wait - don’t we need to somehow tell the tag what category we need?  There is the category parameter and we could grab the category from the url using segments and.....

Hold on.

I’ve found that just about every time I’ve started down the path of forcing the weblog:entries tag to display a specific category it’s been unnecessary.  Why?  Because EE is going to do it anyway.  The most important thing to note about this template is what isn’t there - and that’s the “dynamic="off” parameter that is usually required for sidebar content to display correctly. 

In this case, we want the weblog:entries tag to be dynamic, as then EE will dynamically grab the category from the URL and use it filter the list of services to just the ones that are the same category group as the products being displayed.

New Related Products Template
Got it?  Good.  Let’s make another one - this one to pull in products that are in the same category group as the Services category being displayed.  Save it into your “embeds” template group as well:

Editing the Products Category Template
Now all we need to is add our new Related Services embedded template into the existing product_list template.  Let’s put this new content at the top of the right column so it won’t be missed:

Editing the Services Category Template
And same with the existing services_list template, just embedding the related_products instead:

The Working Example
Ready to see this in action?  OK - let’s look at two sides of the same category - Accessories.  First, here is the Products List, showing our Accessories products in the main column, and related Accessories Services in the right column.  Now let’s flip to the other side - here is the Services List - showing the Services in the main column and the related Accessories Products in the sidebar.

I’ve seen a few posts in the ExpressionEngine forums wondering what Categories were really useful for - and I hope this shows one solid example.  Being able to group and relate content from different areas of your main navigation is often very handy to do - essentially letting you slice your site horizontally as well as vertically.  Keeping in mind that each weblog can have multiple category groups assigned to it and the possibilities grow even more.

Templates
Here are the full-text versions of the templates used in this chapter.  Note again that I have chapter-specific groups for my embeds, so you will likely need to edit those paths to match your setup.

• embeds/related_services:chapter_15_related_services.txt
• embeds/related_products:chapter_15_related_products.txt
• services_list:chapter_15_services_list.txt
• products_list:chapter_15_products_list.txt

Next up - beginning the Weblog implementation.

Back to Chapter 14.
On to Chapter 16.