As you, the intrepid reader, have already guessed by reading the title of this article, this is the 8th installment in the Building an ExpressionEngine Site series.  In Chapter 7 we wrapped up the About section of our sample website.  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 name of “Building Series Products” and a short name of “bees_products”.  I went through the preferences and turned off the options that generate the trackback related code.

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 “bees_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, Formatting: None, Searchable: Yes
• product_description, Product Description, Textarea, 3 rows, Formatting: XHTML, Searchable: Yes
• product_color, Product Color, Text Input, Formatting: None, Searchable: Yes
• product_dimensions, Product Dimensions, Text Input, Formatting: None, Searchable: Yes
• product_weight, Product Weight, Text Input, Format: None, Searchable: Yes
• product_thumbnail, Product Thumbnail, Text Input, Formatting:None, Searchable: No
• product_image, Product Image, Text Input, Formatting:None, Searchable: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 “bees_products”
• 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 of your screen
• 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 asscociate 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 - “bees_products” 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 “bees_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.

Photos
Each entry will need two photos - a thumbnail and a large image.  The thumbnails will get used on the category index pages and the large images on the product-specific 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 thumbs locally.

I’m using thumbnails that are all the same size—150px by 122px.  My large images are 500px by 375px.  When uploading 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 1 and ideally 2-3 products in each category.  One product can be assigned to more than one category.

Wrapping Up
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.  This is a good place to break, and in the next chapter we’ll start in on the templates that will pull our new content out.

On to Chapter 9.
Back to Chapter 7.