Develop the Products Feature Part 1: Document Type

Previous Step

Add the Secondary Navigation Menu to the About Page

This section guides you through creating the Products feature, starting with defining the Product document type and content bean.

Product Document Type

Review the web design for the Products Overview and Product Detail pages. Identify the properties displayed for each product:

• Title
• Price
• One or more images
• Introduction (short description shown in the products overview)
• Description (long description shown on product detail pages)
• Rating (not included in this sprint)

Access Bloomreach Content at http://localhost:8080/cms/. Log in as user admin with password admin.

Open the Content application and select Document Types from the dropdown menu.

Add a new document type to the gogreen namespace. Use the context menu to select New document type.

In the dialog, enter the name product and leave the supertype set to the default value basedocument. Click next.

Select the 1 Column layout for the new document type. Click finish.

The document type editor opens. Add the following fields:

Field Type	Caption	Path	Required	Multiple
String	Title	title	yes	no
Decimal Number	Price	price	yes	no
Text	Introduction	introduction	yes	no
Rich Text Editor	Description	description	yes	no
Image Link	Images	images	yes	yes

Click Done to save and close the editor.

From the Type Actions menu, select Commit to activate the new document type.

Open the setup application at http://localhost:8080/essentials/.

In the Tools section, use the Template Query Generator to generate template queries for the product document type. Template queries control which document types can be created in specific folders. For more details, see Controlling Allowed Document Types in a Folder.

Click the Document button for product, then the Folder button for product to generate the template queries.

Return to the CMS. In the Content application, select Images from the dropdown in the left column. Add a new folder named products under the root image folder GoGreen.

Upload product images from the web design, for example:

• binaries/content/gallery/products/smcenturian_detail.jpg
• binaries/content/gallery/products/lifeproof-ipad-case.jpg
• binaries/content/gallery/products/family-tent.jpg

Next, select Documents from the dropdown in the left column. Add a new translated folder named products under the root content folder GoGreen.

Open the context menu for the products folder and select Edit allowed content...

In the dialog, remove the two default template queries (Add new translated... folder and Add new document...). Use the dropdown to add these two queries:

• Add new product folder...
• Add new product document...

Click OK to save. The products folder is now configured so only product documents can be created in it and its subfolders.

Create product documents in the products folder and publish them.

Use product names and images from the web design, for example:

• Solar Centurian - Outdoor Security Light
• Lifeproof nüüd IPad Air Case
• MEC Lodge 4+4 Tent

Next Step

Develop the Products Feature Part 2: Products Overview Page