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.
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} <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. Here’s my working example.
Category Navigation
Previous Comments
by Gaurav
Date: Thursday, December 11th, 2008
Comment: #2
Oops. I think that I forgot to add my URL:
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?
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.
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
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.
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.