08 - Products Data Structures and Test Content
In this chapter we get started on the section of the site that will have the most meat to it—the Products section.
Just to make this interesting, let’s imagine that our company has enough products to be categorized. This section of the site should function in a pretty typical manner - with a Products index page that shows listings for categories only. Each category listing will have an image, description, and a link to a category page that will show the products in that category. Clicking a product link will load a product-specific page will all the data for that product.
Let’s build the backend EE structures that we’ll need to power this section. We need a new:
- Weblog
- Category Group
- Field Group
Create the Products Weblog
By this point, if you’ve been following along, you’ve already created a couple of weblogs so I’m going to gloss over the specific steps. If you need a refresher you can re-visit Chapter 4. I’m going to create mine with a Full Weblog Name of “Products” and a Short Name of “products”.
Create the Field Group
Products typically have a more involved data structure than content pages like the Home and About pages, so we’ll have to create a new Field Group to hold some new product-specific fields. The specific steps to creating a new Field Group are also back in Chapter 4. I’ve named mine “products”.
Fill Out the Fieldset
Add the following 7 fields to your new custom Field Group. Indicated with each field is the name, display name, field type, field formatting, and if it’s searchable or not. I just left defaults for everything else:
- product_number, Product Number, Text Input, None, Yes
- product_description, Product Description, Textarea, 3 Rows, XHTML, Yes
- product_color, Product Color, Text Input, None, Yes
- product_dimensions, Product Dimensions, Text Input, None, Yes
- product_weight, Product Weight, Text Input, None, Yes
- product_thumbnail, Product Thumbnail, Text Input, None, No
- product_image, Product Image, Text Input, None, No
Create the Category Group
This is new territory - the first time we’re going to use categories on this site. The process is much the same as the Field Group, where first we create the group then populate the group with specific categories. Here are the specific steps:
- In the EE Control Panel, click on the Admin tab, then Weblog Administration.
- Click on Category Management.
- Click on the Create a New Category Group button in the upper right part of your screen.
- Fill in the name for your Category Group. I’m naming mine “Products_Services” (because it will also categorize the services).
- Leave the defaults for everything else, and click Submit.
Add Categories
Here again is where EE prompts you to assign the new group to a weblog. I prefer to add the categories in first, then go back and assign both the new Category Group and new Field Group to the new weblog. To add categories:
- Click the Add/Edit Categories link by your new Category Group.
- Click the Create a New Category button in the upper right hand corner.
- Fill in the Category Name and Category Description. We will use the Category Image URL in a future chapter, so for now just leave it empty.
- I’ve created three automotive-related categories; Drivetrain, Interior, and Accessories with descriptions for each.
- We’ll leave the sort order to be alphabetical.
Connect the Weblog, Category Group and Field Group
Now that we have our structures created we need to associate them in EE:
- Navigate back to Admin > Weblog Administration > Weblog Management.
- Find your new Products Weblog, and click the Edit Groups link by it.
- Assign the Category group you just created (“Products_Services” in my case).
- Assign the Default Status Group - again we are not using any custom Status options in this tutorial, but I’ve had odd results when no Status group was assigned.
- Assign your new Field Group (again, “Products” for me).
- Click Update.
Enter Content
If you click the Publish tab and choose your new Products Weblog, you should get a content entry screen with your new custom fields. Clicking the Categories tab should bring up your new Categories. If these two things aren’t true for you, go back through the previous paragraph and make sure you’ve connected the Weblog, Category Group and Field Group in the Edit Groups option for the Weblog.
If everything looks good, enter in some test content— it’s much easier to develop templates when there is content to return. If you’re not feeling creative you can use “Greeking” here—which is just placeholder text for design and programming purposes. I’ll often go to a site like http://www.lipsum.com/ and use it to generate paragraphs of Greeking text.
Make sure to assign each new post to at least one category.
Photos
Each entry will need two photos - a thumbnail and a large image. The thumbnails will get used on the category pages and the large images on the product detail page. EE will create thumbnails for you when uploading a large image, but in this case I want them in separate fields for greater flexibility, so I’m creating my own thumbnails locally.
I’m using thumbnails that are all the same size—150px by 122px. My large images are 500px by 375px.
When uploading a photo, EE will give you the option of Embedded in Entry, URL Only, or Pop-up Image Link. For this tutorial choose URL Only, as this will let us specify more of the HTML for the image in the template (like using the entry title for alt and title text).
Make sure to enter at least one, and ideally two to three products in each category. One product can be assigned to more than one category.
The Results
I don’t have a finished page to show so it doesn’t feel like we made a ton of progress in this chapter; but, getting the data structures in place is a necessary first step to the build-out of any new section. In the next chapter we’ll start in on the templates that will pull our new content out.
Category Navigation
Previous Comments
by Mike Boyink (Author)
Date: Monday, February 2nd, 2009
Comment: #2
Hi Florian -
Thanks for the comment.
The overall approach will still be valid - you’ll just have to work more closely with the tags that return categories to ensure the formatting is correct.
Also - keep in mind that from a EE URL perspective all categories are equal - meaning that when viewing a subcategory page you won’t see any of it’s parent category information in the URL. The heirarchy is really for display only.
by Florian
Date: Monday, February 2nd, 2009
Comment: #3
Thank you Mike.
For this project it’s ok if the parent category does not display in the URL. I will follow your tutorial in order to build the product section of my website.
by H.L. Wilson
Date: Wednesday, February 4th, 2009
Comment: #4
Hi Mike. Very nice tutorial. This is my first attempt at a blog-type site and while it’s pretty logical and I’m not experiencing the problems that I see written about here, I’m having an issue with something that is probably pretty basic. It has to do with the navigation. If I am on the home page and click either the Logo or the home tab, it does exactly as expected. When I click the about tab OR the products tab, again no problem.
When I try to navigate to the products tab from the about page OR the about tab from the products page, the navigation fails. Another clue is this, you begin each link with a forward slash. i.e.: href=”/index.php/site/about/” . If I use the leading forward slash, I get nothing, when I remove it, the page works fine. I am pulling my hair out! And there’s not much there to begin with…
by Mike Boyink (Author)
Date: Thursday, February 5th, 2009
Comment: #5
Hi HL -
This is probably due to a bad habit I developed early on - that of not using path variables for main nav.
Try coding your main nav links like:
<a href="{path='site/about'}">About</a>
.
That code should neutralize any difference in EE installation location, etc - so is a better practice for linking.
by H.L. Wilson
Date: Thursday, February 5th, 2009
Comment: #6
Awesome! Works like a charm. You absolutely rule! Thanks.
by Mike Boyink (Author)
Date: Thursday, February 5th, 2009
Comment: #7
Heh if I ruled it would have been right the first time..:)
But glad you got it going..
by Ira Siegel
Date: Sunday, February 15th, 2009
Comment: #8
Is there any way to display the name of the parent category when in a sub-category? I have a list of products and within a sub-category, I’d really like to display the name of its parent (e.g., Laminate Flooring > Smooth). So, when in the Smooth category, display Laminate Flooring as well. I hope that’s not too confusing. I tried parent_id, but all I get is a value of 0 or 99.
Thanks, and your Train-EE tuts have helped me tremendously the past year Mike!
by Mike Boyink (Author)
Date: Monday, February 16th, 2009
Comment: #9
Hi Ira -
I haven’t played with the new parent_id variable yet, but my first inclination would be to use it as a parameter on another weblog:categories tag in order to pull back the category name.
So - try nesting something like this in your category code:
{exp:weblog:categories weblog="your_blog_name" show="{parent_id}"}
{category_name}
{/exp:weblog:categories}
You may run into parse order issues - sometimes I end up creating embedded templates in this situation and pass the parent_id as an embed variable.
by Chad
Date: Wednesday, April 1st, 2009
Comment: #10
You talk about uploading images but my image fields are just configured as text fields as specified.
Could this be because I am using the Core?
by Mike Boyink (Author)
Date: Wednesday, April 1st, 2009
Comment: #11
Nope.
Look for the “File Upload” button over by the save / quicksave / preview buttons.
That initiates a upload process.
Part of that process is—once the file is uploaded - choosing which field the image will go in.
You can place images in text or textarea fields.
by atiosis
Date: Friday, April 10th, 2009
Comment: #12
How would I only show a sibling?
I am trying to display it as the title of the page, but it is displaying all the siblings that belong that category’s parent.
by Mike Boyink (Author)
Date: Friday, April 10th, 2009
Comment: #13
Not quite sure I follow. All we’ve got here is categories and entries that are assigned to the category. If you are working with hierarchy in your categories (with parent and subcategories) or relationships then that’s outside the scope of what I’m showing here.
Unless I misunderstood?
by Esquire
Date: Saturday, May 2nd, 2009
Comment: #14
Mike,
How difficult is it to implement shopping cart features when using EE?
Do you have to use EE friendly shopping carts? If so could you reccomend any to look into?
Thanks,
Joe
by Mike Boyink (Author)
Date: Saturday, May 2nd, 2009
Comment: #15
Hey Joe -
I’d suggest nosing around the EE Forums (or throw the question out on Twitter).
I’ve used the Simple Commerce Module here on Train-ee but only have shallow familiarity with other options.
by Chris
Date: Thursday, June 25th, 2009
Comment: #16
Arrgh!
For two days now I’ve failed to get my pictures to show. Everything else is just fine.
The pics both appear in my preview but do not show on my products page:
http://www.spauldingchris.com/products/
Could it be due to my .htaccess to remove the index.php?
Awesome tutorials Mike. Thank you so much for sharing!
CS
by Mike Boyink (Author)
Date: Thursday, June 25th, 2009
Comment: #17
Could be. I usually rename index.php rather than rename. What do the image paths look like when you render the page? Have you compared the rendered paths there to what the preview page has?
by Chris
Date: Thursday, June 25th, 2009
Comment: #18
I see there’s more to do on chapters 9 and 10 per images. DOH. I’ll go further and hope everything works by 11.
I thought I’d see the thumbnail images by now.
p.s. Going back and following your directions more closely, by choosing url in the image upload option, even the preview doesn’t show an image now, just the path. But, I’ll get through chapter 11 before pulling more hair out. :)
This is awesome. I’ve been enjoying your tutorial for almost a week now. A little more each night. Sometimes I have to take a break because it’s very challenging. Great work!
cs
by florian auckenthaler
Date: Monday, February 2nd, 2009
Comment: #1
I am learning to build a website with products and categories. I am using tutorial 08 to tutorial 12 as a guide.
The specs for my website are almost identical with the exception of sub categories. My structure would look like the following:
- Products
Parent Category 1
Parent Category 2
Sub Category 1
Products..
Sub Category 2
Products…
Would the general approach that you take in your tutorial still be the same even though my website uses Categories and Sub categories? Would there be any important considerations or deviations that I need to consider when including sub categories?
If you have a spare minute, I would highly appreciate your input.
Thank you so much for all your help. I love the train ee website..
Florian