09 - Starting on the Products Templates

In this chapter we’ll begin to code the Products section of the site—getting the Products index page in place, updating the main navigation, and getting the section intro text published.  This new page will display the category content we created and defined in Chapter 8.

 
Download the EE Code for 09 - Starting on the Products Templates

Creating a Products Template Group
This is a point where you will make decisions that will affect the URLs that your site will end up with.  How? By choosing to organize your templates into additional Template Groups.

There will be three templates required for our approach for the display of products:

  • Index – this will display the list of product categories and descriptions
  • List – this is the category view, and will display the list of products assigned to the category that the user has selected
  • Detail – this will be our single-view for a specific product

We could put all the products templates in the existing site Template Group.  We would then have URL structures of:

  • site_root/index.php/site/products (index view)
  • site_root/index.php/site/products_list/category/category_name/  (category view)
  • site_root/index.php/site/product_detail/product_name/  (single-product view)

However if we create a new Template Group for the products templates then our URLs will be:

  • site_root/index.php/products/  (index view)
  • site_root/index.php/products/list/category/category_name/  (category view)
  • site_root/index.php/products/detail/product_name/  (single-product view)

Overall I prefer the second set approach as it will be a bit shorter and more semantic.  We’ll also benefit from a bit of template organization as well.

To create a new Template Group from the Templates tab of the EE Control Panel:

  • Click the large Create a New Template Group button.
  • Choose “products” as your Template Group name.
  • Click Submit.

Creating the Product Index Template
We need to update the existing EE-created index template in our new Template Group, so let’s first go copy the template we want to start with.

  • In the Templates tab of the EE Control Panel, open your site/about template for editing.
  • Select all the text and copy it to your clipboard.
  • Open your products/index template for editing.
  • Paste in the code from the site/about template.
  • Save your changes.

Editing the Product Index Template
Now we need to tweak the template to make it show Product Categories rather than About content.  Find your new products/index template and click its name to edit, then:

  • Change the value of the “my_page_title” in the first embed to what you want the browser title to be.  I’m going to call mine “Products”.
  • Change the value of the “my_location” variable in the embed that brings in the main navigation to “products”. This will tell the main navigation list which item to apply the active class to, so when the page renders the proper tab is activated.
  • Change the value of the “the_url_title” in the embed that brings in the search box and section intros.  Enter a value of “products”.  Note that we need to create this entry yet.
  • For now, just select and delete the main exp:weblog:entries tag in the “left_side” div – leaving the main content area empty.  We’ll come back to this spot momentarily.
  • Click Update to save your changes.

Your code should look like this:

