15 - Using Categories to Display Services Related to Products and Vice-Versa
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.
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. Call it “related_services”:
<h3>Related Services</h3>
<div class="lcontent">
<ul>
{exp:weblog:entries weblog="services" disable="categories|pagination|trackbacks|member_data|custom_fields"}
<li><a href="{url_title_path=services/detail}">{title} >></a></li>
{/exp:weblog:entries}
</ul>
</div>
This template is just a simple exp: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 exp: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 exp:weblog:entries tag to be dynamic, as then EE will dynamically grab the category from the URL and use it to 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. Call it “related_products”:
<h3>Related Products</h3>
<div class="lcontent">
<ul>
{exp:weblog:entries weblog="products" disable="categories|pagination|trackbacks|member_data|custom_fields"}
<li><a href="{url_title_path=products/detail}">{title} >></a></li>
{/exp:weblog:entries}
</ul>
</div>
Editing the Products Category Template
Now all we need to do is add our new embeds/related_services template into the existing products/list template. Let’s put this new content at the top of the right column so it won’t be missed:
<div id="right_side">
{embed="embeds/related_services"}
{embed="embeds/latest_news"}
{embed="embeds/latest_products"}
</div><!-- close right_side -->
Editing the Services Category Template
And same with the existing services/list template, just embeds/related_products instead:
<div id="right_side">
{embed="embeds/related_products"}
{embed="embeds/latest_news"}
{embed="embeds/latest_products"}
</div><!-- close right_side -->
The Results
With these new templates loaded you should be able to:
- Load the products/list template for a given category, and get related services in the right column/
- Load the services/list template for a given category, and get related products in the right column
Here’s my working example.
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, the possibilities grow even more.
Category Navigation
Previous Comments
by Mike Boyink (Author)
Date: Wednesday, December 31st, 2008
Comment: #2
Yep - try this:
{exp:weblog:entries weblog="services" disable="categories|pagination|trackbacks|member_data|custom_fields"}
{if count==1}
<h3>Related Services</h3>
<div class="lcontent">
<ul>
{/if}
<li>
<a href="{url_title_path=services/detail}">{title} >></a>
</li>
{if count==total_results}
</ul>
</div>
{/if}
{/exp:weblog:entries}
by
Date: Wednesday, December 31st, 2008
Comment: #1
Is there a way to not display the <h3> header “Related Services” on the Products page right content area if there are no related services? I would imagine you have to use conditionals, but I can’t figure it out.