Starting on the Products templates.

In this chapter of the Building an ExpressionEngine Site Series, 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 Overview text published.  This new page will display the category content we created and defined in Chapter 8.

Creating the Product Index Template
To create the Products Index template we’ll copy one of our existing templates as a starting point, then tweak it to suit:

• In the Templates tab of the EE Control Panel, find your template group and click “New Template” in the center column
• Name your new template.  I’m calling mine “chapter_9_products”
• In the Default Template Data box, click the bottom radio button and choose to duplicate your existing About template

Editing the Product Index Template
Now we need to tweak the template to make it show Product Categories rather than About content. (Note - a text version of the completed template is included further down in this chapter):

• Find your new template and click its name to edit
• Change the value of the “my_page_title” in the first embed to suit.  I’m going to call mine “Chapter 9 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 list 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 go create this entry yet
• For now, just select and delete the main weblog:entries tag in the “left_side” div.  We’ll come back to this spot momentarily
• Click “Update” to save your changes

Updating the Main Navigation Template
The Main Navigation template needs to be updated so it has the logic for this new page.  Find the template in the template group that holds all of your embedded templates, and copy the list item for the about tab, paste it over the existing Products list item, and then update the code in the EE conditional, the page it’s linking to, and the link text. 

Here is the text version of my updated Main Navigation template: chapter_9_main_nav.txt

Getting There
Once you save the changes to your 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 like my screen capture here.

Section Intro
Let’s get the section intro in place now.  In 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
OK - 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 weblog:categories tag.  The code needs to go in the “left_side” div where the previous weblog:entries tag was.

Here’s a text version of the updated Products Index template: chapter_9_products_index.txt.

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

• The weblog name is required unless you only have one weblog in your site
• 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 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.

Chapter Results
Here then is our rendered Products Index page, showing the correct title, section intro, and listing our categories and descriptions.

In Chapter 10 we’ll improve this page by adding images for each category, and we’ll create the category template that each category listing will link to.

On to Chapter 10.
Back to Chapter 8.