{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">
            </
div><!-- close left side div -->

        </
div><!-- close main content div -->
        
{embed="embeds/footer"}

    
</div>    <!-- close content div -->
   </
body>
</
html

Updating the Main Navigation Template
The Main Navigation template needs to be updated so it has the link to this new section:

  • Open your embeds/main_nav template for editing.
  • Copy the list item for the About tab.
  • Paste it over the existing Products list item.
  • Update the code in the EE conditional, the page it’s linking to, and the link text.
  •  
  • Save your changes.

Here is my updated embeds/main_nav template:

<div id="menu">
    <
div class="submit">
        <
ul>
            <
li><a{if '{embed:my_location}'=="home"class="selected"{/if} href="{homepage}" ><span>Home</span></a></li>
            <
li><a{if '{embed:my_location}'=="about"class="selected"{/if} href="/index.php/site/about/"><span>About</span></a></li>
            <
li><a{if '{embed:my_location}'=="products"class="selected"{/if} href="/index.php/products/"><span>Products</span></a></li>
            <
li><a href="#"><span>Services</span></a></li>
            <
li><a href="#"><span>Weblog</span></a></li>
            <
li><a href="#"><span>Contact</span></a></li>
        </
ul>
    </
div>
</
div

Getting There
Once you save the changes to your embeds/main_nav template, bring up your site in a web browser.  You should be able to navigate to the Products section, the main navigation tab should highlight correctly, the page title should be correct, but the page content should be blank.

Section Intro
Let’s get the section intro in place now.  Select your Miscellaneous Content Weblog and create a new post, making sure the url_title is “products”.  Publish your new entry, refresh your Products page, and your section intro text should appear next to the search box.

The Category Listing
Now that the shell of the Products page is in place let’s get to the fluffy nougat center.  This index page needs to list all of our Products categories along with the description.  The EE tag for this is the exp:weblog:categories tag.  You can review the documentation for this tag.

The code needs to go in the “left_side” div where the previous exp:weblog:entries tag was.

Here’s a look at the updated version of the updated 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>{category_description}&nbsp;&nbsp;<a href="#">View Products >></a></p>
                
{/exp:weblog:categories}

            
</div><!-- close left side div -->
        </
div><!-- close main content div -->
        
{embed="embeds/footer"}
    
</div>    <!-- close content div -->
  </
body>
</
html

Looking at the exp:weblog:categories tag, here is what’s happening:

  • The weblog name is required unless you only have one weblog in your site – again just good practice to always specify it.
  • The style parameter returns our list without the unordered list formatting that the “nested” alternative would.  I did this so I could apply styling that matches our existing pages.
  • The show_empty=“yes” parameter is currently letting the list show all of our categories.  I typically use this while setting up a site, then once the templates are all coded and styled correctly will go back and change this parameter to “no” so that a live site won’t show categories that have no entries in them.

I’ve just put placeholder links in - as we have not yet developed the category template that this page will link to.  Note that the category_description field does not return, like weblog fields can, with XHTML formatting applied—hence the need for adding the p tags for proper markup.

Category URL Titles in Links
This is a good place to mention – EE lets you choose between two methods of indicating categories in URLs.  One is ID numbers, and the other is the Category URL Title.  For the purposes of this tutorial (and most of the sites I’ve ever implemented), Category URL Title is preferred.  Here’s how you specify that:

In the EE control panel, go to Admin > Weblog Administration > Global Weblog preferences.  The first option is Use Category URL Titles in Links?  Set this to Yes.  Leave the Category URL Indicator keyword of “category” in place.

The Results
After making the changes in this chapter you should be able to bring up your Products index page, showing the correct title, section intro, and listing the categories and descriptions.

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of Gaurav

by Gaurav

Date: Thursday, December 11th, 2008
Comment: #1

Hi,

Whenever you go to either the About page or Products page from the Home page everything works just fine. However if you try going to the Products page from the About page or vice versa, it does not link correctly. Also, suppose you are on the About page and you click on the About tab again the URL starts getting appended in the address bar. Exactly the same thing happens with the Products page. I have tried following your code to the hilt. Then why is thas happening?

Regards,

Gaurav.

Picture of Gaurav

by Gaurav

Date: Thursday, December 11th, 2008
Comment: #2

Oops. I think that I forgot to add my URL:

http://www.effectwave.com/ee/index.php

Picture of Gaurav

by Gaurav

Date: Thursday, December 11th, 2008
Comment: #3

Hi,

I think I got it. I think this is the correct code for the top menu tab.

<li><a href=”http://www.train-ee.com/courseware/products/”><span>Products</span></a></li>

Actually, instead of {homepage}, I was typing ‘index.php’. Could you please also correct it in your code on this page?

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, December 11th, 2008
Comment: #4

Not sure why you have a train-ee path in your code, but overall it looks like you have EE installed a directory lower than I do.

My code will work if EE is installed at the root.

Picture of Gaurav

by Gaurav

Date: Thursday, December 11th, 2008
Comment: #5

Well I got train-ee because I used this variable {homepage} in the URL. And I thinkbecause I am on your website it got substituted by the actual URL

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, December 11th, 2008
Comment: #6

Ah - yea that would do it.

Looking back at my code, it could be improved by using path variables for the links.

So the link to the products section would be:

<li><a{if '{embed:my_location}'=="products"class="selected"{/if} href="{path='products'}"><span>Products</span></a></li

I’m pretty sure that code will neutralize any differences in the installation location of EE, and in general is just a better approach.

Picture of Gaurav

by Gaurav

Date: Thursday, December 11th, 2008
Comment: #7

Ya, even this works. Thanks a lot.:)

Picture of Joshua

by Joshua

Date: Monday, January 12th, 2009
Comment: #8

For some reason when i update my embeds/main_nav template, the changes are not reflected on my site.  I’m using Ubuntu Linux 8.10 with Apache 2, PHP 5, and MySQL 5.0.67.  The link to the home page and the about page are correct, however, it seems like the new main_nav template’s changes aren’t being updated site-wide.  I’ve tried deleting the cache from my browser as well as from the EE CP (all caches).  Not sure where to go from here.  Thanks in advance for the help.

Mike Boyink

by Mike Boyink (Author)

Date: Monday, January 12th, 2009
Comment: #9

Usually when this happens it’s a naming issue - like you’ve named the template main_nav but call it as main-nav etc.

If you load the embedded template directly are the changes reflected?

Picture of tom

by tom

Date: Friday, January 16th, 2009
Comment: #10

re: Category URL Titles in Links?
How do i find what the Category URL Title is
how do i put it in the link?
from your demo it looks like:
products/list/category/drivetrain/
when i try:
{path=products/category/Other/}
i still get all the categories not just the ones for Other.
‘Other’ being my Category Management page, second column name for the category.

Mike Boyink

by Mike Boyink (Author)

Date: Friday, January 16th, 2009
Comment: #11

Hi Tom -

This chapter doesn’t cover creating the category links…keep reading for how to do that.

Picture of Michael Collett

by Michael Collett

Date: Thursday, June 18th, 2009
Comment: #12

Hi,

Not sure if you are still taking comments to this article but I will give it ago… On your finished example you have some images sitting off to the right. How did you get those images there? Did you use the ‘Category Image URL’ field or did you add some HTML to the ‘Category Description’ text area?

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, June 18th, 2009
Comment: #13

Hi Michael -

Images to the right…do you mean the Latest Product images?

Picture of Michael

by Michael

Date: Thursday, June 18th, 2009
Comment: #14

No sorry Mike I mean the category images that sit to the left on the products page not right. Also moving on to chapter 10 I see that you explain how to implement these and have now managed to do so. I think I got confused because your link at the end of chapter 9 showed them on the page, so I assumed they were supposed to be there at that point. It was not until I moved onto chapter 10 that I realized I was getting ahead of myself. I am new to EE and am working my way through your tutorial to get an idea of how to work with it. The tutorial has been great so far so thanks for writing it and coming back to me… I will continue on. Oh, and it did not help that I don’t seem to know my left from my right. If I post again I’ll work on that one.

Picture of Paul

by Paul

Date: Monday, August 10th, 2009
Comment: #15

Hi Mike,

Brilliant tutorial here, one of the best ones I’ve found.

Just one difficulty. So far ;)

The images on the product page. They’re uploaded via the upload dialog, and also linked via the dynamic one. There’s also only two images I’m using as a debug mechanism - i.e. have them both in the same directory for thumbnail and large. I have “Product 1” image linking as the full link address, and “Product 2/3” as the dynamic one. Both neither seem to show the image. I’ve also copied the none-dynamic link into the browser, and it shows. Just not on the product page.

Any ideas?

Many thanks :D Loving this!!

Mike Boyink

by Mike Boyink (Author)

Date: Monday, August 10th, 2009
Comment: #16

Hi Paul -

Usually images not showing are a pathing issue.  The bset way to debug is to load the rendered EE page and compare the rendered path to a known good path.

Picture of Michael Duncan

by Michael Duncan

Date: Monday, January 4th, 2010
Comment: #17

Following your brilliant tutorials Mike, an excellent resource for people starting out with expression engine!

I’ve just noticed a small issue when not using the path= approach, the ‘index.php/templategroup/template’ is appended each time the link is clicked, so if the page was loading sluggishly, chances are a user would click the link again as I usually do which would result in example.com/index.php/templategroup/template/templategroup/template - an invalid url.

Keep up the great work!

Picture of Michael Duncan

by Michael Duncan

Date: Monday, January 4th, 2010
Comment: #18

Actually I’ve just looked at your working example and it seems it was just me that was having this issue. Don’t know why?

Mike Boyink

by Mike Boyink (Author)

Date: Monday, January 4th, 2010
Comment: #19

Not sure…but all in all (as I mentioned in an earlier comment) using path variables is a good idea (and one that will be included in the planned revision for the book this series was the genesis for).

Picture of Ben

by Ben

Date: Monday, October 25th, 2010
Comment: #20

Hi Mike.  Maybe I’m having trouble because I’m going through this tutorial on EE 2.1.1, but I cannot find any place where I should upload images when entering info for a new product. 

I hope you can help.  Thanks.

Mike Boyink

by Mike Boyink (Author)

Date: Monday, October 25th, 2010
Comment: #21

Yes - the image uploading process is all different in EE 2x.  You can either create a field with the “file” field type or still allow file uploads in a text area.

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>