Develop the Products Feature Part 1: Document Type - BloomReach Experience - Open Source CMS

This article covers a Hippo CMS version 10. There's an updated version available that covers our most recent release.

15-07-2015

Develop the Products Feature Part 1: Document Type

Previous Step

Add the Secondary Navigation Menu to the About Page

In the next couple of steps you will develop a complete new feature (Products) from scratch, starting with the Product document type and content bean.

Product Document Type

Point your browser to the web design and study the Products Overview and Product Detail pages. Identify the different properties of a product that are displayed:

  • Title
  • Price
  • One or more images
  • Introduction (short description in products overview)
  • Description (long description on product detail pages)
  • Rating (out of scope in this sprint)

Point your browser to Hippo CMS:  http://localhost:8080/cms/. Log in as user 'admin' with password 'admin'.

Open the Content tab and select 'Document Types' from the dropdown.

Add a new document type to the 'gogreen' namespace by choosing 'New document type' from its context menu.

In the dialog that appears, enter the name "product" and leave the supertype to the default selection 'basedocument'. Click 'next'.

Choose the '1 Column' layout for the new document type. Click 'finish'.

The new document type is opened in the document type editor. Add the following fields:

Field Type Caption Path Required Multiple
String Title title yes no
Double Price price yes no
Text Introduction introduction yes no
Rich Text Editor Description description yes no
Imagelink Images images yes yes

Click 'Done' to save your work and close the editor.

From the 'Type Actions' menu choose 'Commit' to activate the new document type.

Select 'Images' from the dropdown in the left column and add a new folder 'products' under the root image folder 'gogreen'.

Upload some 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

Select 'Documents' from the dropdown in the left column and add a new translated folder 'products' under the root content folder 'gogreen'.

Create some product documents in the 'products' folder and publish them.

You can use product names from the web design, and the images you just uploaded, for example:

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

Load the setup application in your browser:  http://localhost:8080/essentials/.

Use the Beanwriter in the Tools section to (re-)generate content beans for your project. It will pick up the new product document type and create a new Java class.

Make sure that under "Use the following image set for new methods of image return type" you check "Imageset".

Make sure "Update existing methods with selected image set, too" is  not checked.

Open the file  site/src/main/java/org/example/beans/Product.java that was created in your project.

package org.example.beans;

import org.onehippo.cms7.essentials.dashboard.annotations.HippoEssentialsGenerated;
import org.hippoecm.hst.content.beans.Node;
import org.hippoecm.hst.content.beans.standard.HippoDocument;
import org.hippoecm.hst.content.beans.standard.HippoHtml;
import java.util.List;
import org.example.beans.Imageset;

@HippoEssentialsGenerated(internalName = "gogreen:product")
@Node(jcrType = "gogreen:product")
public class Product extends BaseDocument {
    @HippoEssentialsGenerated(internalName = "gogreen:title")
    public String getTitle() {
        return getProperty("gogreen:title");
    }

    @HippoEssentialsGenerated(internalName = "gogreen:price")
    public Double getPrice() {
        return getProperty("gogreen:price");
    }

    @HippoEssentialsGenerated(internalName = "gogreen:introduction")
    public String getIntroduction() {
        return getProperty("gogreen:introduction");
    }

    @HippoEssentialsGenerated(internalName = "gogreen:description")
    public HippoHtml getDescription() {
        return getHippoHtml("gogreen:description");
    }

    @HippoEssentialsGenerated(internalName = "gogreen:images")
    public List<Imageset> getImages() {
        return getLinkedBeans("gogreen:images", Imageset.class);
    }
}

Note the "get" methods that have been generated for each field you added to the document type.

Stop, rebuild and restart the application.

Next Step

Develop the Products Feature Part 2: Products Overview Page

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?