14 - Implementing the Services Section

In this chapter, I’ll work you through implementing the Services section of our example site.  Between using EE objects that are already created (Field Groups, Category Groups, etc.) and copying/tweaking existing templates, I can get you through it in one chapter.

 
Download the EE Code for 14 - Implementing the Services Section

Wa-a-ay back in Chapter 3 we looked at the possibility of the Services section sharing a Category Group with the Products section.

I still think this is a good idea, as many businesses will offer a set of products and services that are related to each other.  Being able to show those relationships on the website would then be valuable - to ensure that clients/users can be fully served, and (from a business perspective) to not miss out on potential up-sell opportunities.

Content Relationships
Now I’ve gone and used the word “relationships,” so I should take a moment and explain the approach here.

ExpressionEngine has a few different ways of, generically speaking, relating content.  One way is weblogs - if two posts are in the same weblog they are inherently related.

Another way is categories. Having two posts assigned to the same category establishes another content relationship between those two posts.  You can think of two posts in the same category as being more closely related than two posts in the same weblog but not in the same category.

Now let’s push it another way. Category groups can also be assigned to more than one weblog.  So, if two posts are in different weblogs but assigned to the same category there is a relationship there that we can use to display those two posts on the same page.  This is the approach I’ll be assuming.

EE also allows more formal content relationships.  You can review the EE documentation for these.

These formal relationships are also valuable, but are more advanced. I think it’s best to get a grip on the ins and outs of categories before looking at formal relationships.

Having said all that, this chapter will only focus on getting the Services section implemented.  In the next chapter we’ll look at tying the Products and Services together to display their relationships on the website.

OK - so here’s the overview list of what needs to happen for the Services section:

  • New Services Weblog, using existing Field Group and Category Group
  • Content entry
  • New Services Template Group
  • Template copying/tweaking
  • New section intro post in Miscellaneous Content Weblog
  • Update embeds/main_nav template

New Services Weblog
You’ve created a couple weblogs now, so I’m not going to walk through the specific steps (you can review earlier chapters if need be).  Just create your new weblog, and name it.  I’m naming mine with a Full Weblog Name of “Services” and a Short Name of “services”.

Once your weblog exists, use the Edit Groups link to assign it a Field Group of Simple Content and a Category Group of Products_Services.

Content Entry
Your new weblog is empty, so best to get some content in there before moving on.  Even if it’s “Greeking,” without some content you won’t really know if your templates are working or not.

Enter about a half-dozen posts, and remember to assign each one to a category; two per category should work well.

New Template Group
Just like in our Products section, it makes sense, both for nicer URLs and better template organization, to put our services templates in their own Template Group.

So create a new Template Group, and name it “services.”

You can take a big shortcut here by choosing to duplicate the products Template Group by choosing it in the drop-down labeled Duplicate an Existing Template Group?

Template Tweaking – Index
Now let’s go through and edit these new templates to work for Services rather than Products.

To the services/index template, I had to change the following:

  • my_page_title variable
  • my_location variable
  • my_url_title variable
  • Weblog names
  • Link paths (change the Template Group names from products to services)
  • Text in the View Products text link

Small Change of Direction - Another Custom Category Field
I also removed the category photos and line manager information.  After reviewing the results, I’ve decided that the category description I wrote for the Products just doesn’t cut it for describing the Services.  I could re-write the description, but rather than making one description more generic I’d rather use another custom category field for describing the Services.  You may choose to do it differently.

I’ve added a custom field to the Products_Services Category Group, called “services_description” (text area, no formatting).  I’ve gone back and added a services-specific description to each of my existing categories.  I’ve also changed out the field in the services/index template, trading “category_description” for the new “services_description”.

Updated Index Template Code
My services/index template code now looks like this:

{embed="embeds/html_header" my_page_title="Services"}
<body>
    <
div id="content">
        
{embed="embeds/logo_title"}
        {embed
="embeds/main_nav" my_location="services"}
        {embed
="embeds/search_section_intros" the_url_title="services"}
        
<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="services" style="linear" show_empty="yes"}
                    
<h2 class="underline">{category_name}</h2>
                    <
p>
                        
{services_description}&nbsp;&nbsp;<a href="{path=services/list}">View Services >></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

