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:
- 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.
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.
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.
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.
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.