
12 - Adding Product-Specific Pages
In this Chapter we will nudge the Building Series one step closer to a completed site. In this chapter we add a template to present product-specific pages, and do a bit of tweaking to the products/index and products/list templates.
The Product Detail Template
In the EE Control Panel, select your products Template Group and create a new template. I’m calling my new template “detail”.
Here is the code for the new template:
{embed="embeds/html_header" my_page_title="Product Detail {exp:weblog:entries weblog="products" 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="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:entries weblog="products" disable="member_data|trackbacks" limit="1"}
<h2 class="underline">{title}</h2>
<img src="{product_image}" alt="{title}" title="{title}" />
Number: <strong>{product_number}</strong><br/>
Color: <strong>{product_color}</strong><br/>
Dimensions: <strong>{product_dimensions}</strong><br/>
Weight: <strong>{product_weight}</strong><br/>
<br/>
<br/>
{product_description}
{/exp:weblog:entries}
</div><!-- close left side div -->
</div><!-- close main content div -->
{embed="embeds/footer"}
</div> <!-- close content div -->
</body>
</html>
You’ll notice that it’s not altogether that different from our products/list template - I actually copied that template to start with and made the following changes:
- Changed the title to use a exp:weblog:entries tag rather than a exp:category:heading tag.
- Deleted the exp:category:heading tag from the page body.
- Limited the exp:weblog:entries tags to pull only one entry - this is probably redundant since we are going to load this template with a url_title, which means it would only pull one entry anyway.
- Added the rest of the custom fields from the Products Weblog.
Now that this template is in place, we need to link to it from the products/list template.
Updating the Product List Template
Here’s the updated products/list template code:
{embed="embeds/html_header" my_page_title="Product List{exp:weblog:category_heading weblog="products"} | {category_name}{/exp:weblog:category_heading}"}
<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:category_heading weblog="products"}
<h3>{category_name}</h3>
{if category_description}
<p><i>{category_description}</i></p>
{/if}
{/exp:weblog:category_heading}
{exp:weblog:entries weblog="products" disable="member_data|trackbacks" orderby="title" sort="asc"}
<h2 class="underline">{title}</h2>
<a href="{url_title_path=products/detail}"><img class="category_image" src="{product_thumbnail}" alt="{title}" title="{title}" height="112" width="170" /></a>
{product_description}
<a href="{url_title_path=products/detail}">View Product Details >></a>
<div style="clear:left"></div>
{/exp:weblog:entries}
</div><!-- close left side div -->
</div><!-- close main content div -->
{embed="embeds/footer"}
</div> <!-- close content div -->
</body>
</html>
The significant changes are in the exp:weblog:entries tag that generates the list of products for a specific category. Note the use of the” url_title_path” variable. You can review the EE documentation for this variable.
I’ve used it to link both the thumbnail image and the View Product Details link, as the “url_title_path” will append the URL Title for a specific entry onto the link.
With this template updated, you should be able visit your Products section, choose a category, and get a category page where the images and product links are now active. Clicking a link should load the new products/detail template with the content for that product being displayed.
Updating the Products Index Template
I liked the linked thumbnails so well that I decided to update the products/index page to do the same thing – linking the images to the category view:
{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>
<a href="{path=products/list}">
<img class="category_image" src="{category_image}" alt="{category_name}" title="{category_name}" height="117" width="170" />
</a>
<strong>Line Manager:</strong> {category_manager}<br/>
<strong>Phone:</strong> {manager_phone}
</p>
<p>
{category_description} <a href="{path=products/list}">View Products >></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>
If you look at the code you can see that all I did was link the product_thumbnail using the same link as the View Products text link.
The Results
After loading these updated templates you should have linked images, and full products section navigation from the products index, to a category page, to a product detail page.
Category Navigation
by Gaurav
Date: Friday, December 12th, 2008
Comment: #1
Here again the {product_image} variable is not working. The images won’t show up.
What I have done for my images paths is given the absolute URL’s from your server instead of uploading them to my server. But that should also work shouldn’t it? I mean it is working as far as the {category_image}varible is concerned