Web Development on a Stick
Building an ExpressionEngine Site - Chapter 12
In which we add product-specific pages.
Well, here we are again—time to nudge the Building an ExpressionEngine Site 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 Product Index and Product List templates.
The Product Detail Template
OK - so in the EE Control Panel, create a new template in same group as your Product Index and Product List templates. I’m calling my new template chapter_12_product_detail.
Here is the text version of the new template:chapter_12_product_detail.txt. Let’s also take a look at the code below:
{embed="building_series_ch12_embeds/html_header" my_page_title="Ch. 12 Products Detail {exp:weblog:entries weblog="bees_products" limit="1" disable="member_data|trackbacks|pagination" } | {title}{/exp:weblog:entries}"}
<body>
<div id="content">
{embed="building_series_ch12_embeds/logo_title"}
{embed="building_series_ch12_embeds/main_nav" my_location="products"}
{embed="building_series_ch12_embeds/search_section_intros" the_url_title="products"}
<div id="maincontent">
<div id="right_side">
{embed="building_series_ch12_embeds/latest_news"}
{embed="building_series_ch12_embeds/latest_products"}
</div><!-- close right_side -->
<div id="left_side">
{exp:weblog:entries weblog="bees_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="building_series_ch12_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 weblog:entries tag rather than a category:heading tag
- Deleted the category:heading tag from the page body
- Limited the 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 Product List template.
Updating the Product List Template
Here’s a text file with the updated Product List template:chapter_12_product_list.txt
The significant changes are in the weblog:entries tag that generates the list of products for a specific category. Note the use of the url_title_path variable. I’ve used it to link both the thumbnail image and the “View Product Details” link:
{exp:weblog:entries weblog="bees_products" disable="member_data|trackbacks" orderby="title" sort="asc"}
<h2 class="underline">{title}</h2>
<a href="{url_title_path=building_series/chapter_12_product_detail}"><img class="category_image" src="{product_thumbnail}" alt="{title}" title="{title}" height="122" width="150" /></a>
{product_description}
<a href="{url_title_path=building_series/chapter_12_product_detail}">View Product Details >></a>
<div style="clear:left"></div>
{/exp:weblog:entries}
With that template updated, you should be able visit your Products section, choose a category, and get a page like this, where the thumbnails and product links are now active. You can roll over them to check the links and see that EE is appending the url_title of the product to the link. Clicking a link should load the new Product Detail template with the content for that product being displayed - like this.
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. Here is a text file the the updated template:chapter_12_products.txt
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.
Visit the the completely updated Products section to see all the changes and the new Product Detail pages.
This rounds out our main Product pages. In the next chapter we’ll tackle that “Latest Products” sidebar and get our product content in there.
Back to Chapter 11.
On to Chapter 13.
Learn ExpressionEngine® Fast
Visit Train-ee.com for the latest in ExpressionEngine training designed with one goal in mind - to get you up to speed on ExpressionEngine® as quickly as possible.
The latest Train-ee Products:
- Screencasts : Members-Only Content and Workflow
- Screencasts : Designing an ExpressionEngine Architecture
- eBooks : Building an ExpressionEngine Site - Small Business
The latest from the Train-ee blog:
October 31, 2007
Nice...
That’s one for the home boys!
If you’re not copying and pasting where you can, you’ll quickly get crunched for time. My buddy Mario Luigi types it all from scratch a true hand-coder, I’ld be looking for work if I had to go quite that far.
October 31, 2007
Oh. Yea. I do that kind of thing so automatically I almost forget about it. I always work up a basic template with all the includes then copy that as a starting point.
November 02, 2007
“I always work up a basic template with all the includes then copy that as a starting point.”
You have to do that if you want to get any work done. However, I hand code all my xhtml and css first and THEN copy and paste everything else.
Out of interest Mike, what tools do you use to create your sites? My main coding tool is TextMate on OS X. I recently switched from BBEdit and haven’t looked back!
November 02, 2007
I’m a Windows guy...so TopStylePro for HTML/CSS. Once in EE I pretty much just use the EE interface, although recently I installed the “its all text” extension and have it hooked up to some text editor that I can’t recall the name of because I haven’t had my coffee yet...
November 02, 2007
Heh..and once again am on the wife’s laptop....
November 02, 2007
I really like the way you can save your templates as a physical file on the server in EE. I use that feature all the time.
Mike - it needs to be said that you’ve made the task of learning Expression Engine significantly easier by providing this series. For that I’ll be forever grateful.
T H A N K S ! ! !
November 02, 2007
You’re welcome…
I see alot of people using “save as template” feature. I just don’t. Between switching from desktop to laptop frequently and going in and out of at least 3-4 EE sites on a daily basis it just seems more efficient to stay within EE for everything.
November 02, 2007
I’m checking out http://www.aptana.com they’ve just come out of Beta with Aptana Studio. It should do everything required for an EE setup to work remotely. I’m hoping anyways…
Michael, I didn’t know you were from “Bean town”?
Coffee-Bean-Town that’ld be, “Have a good morning EE’er’s…
November 02, 2007
Huh..Aptana looks interesting. Bookmarked it - will take a look once I have a spare moment.
Textpad is the Windows Text Editor I’ve been using off and on.
November 08, 2007
Hi,
I´m just wondering how you manage to display the code block (EE Tags) properly rendered with css on this site?
Thx,
Chris
November 08, 2007
Hi Chris - I’m sort of embarrassed that it took me 11 chapters to figure it out...
Just wrap your code in (remove the spaces):
[ code ] [ /code ]
EE will insert a “codeblock” class that you can use to further style the output.
November 08, 2007
Hey Mike,
i can´t believe it. Do you now how much i´ve searched for this?? :D Thanks
November 13, 2007
Just wanted to say thanks yet again...thankfully I’m still trackin’ with you. Can’t wait until the next installment.
Many thanks!!!
December 09, 2007
I’ve been following along with these tutorials for a few days now, and I finally can manage a bit with EE. However, I’ve been having trouble with the Product Details. The page shows my latest product correctly if I render the template from the edit screen, but I am redirected to Building Series Home if I try the link from the product listing. Any idea what’s happening?
December 10, 2007
Hi Leroy -
Sounds like your link isn’t quite right, and EE is sending you to the home page as a 404 action.
December 23, 2007
Hey man great tutorial I am following along great until now.
1 problem: I created 2 generic items to sell. in 1 product detail everything looks good with the text under the picture. In the other one the text is out to the right.
How did that happen? How can I fix it?
December 26, 2007
Not sure. Validate the page to make sure everything is coded correctly. If so it’s probably a float issue with the photos and text.
December 28, 2007
Thanks Mike. It was a simple typo (though it took so long to find).
December 29, 2007
Hi Mike,
great, great tutorial. Finally I realise why some of my ‘logical’ efforts didn’t give the expected results.
I’ve got a question: why are you using url_title_path=? And is there a reason to use it in stead of path= like you did till now.
December 31, 2007
Hi Marcel -
I used url_title_path because it adds the url title of the entry to the link dynamically. The url title tells the target template which entry to display. If I used just the path=, the template would display in default mode instead.
January 11, 2008
I’d like to pull content from several blogs into a another blog if it’s meets a certain criteria. (if statement). If there is content, I’d like to display “x” number of lines. I’m fine with that. How do I then have the link go to the weblog that the content was drawn from. I have searched and searched for a solution. It’s either not possible, or I am missing something silly which is likely
January 11, 2008
You need {comment_url_title_auto_path}, which requires a configuration under weblog settings > path settings > comment page url.
Crazy thing is - I’ve never used that variable before and was just using it when comment came in.
January 11, 2008
Thanks man. I also found another work around a short while ago. {weblog}/{url_title} it seems to work.
January 15, 2008
FYI: The Building an ExpressionEngine Site series is now available for purchase as an eBook on the newly-launched Train-ee.com.
January 15, 2008
Does it go more in depth than this or is the book a duplicate? Nice work by the way. Can you contact me via email? I’d like to chat about a website we’re developing.
January 15, 2008
Ah - I should have also linked to the announcement as well. In short, it’s the weblog series + 50 hours of editing /rewriting / adding screenshots.
Re: the email—are you at the info address at your domain?
February 06, 2008
How difficult would it be to add previous/next navigation to the product details page and turn it into a slideshow?
February 06, 2008
Hey Bill -
It’s doable. EE has previous/next entry linking tags but by default they will ignore category. If you search around the EE forums you’ll find some threads on getting the two to play nicely with each other.
February 11, 2008
Hello There,
I am heart-broken. I was trying to add a css stylesheet to my detail page and now none of my pages are being styled. I tried to create a stylesheet for the details page, so I could change the template without affecting the other templates. (I hope this is possible.) I have reviewed my code several times and can’t find what I have done wrong. I have also looked at the pathways to the css stylesheets. I think I have them right.
--------------------------------
Below is my building_series/index template
-------------------------------------------
{embed="building_series_embeds/html_header" my_page_title="Home"
<body>
<div id="content">
{embed="building_series_embeds/logo_title"}
{embed="building_series_embeds/main_nav" my_location="home"}
{embed="building_series_embeds/search_section_intros" the_url_title="home_page"}
<div id="maincontent">
<div id="right_side">
{embed="building_series_embeds/latest_news"}
{embed="building_series_embeds/latest_products"}
</div>
<div id="left_side">
{exp:weblog:entries weblog="bees_home" disable="categories|member_data|pagination|trackbacks" sort="asc" }
<h2 class="underline">{title}</h2>
{page_body}
{/exp:weblog:entries}
</div>
</div>
{embed="building_series_embeds/footer"}
</div>
</body>
</html>
---------------------------------------
Below is my html_header template
--------------------------------
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-2" />
<meta name="author" content="free-css-templates.com" />
<link rel="stylesheet" type="text/css" media="screen" href="{stylesheet=building_series/stylesheet}" />
<title>{site_name} | {embed:my_page_title}</title>
</head>
-------------------------------------------------
Below is my building_series/stylesheet.
---------------------------------------------
/*
Free Green-business design - CC2.5 license
http://www.free-css-templates.com
*/
* {
padding:0;
margin: 0;
}
body {
/*background-color: #FFFFFF;*/
background-image: url({site_url}images/uploads/topbg.jpg) repeat-x top;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 10pt;
input, textarea {
border: 1px solid #aaa;
}
input:hover, textarea:hover {
border: 1px solid #888;
}
img {
border: 3px solid #e5e5e5;
margin: 0 15px 5px 0;
float: left;
}
a {
color: #2FB432;
text-decoration: none;
background: inherit;
}
a:hover {
text-decoration: underline;
}
blockquote {
margin: 0 0 15px 30px;
border-left: 3px solid #8ADF88;
padding: 0 0 0 8px;
}
input, textarea {
border: 1px solid #aaa;
}
input:hover, textarea:hover {
border: 1px solid #888;
}
input.text {
color: #000000;
border: 1px solid #E6E6E6;
background: inherit;
}
textarea.text {
font-size: 8pt;
border: 1px solid #E6E6E6;
}
input.text:hover, textarea.text:hover {
border: 1px solid #D6D6D6;
}
form {
display: inline;
margin: 0;
padding: 0;
}
#content {
padding: 0;
margin: 0 auto;
width: 1200px;
background: transparent;
}
#title {
margin: 0;
padding:0;
height: 80px;
width: 100%;
background: transparent;
}
#title .green {
color: #D9FFD8;
line-height: 25px;
background: inherit;
}
#title .green a {
color: #D9FFD8;
}
#title .pad {
padding: 0px 0;
}
#title h1 {
font: bold 1.5em “Arial”, Sans-Serif;
margin: 0;
letter-spacing: -1px;
color: #fffffe;
padding-top: 28px;
background: inherit;
}
#title #slogan {
font: .8em “Arial”, Sans-Serif;
margin: 0;
color: #aaa;
background: inherit;
}
#menu {
margin: 0px;
padding: 0px;
background: inherit;
line-height: 35px;
color: #81D7DF;
width: 100%;
height: 35px;
}
#menu a, #menu a:visited {
color: #81D7DF;
text-decoration: none;
background: inherit;
}
#menu .submit {
float: right;
vertical-align: bottom;
}
#menu .submit ul {
margin:0;
padding:0px 10px 0 50px;
list-style:none;
}
#menu .submit li {
display:inline;
margin:0;
padding:0;
}
#menu .submit a {
float:left; background: transparent url({site_url}images/uploads/tableft.jpg) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#menu .submit a span {
float:left;
background: inherit;
display:block;
background:url({site_url}images/uploads/tabright.jpg) no-repeat right top; padding:0px 15px 0px 10px;
margin-right: 2px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu .submit a span {
float:none;
}
/* End IE5-Mac hack */
#menu .submit a:hover span {
color:#fffffe;
}
#menu .submit a:hover {
background-position:0% -35px;
}
#menu .submit a:hover span {
background-position:100% -35px;
}
#menu .submit a.selected {
background-position:0% -35px;
}
#menu .submit a.selected span {
background-position:100% -35px;
}
#subheader {
width: 100%;
margin:0; height: 87px;
}
#subheader .rside {
float: right;
width: 355px;
height: 87px;
background: transparent;
margin-left: 20px;
}
#subheader .rside .padding {
padding-top: 30px;
}
#subheader .rside input.text {
background: transparent url({site_url}images/uploads/input.gif) no-repeat;
width: 290px;
height: 27px;
border:0;
padding: 2px 0 0 5px;
}
#subheader .rside .btn1 {
background: transparent url({site_url}images/uploads/loupe.gif) no-repeat;
width: 30px;
height: 20px !important;
height: 28px;
border: 0;
padding: 0;
cursor: pointer;
}
#subheader .lside {
background: inherit;
color: #FFF;
font-size: 100%;
height: 87px;
}
#subheader .lside .padding {
padding-top: 15px;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
#subheader .lside a, .lside a:hover {
color: #FFF;
text-decoration: underline;
background: inherit;
}
#maincontent {
width: 100%;
background: transparent;
padding-top: 15px;
/*background:yellow;*/
}
#maincontent h2 {
color: #3A3A3A;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
text-decoration: none;
line-height: 19px;
margin: 0 0 5px 0;
background: inherit;
}
#maincontent h2 a {
color: #2FB432;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
text-decoration: none;
line-height: 19px;
margin: 0 0 5px 0;
background: inherit;
}
#maincontent h2 a:hover {
color: #2FB432;
text-decoration: underline;
background: inherit;
}
#maincontent .underline {
border-bottom: 1px dotted #aaa;
margin-bottom: 10px;
}
#maincontent h3 {
font-size: 130%;
color: #6AA6AB;
border-bottom: 1px dotted #aaa;
background: inherit;
}
#maincontent p {
padding: 0 0 20px 0;
color: #454545;
font: 1.0em “Arial”, Sans-Serif;
margin: 0;
text-decoration: none;
background: inherit;
}
#maincontent .mpnull {
margin: 0;
padding: 0 0 0 0;
}
#maincontent .textbox {
float: right;
color: #454545;
width: 40%;
background: #fefefe;
padding: 10px;
margin: 5px 0 15px 15px;
border: 1px solid #e8e8e8;
/*background:blue;*/
}
#left_side {
width: 1200px;
height:500px;
background: transparent;
/*background:tan;*/
margin-bottom: 20px;
}
#right_side {
width: 200px;
background: transparent;
float: right;
background:lavender;
}
#right_side h3 {
height: 22px;
background: transparent url({site_url}images/uploads/h3bg.gif) repeat-x;
color: #FFF;
border: 0;
font: bold 1.2em “Arial”, Sans-Serif;
padding: 0px 0 0 5px;
line-height: 22px;
}
#right_side .lcontent {
background: #f8f8f8;
border: 0px solid #e5e5e5;
margin-bottom: 15px;
color: #888;
}
#right_side .lcontent p {
padding: 8px;
color: #777;
background: inherit;
}
#right_side ul {
padding-left: 10px;
background: inherit;
color: #454545;
}
#right_side li {
list-style: square;
}
#right_side img {
border: 1px solid #B6D6BB;
}
#footer {
bottom:0;
clear:both;
text-align: left;
border-top: 1px solid #e5e5e5;
padding: 3px 0 0 0;
margin-top: 0px;
margin-bottom: 15px;
color: #888;
background: #FFF;
font-size:80%;
}
#footer .right {
float: right;
}
-------------------------------------
Below is my output code when I render the index page:
-------------------------------------
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-2" />
<meta name="author" content="free-css-templates.com" />
<link rel="stylesheet" type="text/css" media="screen" href="http://demo.expressionengine.com/WGG4L02LMS/index.php?css=building_series/stylesheet.v.1202780406" />
<title>Boyink Interactive | Home</title>
</head>
</div>
</body>
</html>
February 11, 2008
Hey Bill -
Your CSS loads at that URL.
I do see a missing brace in the html_head embed.
Were you trying to add a new stylesheet, or new styles to the existing sheet? You should be able to do either. If it’s a new stylesheet you’ll have to add another stylesheet link in the html_head template.
You could even wrap it in a conditional that looked at the url segment and only load it if it sees the products detail template.
February 11, 2008
Thanks, I caught the missing brace, but still no styling.
Yes, I was trying to create a new stylesheet specific to the detail page. I was making changes to it and realized I was inadvertantly changing the other templates who share common divs. (duh!)
I created a new “product_embeds” template group to allow for other templates specific to the detail page. (Yes, better to use conditional instead. Just impatient to see how easy it is to move stuff around on a page with EE.)
Since then, in an attempt to get my templates to appear again, I deleted all the extra files to get back to only the ones used in your tutorial.
I had successfully got the detail page up and running before everything disappeared (yes, blank pages).
I’ve got all my content and functionality back, but no css styling.
February 11, 2008
I’ve just learned from EE that I may be having trouble because I am using the hosted demo. Multi Sites doesn’t work so good in it.
I had begun 3 different sites.
February 11, 2008
MSM? Oy...yea...one of those “Walk before you run” moments..
Did you get template revisioning turned on? It helps for times when you need to revert back.
February 12, 2008
YES!!!!!!
I went back to an earlier version of my css file and compared it to what I have now and saw that I inadvertently deleted the closing bracket to my body styles and some styles that followed. I made the correction and, Shazaam!, everything popped back into place.
And now, all is right with the world! (until...):-)
Thanks again Mike. Revisioning will be a very helpful tool in the future.
On to the next chapter....
February 13, 2008
Hello again,
I’m taking your advice to wrap the stylesheet link in the html_header with a conditional. I’ve created a stylesheet for the detail page called “stylesheet_productDetail”.
I’ve inserted the following code in the html_header template:
{if url_title_path =
“http://demo.expressionengine.com/WGG4L02LMS/index.php/products/detail"}
<link rel="stylesheet" type="text/css" media="screen" href="{stylesheet=building_series/stylesheet_productDetail}" />
{/if}
Am I doing this correctly? The styling doesn’t appear at all. Is it possible to use the my_page_title variable also?
Once I get this to connect properly, I’d like to add an “else” conditional that would use the main template for all other pages.
As I understand it, I can add additional, template-specific stylesheets by using “elseif” conditionals?
February 13, 2008
Bill -
Right idea, but a bit off.
I’d suggest using a segment in the conditional rather than the url_title_path (which isn’t a variable on it’s own, that I can tell).
So the conditional would be in the form of:
{if segment_x=="template name""}
Where x = the place in the url where the template names show - in your case looks like it would be segment_2.
And template name looks to be “detail”.
So I *think* you need:
{if segment_2=="detail"}
February 15, 2008
Mike,
Worked like a dream! I now have a separate stylesheet for 4 different templates and can style them individually. Awesome!
My next step is to add next/previous links to the detail page.
I wanted to take the detail page a step further and add next/previous links
so that I could create a slideshow for each entry in a category.
I took your advice on an earlier post to search the forums for how to make these “play nice” with categories.
I found the following post by Simon Cox (thank you Simon, if you’re out there:-)):
“If you want to limit your links to the same category that you are currently showing you can use the following (EE 1.6 +):
{exp:weblog:prev_entry category="{categories}{category_id}{/categories}"}Previous{/exp:weblog:prev_entry} |
{exp:weblog:next_entry category="{categories}{category_id}{/categories}"}Next{/exp:weblog:next_entry}
Is it just a matter of inserting the code inside the “left side” div and
changing the path to “product/detail”? This doesn’t seem to work for me. (I
get a nasty error message about mysql syntax.)
This the link to my tutorial site:
http://demo.expressionengine.com/WGG4L02LMS/index.php/products/detail/accessory_1/
Many thanks if you have the time for a comment or two.
February 20, 2008
I’m still trying to get previous/next navigation on the detail page. I’ve searched the forums and documentation and can not seem to get this to work.
My primary reason for considering purchasing EE is to create product galleries as is done in this tutorial. Paging from one image to the next is a very important part of my site design. If this can’t be done, I would like to know so that I can find another way to do it.
If anyone knows how to do this, I would appreciate the help. I am a new user of EE, so I am still trying to learn the program.
Below is a link to the site I am trying to convert to EE:
http://www.livingcolorgardencenter.net (click on the “Plants” link):-)
thanks for your help
February 20, 2008
Hi Bill, I hope you’ve started a thread for your questions on the EE main forums at http://www.expressionengine.com. You would probably get some fast replies on the pre-sales board.
Everybody is really friendly in the community there.
I’m just a newB so can’t be of much help.