23 Oct 2007

Building an ExpressionEngine Site - Chapter 11

In which we add product category pages.

In this installment of the Building an ExpressionEngine site series, we’ll add some depth to the Products section of our site by creating a category template that show all the entries assigned to a specific category.  We’ll then modify the Products index template to link to this new template.

The Category Template
First, a note on template organization and how it will impact your URL’s.  Truth be told, I’m doing this a bit differently than I would on a “real” project because all the code and templates I’m posting here (which are chapter-specific) have to live in the same EE install that powers the rest of Boyink.com.

So while in this tutorial I’m putting all the page templates into one template group, on a real project I would make a “products” template group.  The index template would contain that code that our current “chapter_10_products” template has - that shows a list of product categories, category images, category descriptions and a couple of custom category fields.  This page would come up at the URL of domain_name/products/.

Then I would name today’s template would be “list”, and the resulting URL’s would be domain_name/products/list/category/category_name/—category being a trigger word that tells EE to filter the list by category.  Actually the template would show all products if you went to domain_name/products/list/ - which still might be handy for a “show all products” list.  Further - when we add (in the next chapter of this series) a detail/single view template for showing all the content for one specific product, I would call that template “detail” and the resulting URL would be domain_name/products/detail/product_name/ - which is a pretty nice URL structure.

But since I’m putting all the templates into one template group our products index page will come at http://www.boyink.com/splaat/building_series/chapter_11_products/, and our URLs as we move deeper into the Products the URLs won’t be quite as pretty.

OK - for the purposes of this tutorial I’ve created a new template in my catch-all “building_series” template group, and it “chapter_11_product_list”.  You can grab the text version of this template: chapter_11_products_list.txt and load it into EE (make sure to note that once again all the embeds have been changed to be chapter specific and may need editing on your end).

Let’s dissect this template:

  • First thing off you’ll note that both the title tag and the main content area make use of an EE tag called exp:weblog:category_heading.  This tag will display category content if the template is loaded with a category link.  In other words, this template we are creating will work in two modes - either as a “show every product regardless of category”, and “show products in a specific category”, and how it behaves depends on how you’ve linked to it.  If it’s loaded straight, with no category in the URL, then it will show all products (and these category_heading tags will not return any content).  If it’s loaded with a category link, the list of products will be filtered to that category, and these category_heading tags will return category content.
  • The weblog:entries tag is very straightforward - you’ll note that there is nothing in the parameters telling it to display a specific category.  This can be confusing as sometimes you’ll think you’ll need to force a certain category in as a parameter, but in this case there is no need.  This weblog:entries tag will look at the URL, and change what it returns depending on what it sees there.  The only thing I’ve done differently here is specify a sort order on title, so that products are listed alphabetically.
  • You’ll note an empty link to “product details”.  We could simply show all product data on this template, but I wanted to go one level deeper with this page as more of a summary page then link to a single page where all product content is displayed.  We’ll do that next time.

OK - so get that template loaded, making any changes to the embed statements or weblog names for your local EE setup.  Click “view” to load the template.  It should load showing all your products in alphabetically, with no category content showing.  Here’s the rendered version of mine: No-category List of Products.

Category Links
So how to get that new template to show a single category?  We need to go back to our Products Index template and modify the links there to link to this new template with category links. Here’s the updated text version of my Products Index template: chapter_11_productst.txt

The EE code that was added is in the “View Products” link, where it now has the following code:
<a href="http://www.boyink.com/splaat/building_series/chapter_11_product_list/">View Products >></a>

