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? 

 
Download the EE Code for 15 - Using Categories to Display Services Related to Products and Vice-Versa

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

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 Entry   

Next Entry >>

 

Previous Comments

Picture of David Clugh

by David Clugh

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.

Mike Boyink

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} 
Picture of Andrei Gonzales

by Andrei Gonzales

Date: Friday, July 24th, 2009
Comment: #3

Is it possible to display related entries on a single entry page?

ex:

weblog1
-> category1
—> subcategory1
—-> product 1 (page being viewed)
—-> product 2
—-> etc.
—> subcategory2
-> category2

etc.

Is it possible when you’re in the product1 (single entry / post page) to display a list of posts from the same sub-category? (product2, etc.) EE does it on default if you’re viewing category1, and click subcategory1 (all the related entries under subcategory1 are displayed). However, when you enter the actual “details” page itself, the related entries disappear?

Mike Boyink

by Mike Boyink (Author)

Date: Friday, July 24th, 2009
Comment: #4

Hey Andrei

This happens (using the coding approach on this tutorial) because when you click through to that single entry page you are no longer viewing a category page. 

On a single entry page EE no longer sees category information in the URL it can no longer use that to determine what content is related.

If you are just looking to pull other posts from the same weblog in the same category then you’ll want to investigate the related categories mode parameter for the weblog entries tag.

Picture of Andrei Gonzales

by Andrei Gonzales

Date: Friday, July 24th, 2009
Comment: #5

Hi Mike,

I actually did try that first. But EE’s single page only finds the full category parent, then lists down all the entries, regardless of the subcategory. So if I want to list down the entries under subcategory1 only, EE lists down all the entries from subcategory2 as well, because they share the same parent category.

The only plausible solution I could think off was to create a separate template for the related categories, use the categories or categories_archive tag, embed it into the single page template, and pass an assigned variable identifying which category the entries should be pulled from.

(Haven’t had the chance to try it if it works though.)

It’s a bit frustrating to be honest. Also, I’d like to express thanks. I’m sure you hear it often, but your tutorials are a massive help to first time EE’ers such as myself.

Mike Boyink

by Mike Boyink (Author)

Date: Friday, July 24th, 2009
Comment: #6

EE by default assigns parent category when you select a subcategory.

You can turn off that behavior under Global Weblog Prefs.

That might help…

Mike Boyink

by Mike Boyink (Author)

Date: Friday, July 24th, 2009
Comment: #7

..and thanks for the comment!

Picture of Andrei Gonzales

by Andrei Gonzales

Date: Friday, July 24th, 2009
Comment: #8

You’re welcome. I gave the global web prefs a go, and subcategory2’s entries are still being displayed. I think it’s time for that embed idea. =)

Mike Boyink

by Mike Boyink (Author)

Date: Friday, July 24th, 2009
Comment: #9

Changing the setting doesn’t update existing content.  Edit your entries to remove the parent category selection.

Picture of Andrei Gonzales

by Andrei Gonzales

Date: Friday, July 24th, 2009
Comment: #10

Sorry, I need to correct that (in case anyone is reading our conversation) - the global web prefs DID work. Now subcategory2’s entries are not showing.

Picture of Andrei Gonzales

by Andrei Gonzales

Date: Friday, July 24th, 2009
Comment: #11

Yes, I missed that. I thought it was something automatic. Thank you again Mike.

One last question though: why has the current entry (the page you’re on) disappeared from the list of related entries?

Mike Boyink

by Mike Boyink (Author)

Date: Friday, July 24th, 2009
Comment: #12

That’s by design of the tag - the list is just other related entries.

Picture of Andrei Gonzales

by Andrei Gonzales

Date: Friday, July 24th, 2009
Comment: #13

Well, looks like I’ve pulled it off (full list of related entries on a single entry page).

First, I used your advice to not auto-assign the parent category.

Second, started off with a new embeded template (I called it related_modules) which was to contain all of the entries from the module’s category: (turns out dynamic off was the key).

{exp:weblog:entries weblog=“electives” sort=“asc” dynamic=“off” category=”{embed:this_cat_id}”}             
<li>{title}</li>
{/exp:weblog:entries}

Then I went back into the single entry template, and passed the category variable through the embed tag:

{embed=”{template group}/related_modules” this_cat_id=’{exp:weblog:entries weblog=“electives”}{categories}{category_id}{/categories}{/exp:weblog:entries}’}

Voila. It worked. Full list of related entries on the single entry page. :)

Picture of Andrei Gonzales

by Andrei Gonzales

Date: Friday, July 24th, 2009
Comment: #14

By the way, I just wanted to say you deserve full credit. The idea came from re-reading your tutorials. :)

Mike Boyink

by Mike Boyink (Author)

Date: Saturday, July 25th, 2009
Comment: #15

Hey Andrei -

Glad to hear you found a solution (I won’t take full credit..;).

Are your entries ever going to be assigned to more than one category?  If so you might either have to figure out how to have the calling code create a piped or “anded” list to send through as the embed variable, or you can use:

{categories limit="1"}{category_id}{/categories} 
Picture of Andrei Gonzales

by Andrei Gonzales

Date: Sunday, July 26th, 2009
Comment: #16

Thankfully, yes, each entry is only meant for one category. Although you’re right, I should put a limit just in case.

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...

dy>