Template Tweaking – List
To the services/list template I made the following changes:

  • Page title
  • Weblog name
  • my_location variable
  • the_url_title variable
  • Weblog names in main weblog:category heading tag and weblog:entry tag
  • Link paths
  • Linked text
  • Replaced “category_description” with “services_description”
  • Got rid of the images, and just made linked titles

Note that you could, if you desired more content on this page, use a new custom field set for the Services Weblog, and create a Summary field to use here.  Or, similar to what we did with the Latest Products section, use the Word Limiter plugin to pull the first 50 characters of text from the Page Body field.  At this point I’m going to keep this page simple with linked titles to each service description.

Updated List Template Code
My updated services/list template code now looks like this:

{embed="embeds/html_header" my_page_title="Services List{exp:weblog:category_heading weblog="services"} | {category_name}{/exp:weblog:category_heading}"}
<body>
    <
div id="content">
        
{embed="embeds/logo_title"}
        {embed
="embeds/main_nav" my_location="services"}
        {embed
="embeds/search_section_intros" the_url_title="services"}
        
<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="services"}
                    
<h3>{category_name}</h3>
                    
{if services_description}
                        
<p><i>{services_description}</i></p>
                    
{/if}
                {
/exp:weblog:category_heading}
                {exp
:weblog:entries weblog="services" disable="member_data|trackbacks" orderby="title" sort="asc"}
                    
<h2><a href="{url_title_path=services/detail}">{title} >></a></h2>                
                
{/exp:weblog:entries}
            
</div><!-- close left side div -->
        </
div><!-- close main content div -->
        
{embed="embeds/footer"}
    
</div>    <!-- close content div -->
   </
body>
</
html

Template Tweaking – Detail
To the services/detail template I made the following changes:

  • Page title
  • Weblog names
  • my_location variable
  • my_url_title variable
  • Weblog name in the weblog:entries tag
  • Changed fieldset in the weblog:entries tag


Updated Detail Template Code
Here is the updated code for the services/detail template:

{embed="embeds/html_header" my_page_title="Services Detail {exp:weblog:entries weblog="services" limit="1" disable="member_data|trackbacks|pagination" } | {title}{/exp:weblog:entries}"}
<body>
    <
div id="content">
        
{embed="embeds/logo_title"}
        {embed
="embeds/main_nav" my_location="services"}
        {embed
="embeds/search_section_intros" the_url_title="services"}
        
<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:entries weblog="services" disable="member_data|trackbacks" limit="1"}
                    
<h2 class="underline">{title}</h2>
                    
{page_body}
                {
/exp:weblog:entries}
            
</div><!-- close left side div -->
        </
div><!-- close main content div -->
        
{embed="embeds/footer"}
    
</div>    <!-- close content div -->
   </
body>
</
html

New Post in Miscellaneous Content Weblog
OK, with those three templates in place, the code is now looking for a section intro to pull with a url_title of “services”.  Since that doesn’t exist, we need to publish that into the Miscellaneous Content Weblog.

Once that’s published and saved, if you refresh any of your services templates they should load the new section intro.

Updating Main Navigation
Our main navigation still isn’t highlighting the Services section as active - and it’s not hooked up to the new templates.  Let’s fix that. In your embeds/main_nav template you’ll need to update the li for the Services section from:

<li><a href="#" ><span>Services</span></a></li

to:

<li><a{if '{embed:my_location}'=="services"class="selected"{/if} href="/index.php/services/"><span>Services</span></a></li


The Results
With the services templates in place and the main navigation updated, you should be able to refresh your site, navigate to the Services section and have it all work and navigate correctly.

 

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of pacochin

by pacochin

Date: Friday, November 21st, 2008
Comment: #1

Hi Mike,

GREAT Tutorials ! I followed from chapter 1 till 14 ! so far so good, the best tutorial for EE !

However, I need to point out here at chapter 14, you seemed to have missed out one thing. (if not mistaken)

services_description needs to be created at the custom fields for product_services Category, otherwise there are no data can be entered for Services Category.

at the Template services/index you reference to services_description.

but thanks for your tutorial, i managed to figure it out this piece is missing !

did u purposely miss it out to TEST us ?

u cheeky !
thks !

Picture of pacochin

by pacochin

Date: Friday, November 21st, 2008
Comment: #2

OOPS !! sorry !! i found its included !!!

i browse thru too fast to miss that…

sorry

Picture of asd

by asd

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

Im clicking on those referer links…. YOU DESERVE IT :)

Im in love with this CMS, like i said before…  programmers dream
hehe :)

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>