Because we’ve created this link within a weblog:categories tag, EE will render the link using the category keyword and the category_url_title appended on after the template name of chapter_11_product_list (ex: http://www.boyink.com/splaat/building_series/chapter_11_product_list/category/interior/).  (Note - that this assumes that, under Admin > Weblog Administration > Global Weblog Preferences you have EE configured to use category_url_titles instead of category ID’s).

Load that new Products Index template, tweak any Embed or Weblog names, and you should be able to get EE to render the page with new category links to the new Products List template.  Following those links should load the Products List in category mode, which should cause category content to appear in both the page title and in the content.  Here’s the rendered version of my Accessories page.

In the next chapter we’ll build the single-view product page, which will display the rest of the product content.

Heh - and I just realized I didn’t set this entry to “closed’ until it was finished - so a number of you probably got to see it in a half-baked state.  Sorry about that!

On to Chapter 12.
Back to Chapter 10.

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:

The latest from the Train-ee blog:

Comments

1
Pete
November 12, 2007

Ok, I’m totally stumped.
I notice that there were no comments on this chapter so I wonder if others were too and just skipped on.
Your example shows a nice list of products, the Beverage tank, interior light, overdrive etc. What am I missing here, are these supposed to be added in the Publish area or to be added as it was done for Products, as Categories?
After making the new template and calling it “Products List”
I made a new weblog called “Building Product List,” added a category (Beverage tank, just one to see if it would work) and changed the url code in the Products List template to “fetch” it, in my case (just below the ending of the category heading weblog; {exp:weblog:entries weblog="bees_product_list" disable=.......}
I understand you not wanting to go over what you’ve already covered but have you left out something? Where was it mentioned to build the new categories and how/where to put them?
I’ve gone over your instructions in this chapter about 4 times now.
What am I not getting here?
Thank you for an answer.
Peter

2
(Author)
November 12, 2007

Hi Pete - the items you mention (tank, light, overdrive) are individual products entered in as posts.  They are not categories, these are items assigned to a category.

Entering these - was covered in Chapter 8 - towards the end with the heading of “Entering Content”.

Creating the categories was in the same chapter - just a few paragraphs earlier.

3

November 12, 2007

Thanks Mike - I’ll go back over ch. 8 and look at things again. Thanks for the follow-up and thanks again for your work here.

4
Jaime J Aleman
December 27, 2007

@Mr.Boyink!
I actually found an error.
Well, it may be just me, as I seem to have been the only one that spotted it?!
But ... in your template http://www.boyink.com/images/blog/chapter_11_products_list.txt
In the exp:weblog:entries weblog="bees_products" image tag? You have this:
{product_thumbnail}
When (after trial an error) it appears to work with just this: {product_thumbnail}

For whatever reason, the way you have it dupliated the img src code. The {product_thumbnail} produces its own img src tags.
Weird, I know.

5
(Author)
December 27, 2007

Hi Jaime -

It’s actually going to depend on what alternative you choose when uploading the image - insert link or insert URL. 

I choose to insert URL only in the entry, so that I can build the link in the template (and use the entry title for alt text etc, apply a style, etc).

6
Juliano Moreira
December 29, 2007

Mike, very nice tutorial you’ve got here!!! I’ve been following up with your tutorials but I ran into some problem on chapter 11. I tried uploading the category images specifying the image path like you mentioned but for some awful reason my images are broken, they’re not appearing correctly in the browser. This is what I did: {site_url}images/uploads/thum_product_image_01.jpg
It doesn’t work for me, any ideia? Thank you very much!!!

7
(Author)
December 31, 2007

Hi Juliano - thanks for the comments.

What’s coming out in the source code for your category images?

I’d also suggest submitting the page to the W3C validator as well - just in the odd case that you’re missing a chunk of HTML somewhere and the category images are the symptom of that.

8

January 02, 2008

I also had problems with the images, i made a change in the weblog posting preferences (turning urls into a href links etc) this helped but now when i put my changes back they keep working.

anyways, i’d play with those settings, worked for me :D.

9

January 02, 2008

i was wrong, it is Automatically turn URLs and email addresses into links… this one has to be set to no.

10
(Author)
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.

11
Ken
February 02, 2008

something just caught me off guard since it’s been working fine till now:

My embedded footer does not want to show on the products list page template or the details page template in the next chapter.

It displays fine on the other templates within this template group.

12
(Author)
February 02, 2008

Hey Ken -

Do you have “dynamic="off" in the weblog:entries tag?

13
ken
February 02, 2008

ack, adding that tag fixed it. thanks for such a quick reply!

I did my footer different and didnt grab your entire line for the weblog entries code.

I should make a sticky to ‘member that next time something magically goes on vacation…

14

February 10, 2008

Mike,

No entries show up after I click on the category link on the products index page. It seems that the category name is being passed OK in the URL. I have published several entries and assigned at least one to each category, but none appear on the product list page. Keep in mind I am on the hosted trial (if that has anything to do with it).

THIS IS MY LIST TEMPLATE CODE:

{embed="building_series_embeds/html_header" my_page_title="Products"

List{exp:weblog:category_heading weblog="products"} |

{category_name}{/exp:weblog:category_heading}"}

<body>

<div id="content">

{embed="building_series_embeds/logo_title"}

{embed="building_series_embeds/main_nav" my_location="products"}

{embed="building_series_embeds/search_section_intros"
the_url_title="products"}

<div id="maincontent">

<div id="right_side">

{embed="building_series_embeds/latest_news"}

{embed="building_series_embeds/latest_products"

</div><!-- close right_side -->

<div id="left_side">

{exp:weblog:category_heading weblog="products"}

<h3>{category_name}</h3>

{if category_description}

{category_description}

{/if}

{/exp:weblog:category_heading}

{exp:weblog:entries weblog="products"
disable="member_data|trackbacks" orderby="title" sort="asc"}

<h2 class="underline">{title}</h2>

[img]{product_thumbnail} alt="{title}" title="{title}" height="99"
width="150" class="category_image"
[/img]

{product_description}

View Product Details >>

<div style="clear:left"></div>

{/exp:weblog:entries}

</div><!-- close left side div -->

</div><!-- close main content div -->

{embed="building_series_embeds/footer"}

</div> <!-- close content div -->

</body>

</html>

THIS IS MY OUPUT/SOURCE CODE AFTER RENDERING THE LIST 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="http://demo.expressionengine.com/WGG4L02LMS/index.php?css=building_series/stylesheet.v.1202706102" />

<title>Living Color Garden Center | Products</title>
</head>

<body>

<div id="content">

<div id="title">

<h1><span class="green">Living Color Garden Center</span></h1>
<span id="slogan">The Best Slogan here</span>
</div>

<div id="menu">

<div class="submit">

<ul>

<li><span>Home</span></li>

<li><span>About Us</span></li>

<li><span>Products</span></li>

<li><span>Affiliates</span></li>

<li><span>Contact</span></li>

</ul>

</div>

</div>

<div id="subheader">
<div class="rside">
<div class="padding">
<div id="search">
<form action="#" method="get">

<input type="text" name="search" size="20" maxlength="250" class="text" value="” />
<input type="submit" value="” class="btn1" />
</form>
</div>

</div>
</div>
<div class="lside">

<div class="padding">

This is the intro to the Products page. It is important that the “url title” is “products”. This is what makes it load into the right place. Is another name for URL tltle “variable”?

</div>
</div>
</div>

<div id="maincontent">

<div id="right_side">

<h3>Latest news</h3>
<div class="lcontent">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Quis nostrud exerci tation ullamcorper suscipit.
Read more...

</div>

<h3>Latest Products</h3>
<div class="lcontent">
http://demo.expressionengine.com/WGG4L02LMS/images/uploads/img2.gif
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
http://demo.expressionengine.com/WGG4L02LMS/images/uploads/img2.gif

Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Dolor in hendrerit in vulputate velit esse molestie consequat.
http://demo.expressionengine.com/WGG4L02LMS/images/uploads/img2.gif
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.

</div>

</div> <!-- close content div -->

</body>

</html>

15
(Author)
February 11, 2008

Hey Bill —

Your latest products embed is missing a closing brace.  Since that’s the last thing before the category content should appear that might be it.

16

February 11, 2008

Thanks again Mike

Everything popped in as it should. As you know, sometimes you go blind staring at these pages.grin

17

February 13, 2008

I am a bit stumped. I have my Products_List page displaying when I click on a category, but all the products I created appear. Not just the ones tagged with that specific category. Also, the category is not appearing in the title bar.

I don’t really know where to look in my code and what to check for. I reread chapters 9-11 and I’m not finding where I should be looking to solve this. Any ideas?

18
(Author)
February 13, 2008

Hey Charlie -

First place I’d look is the links that you are clicking on to get a categorized list as it sounds like they may not be correct.

What’s the URL that are getting after clicking the link - does it have the category keyword in it?

19

February 13, 2008

I’d like to see the percentages for how many times you diagnose everyone’s problems correctly on the first try.

Thanks man.

20
(Author)
February 13, 2008

Heh...what you aren’t seeing is the number of times I’ve banged my head learning where to look...wink

21
Mike Green
March 14, 2008

I’m working through this excellent tutorial in preparation for helping a customer get going with using EE for his new site.

At this point, however, I’ve run into a snag which—after spending much time trying resolve—has me stuck:

The line:
{category_description}  View Products >>
yields a URL (for the demo I’m using) of:
http://tutorial.prayercentral.org/index.php/building_series/product_list/category/accessories/

This looks the same in essentials to the one in the tutorial:
http://www.boyink.com/splaat/building_series/chapter_11_product_list/category/accessories/

My link, however, takes one to the home page—not the the list of products for the category :-(

Any help will be much apprecieated.

Mike Green

22
(Author)
March 14, 2008

Hey Mike -

Taking you to the home page is EE’s 404 action.  Do you have a template named product_list, and is it in a template group named building_series?

23
Mike Green
March 14, 2008

Hah! That was it.

I looked for something like this but could not see it until you asked: I have a template named products_list, not product_list, in the template group named builing series.

I created a new template called product_list, copying it from the products_list template, and voila! things work as they should.

Thanks very much!

Mike Green

Name:
Email:
URL:
Comments:

Remember me?

Shoot me an email when someone responds?

Enter this word:

Here:

Related Posts

GetBoyinked

Subscribe to Boyink.com