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
Previous Comments
by Mike Boyink (Author)
Date: Friday, December 12th, 2008
Comment: #2
Please don’t hotlink to my images - not only is it a form of bandwidth theft (even if you’re just doing it on a testing/learning site) it’s not a good practice in general, and isn’t how the tutorial assumes the images will be loaded.
Also - it’s hard for me to help without more detail. In order to do any debugging I need to know the contents of the field, the code in the template, the rendered source code of the page, and what you’ve tried in order to get it working.
With images it’s usually a pathing issue - so do a view source on the rendered page, see what code is being generated, and if it does or doesn’t match up to the actual path to the file on the server.
by Gaurav
Date: Friday, December 12th, 2008
Comment: #3
Sorry about that. I will take them out today itself. But how do I get to you the code in the template? Shall I email you the passwords, etc.? Since this is the only thing which I am not able to solve.
by Mike Boyink (Author)
Date: Friday, December 12th, 2008
Comment: #4
Post it here in a comment, surrounded by [ code ] [ /code ] tags (remove the spaces.
by Gaurav
Date: Friday, December 12th, 2008
Comment: #5
Oh ok. Here is the link first of all
http://www.effectwave.com/ee/index.php/products/list/category/accessories/
You see that the images are not showing up, even though the path is correct. Anyways here is the 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_start" 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>
<p>
<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 content of the {product_thumbnail} is the same as you see on the view>source of the link I sent you
by Gaurav
Date: Friday, December 12th, 2008
Comment: #6
Also, if you click on the link the enlarged products also don’t show up and even the latest products on the side bar are absolutely empty. Thanks Mike.
by Mike Boyink (Author)
Date: Friday, December 12th, 2008
Comment: #7
The thumbs are related to the plug-in, so I dont provide support for that.
I’m still seeing train-ee paths for the large images.
Given that—did you look at the rendered path for the train-ee image?
The thumbs wont work until you get the large images working regardless.
by Gaurav
Date: Friday, December 12th, 2008
Comment: #8
Ya. I will be removing it shortly. I just want to see them working first. For example if you visit this link: http://www.effectwave.com/ee/index.php/products/
the images are showing up fpr the variable {category_image} even though they are from your server, then why not for {product_thumbnail} and {product_image} ? You can check the path for these images in the source code and see that they are linking in the right way. Then why don’t they show up for only these two variables?
by Mike Boyink (Author)
Date: Friday, December 12th, 2008
Comment: #9
I don’t think the img sizer plug in works with hotlinked images. Put the thumbs aside until your full size images are local and working.
At any rate, the path to the full size image on the product detail page isn’t right. Look again.
by Gaurav
Date: Friday, December 12th, 2008
Comment: #10
Also, in case you have access to my username and password, you can enter my account,so that you can take a look at everything.
And as far as the plugin is concerned, in case you don’t provide support, can you tell why it is not working? If it has a certain server requirement,could you please tell me what they are, so that I can talk to my webhost?
by Gaurav
Date: Friday, December 12th, 2008
Comment: #11
Here is the path to one of the detailed images from the source code. It is absolutely correct.
small-business.train-ee.com/images/products/water_tank.jpg
and it is from this page:
http://www.effectwave.com/ee/index.php/products/detail/beverage_tank/
And the img sizer plugn is only used for the latest products on the sidebar, not for the other images which are not showing up
by Mike Boyink (Author)
Date: Friday, December 12th, 2008
Comment: #12
As I noted in the other post, support for the imgsizer plugin can be found in the EE forums. Requirements are on the page where you downloaded it. Again get the full size images local and working before looking at the imgsizer.
I’m not going to login to your installation. These tutorials are offered free of charge, and I don’t mind helping to an extent, but at that point it crosses the line to tech support or consulting which are activities I do bill for.
And your path…not to be a jerk about it..but I want to help you learn vs. just pointing out the answers all the time…;) It’s still not correct. Or maybe “not complete” is a better way to describe it.
by Gaurav
Date: Friday, December 12th, 2008
Comment: #13
Well I really appreciate your support, but if the path is not complete then why does it lead to the fullsized image when you past it into the browser? Please do understand that I am very new to this stuff.
by Mike Boyink (Author)
Date: Friday, December 12th, 2008
Comment: #14
Yea - this is why at the start of this series I recommend that you be really familiar with html/css before starting with EE - otherwise it’s a lot to learn all at one time.
If you’re going to link to an image on another website you need the “http://” in the path. The browser assumes it when you paste in the path but it won’t in html code. See this reference page.
by Gaurav
Date: Wednesday, December 17th, 2008
Comment: #15
I have tried everything to make this work, but to no avail. Here is what is happening in my case:
1). The two variables: {product_thumbnail} and {product_image} are not outputting their respective contents correctly.
2). For example The content of {product_thumbnail} in the EE CMS for the product ‘Beverage Tank’ is: http://www.effectwave.com/ee/images/uploads/accessories/water_tank_tn.jpg which you can see is a full working path.
But if you view the source of the page at: http://www.effectwave.com/ee/index.php/products/list/category/accessories/ you will see that it adds some kind of an <a > tag for the <img > tag. And I believe that’s the reason the images are not showing up.
3). The same is true for the variable {product_image}. It is also not outputting its content correctly and inserting an <a > tag inside of the <img > tag.
Also, My code is exactly as yours, which I have already posted above and so are my variable names. In such a case why should these two variables not output their respective content correctly and make the images show up, like they do on your example website?
by Gaurav
Date: Wednesday, December 17th, 2008
Comment: #16
I think I should give you the contents of the two variable seperately for your reference. Here they are:
{product_thumbnail}
http://www.effectwave.com/ee/images/uploads/accessories/water_tank_tn.jpg
{product_image}
http://www.effectwave.com/ee/images/uploads/accessories/water_tank.jpg
These two variables are two custom fields inside of my ‘Products’ field group and they are not outputting their respective content correctly.
by Mike Boyink (Author)
Date: Wednesday, December 17th, 2008
Comment: #17
Well, here’s the thing. When you were trying to load my images from your site you would have needed the full path.
Now that you have them locally and used the file upload feature of EE you should have values of:
{filedir_8}water_tank_tn.jpg
Instead.
This was specified back in Chapter 8 during content entry.
Since you now have a full path, EE is automatically turning it into a link (behavior which can be turned off in the Weblog Configuration, under Posting Preferences, but shouldn’t be necessary if the images are specified correctly).
by Mike Boyink (Author)
Date: Wednesday, December 17th, 2008
Comment: #18
Note the number in the filedir variable will likely be different for you.
by Gaurav
Date: Wednesday, December 17th, 2008
Comment: #19
Ok. Thanks for your answers. They are helpful as usual :-)
My Small Business EE test website is working perfectly now.
by Andrei Gonzales
Date: Monday, April 6th, 2009
Comment: #21
How odd, I have a similar bug (yes, I know I’m a bit late to the party - great tutorial btw).
All my images work save for the first one. I actually copy-pasted your sample code and named all the fields exactly the same way (to minimize errors), but in the products list page, the first item never pulls the images correctly. This is the code I used in ee:
{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}
Which is, as you can see, no different. But on the 1st product item on my product list page, this is what I’m seeing from firebug:
<img class="category_image" width="170" height="112" title="Sample Product" alt="Sample Product" src="http://localhost/ee_test/images/uploads/thumb150.jpghttp://localhost/ee_test/images/uploads/thumb150.jpghttp://localhost/ee_test/images/uploads/thumb150.jpg"/>
It’s the same story with this item’s main image (the one in the detail page).
yet, this does not happen with the other items. Why?
by Andrei Gonzales
Date: Monday, April 6th, 2009
Comment: #22
Scratch that. It’s fine now. I must’ve hit the “add to field” bit once too often.
by Scott
Date: Friday, May 8th, 2009
Comment: #23
For the life of me I could not figure out what what up with the {product_thumbnail} issue, I’ve read most of the comments, saw how frustrated Gaurav and Mike seemed to be getting so I went back over my code…again and again and again…and again. Finally I saw it in the source code [img src=] now I use [<img
by Maria Johnston
Date: Monday, October 12th, 2009
Comment: #24
Thanks for the awesomeness. Quick question: I want to have a list of all products of a category in the detail page of each product of that category as well. Problem is, when I try to implement this just like I did in the category page, the page only lists itself—meaning the list only shows one product: that of the page I’m looking at.
Here’s the code I’m trying to use (note that in my website “products” are called “projects”).
{exp:weblog:entries weblog=“projects” disable=“member_data|trackbacks” style=“linear”}
{title}
{/exp:weblog:entries}
I would assume that EE “knows” that what I want is all the products of the same category as the product I’m looking at, but I assume wrong. How do I tell it?
Thanks!
by Maria Johnston
Date: Monday, October 12th, 2009
Comment: #26
Thanks for your quick response. Following your link, I found the parameter I needed: related_categories_mode. It worked like a charm. Thanks!
by Maria Johnston
Date: Tuesday, October 13th, 2009
Comment: #27
One more question. I’m stumped after searching in the documentation. I’m trying to fetch the content of one of the custom fields of my category from the single entry (detail) page.
Here’s my code:
<body {exp:weblog:category_heading weblog=“projects” disable=“member_data|trackbacks” style=“linear” related_categories_mode=“on”} class=”{category_body_label}” {/exp:weblog:category_heading}>
As you can see, all I’m trying to do is give the body tag a class taken from one of the custom fields of my categories. This code appears on the detail pages.
I tried with both the exp:weblog:category_heading (shown) and the exp:weblog:entries. I tried both with and without the related_categories_mode enabled. This seems like it should be easy, but I can’t figure it out.
by Mike Boyink (Author)
Date: Tuesday, October 13th, 2009
Comment: #28
Looking at the docs, the related categories mode, disable parameter, and style parameter dont apply to the category heading tag.
I’d pull those out and just try:
{exp:weblog:category_heading weblog=“projects”} class=”{category_body_label} {/exp:weblog:category_heading}">
by Maria Johnston
Date: Tuesday, October 13th, 2009
Comment: #29
Sadly, that didn’t work for some reason. It works on the category page, but not on the detail page.
by Mike Boyink (Author)
Date: Tuesday, October 13th, 2009
Comment: #30
Ah - sorry. I shouldn’t answer questions before coffee..;)
Yes, the category_heading tag is expressly for use on a category page. You want the {categories}{/categories} looping pair for the weblog entries tag.
by Denny
Date: Tuesday, July 13th, 2010
Comment: #32
I have been struggling with this as well…
The only thing, based on comments on this page, that seems to work for me is removing the src= from the {product_image}
To:
<img alt=”{title}” title=”{title}” >
This even works but leaves empty alt tags
alt=“bags” title=“bags” >:
<img alt=”{title}” title=”{title}” >
What could I possibly be missing?
Thanks for all your effort put into these tutorials! They’re a life saver for me!
by Mike Boyink (Author)
Date: Tuesday, July 13th, 2010
Comment: #33
Hey Denny - sorry, I’m not following what isn’t working for you. Is it just getting the product images to load?
by Denny
Date: Tuesday, July 13th, 2010
Comment: #34
Correct. The images will not load in products_detail / products_list.
If I remove the image placeholder and just use the tag {product_image}. The images load with their default alt tags.
Thanks Much!
by Mike Boyink (Author)
Date: Tuesday, July 13th, 2010
Comment: #35
What’s the content of the {product_image} field?
What’s the rendered source code look like when they don’t load?
The template assumes the images were loaded with the “URL Only” - I’m betting when they don’t work you have double image tags in the source.
by Denny
Date: Wednesday, July 14th, 2010
Comment: #36
You were 100% correct. You know, it’s the most obvious things I overlook after starring at it for hours…
I love Expression Engine and only recently converted from WP. As with everything new, it takes time understanding the basic behaviors of any new software.
The behavior in this case was how the images were added by default when inserting into a field. Once I removed the double image tag (the image tag added by default), everything displays as it should.
Thanks again for all your hard work and quick response.
by Mike Boyink (Author)
Date: Wednesday, July 14th, 2010
Comment: #37
Cool deal - glad you got it sorted!
Now you can start over with 2.1..;)
by Denny
Date: Wednesday, July 14th, 2010
Comment: #38
Well, since it’s all new to me and I’m opting for core at the moment anyhow, learning (more) new is no big deal ;)
Question: (You already deserve a beer!)
My link from my product list page doesn’t seem to be heading to the right place.
It does go to the product detail page, but it loads the same entry no matter what previous link I click from.
In my case I only have two entries, green and red. In the product list page, both red and green are listed as they should however, the link from both green and red go to the same detail page, (red).
I am using core and .htaccess rewrite to remove index.php from my URL My site is currently installed in a sub directory. Could that prevent url_title_path from working properly?
Thanks again!
by Mike Boyink (Author)
Date: Wednesday, July 14th, 2010
Comment: #39
Hey Denny -
What url is being generated by the link? Is the link code inside the weblog entries loop, and on the product detail page is the main weblog entries tag there still in dynamic mode (IE you haven’t set dynamic=“off”)?
If the two links that are being generated are correct (they have the URL title of the entry added to the path of the link) and your product detail page is still in dynamic mode then it probably is something with htaccess. Maybe this is the first case of EE generating URLs with 3 segments on the site and your rules aren’t covering that?
by Denny
Date: Wednesday, July 14th, 2010
Comment: #40
Yes, the URL does contain the the product name (alpha/products/detail/green/) but /red is the only one that appears.
The product list URL is displaying (products/list/C9/) instead of (products/list/category/drivetrain/) as your example displays.
Would I have to encase them in an if segment tag? I’m not sure I understand URLs with 3 segments?
Beer money is on it’s way!
by Denny
Date: Thursday, July 15th, 2010
Comment: #41
Sorry for the double post but, I changed this (Use Category URL Titles In Links?)
The URL’s now display the category name however, the link from the product list page refuses to point to the correct product detail…
by Mike Boyink (Author)
Date: Thursday, July 15th, 2010
Comment: #42
Three segment URLs are just template group / template name / url_title - a very typical EE URL construct.
I’d suggest undoing the htaccess work as that’s the most probable cause at the moment.
The detail page is a very straightforward template - you can view my version here and click the “ShowMee” button in the lower right to view the EE code behind it.
by Denny
Date: Thursday, July 15th, 2010
Comment: #43
OMG! I found it!
In my attempts to diagnose the issue, I added dynamic=“off” to the detail page!
I removed that and poof! Problem solved.
Thanks again Mike!
I REALLY enjoy your site and appreciate all the effort put forth.
by Mike Boyink (Author)
Date: Thursday, July 15th, 2010
Comment: #44
Cool - glad you got it working. The dynamic off/on is a bit of a “t-shirt moment” with EE..;)
by Mike Boyink (Author)
Date: Thursday, July 22nd, 2010
Comment: #45
Hmm - the exp:weblog:categories tag has no limit parameter so that’s not an option.
The other option that comes to mind is a weblog:entries tag, sorted so most recent entry is first, limit to one, then use the {categories} looping pair also limited to 1 to create a category link. Lots of assumptions with that approach however.
The last resort is a custom query.
by Mike Boyink (Author)
Date: Thursday, July 22nd, 2010
Comment: #46
Hmm - the exp:weblog:categories tag has no limit parameter so that’s not an option.
The other option that comes to mind is a weblog:entries tag, sorted so most recent entry is first, limit to one, then use the {categories} looping pair also limited to 1 to create a category link. Lots of assumptions with that approach however.
The last resort is a custom query.
Date: Thursday, October 21st, 2010
Comment: #47
Hi Mike,
firstly thank you for the remarkable tutorials, really couldn’t have come close to cracking EE without them. My question isn’t bug related it’s more so a general question. I’m wondering if you could tell me why on the index page of the products template you link to the following (category specific page) with the anchor {path=products/list} and yet when you try and link to the detailed description (or detail template) from within the list page it is necessary to us the anchor {url_title_path=products/detail}? What is the chief difference between the ‘path=’ and the ‘url_title_path’. I have put them in and have it working I’d just love to know and understand the reason why it is necessary.
Again, thanks for the tutorials.
Paddy
by Mike Boyink (Author)
Date: Thursday, October 21st, 2010
Comment: #48
Hey Patrick - the url_title_path variable appends on the url_title of the specific entry to the path specified. It’s telling EE to load the detail template then which entry to pull content for.
The category template is actually linked to in the same way - using the path variable within a category context prompts EE to append the category info onto the template specfied (IE if you look at the actual link generated there should be category info in the URL as well.).
by Sergio Lopez
Date: Friday, August 26th, 2011
Comment: #49
Hi Mike.
On this details template how can you add more different entries, like a featured column in front of the page article? Example for using as a More recommended articles, and lets say you add 3 random articles to make the user keep on the site?
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