Displaying Categories using Display Pages

Displaying Categories using Display Pages

Available: Liferay DXP/Portal 7.4+.

Using a Display Page Template, you can render Web Content, Documents, and Blog Entries in a Display Page. Starting with Liferay DXP 7.4, you can also render Categories on a Display Page. This can be useful if you want to showcase multiple products or services that you organize using Categories. Because Display Pages are ideal for showing a catalog of elements in a consistent way, you can use Category-based Display Pages to provide users a consistent experience when browsing your products or services catalog.

Displaying Categories in Display Pages

You render Categories in a Display Page in the same way you render other types of Display Page content. There are two options:

You can also assign a Display Page Template to multiple Categories at once. Under Site Administration → CategorizationCategories, check the Categories you want to update and then click the Page (Page) icon or, from the top Actions (Actions) menu, select Assign Display Page Template.

Set the Display Page Template as default using the Actions menu.

Example: Using Category-Based Navigation on a Display Page

This step-by-step example shows you how to use Categories in combination with a Display Page Template to display the services of a fictional insurance company.

These are the steps to display your Categories on a Display Page:

  1. Create and edit the Categories you want to display.
  2. Create the Display Page Template.
  3. Edit and publish the Display Page Template.
warning

The following example shows how to modify a default Display Page Template. To avoid disruptions in your production Site, complete this procedure on a test Site.

Step 1: Creating and Editing the Categories

Create the Categories if they do not exist yet, and include the information you want to map on the Display Page. This example creates two new Categories with a description and a picture, each Category corresponding to a different service.

  1. Create a new Category named Car Insurance.

  2. In the Categories application, click the Actions (Actions) menu for your new category and select Edit.

  3. Click the Details tab and add a Description of this Category.

    Edit the Category and add a Description.

  4. Click the Images tab and add an image for the Category using the Add Image (Add Image) button.

  5. Click again on the Details tab and then click Save.

Step 2: Creating the Display Page Template

Starting with Liferay DXP 7.4, the Display Page Template includes an option to use Categories as the Content Type.

  1. Open the Product MenuDesignPage Templates.

  2. Click Display Page Templates and click the Add (Add Image) button.

  3. Select the Master Page Template you want to use for this Display Page Template.

    tip

    Every Page or Page Template requires a Master Page Template. To learn more, read Master Page Templates.

  4. Enter the Name of your Display Page Template and in the Content Type drop-down menu, select Category.

    Select Navigation as the Content Type of your new Display Page Template.

  5. Click Save.

Step 3: Edit and publish the Display Page Template

After you create the Display Page Template, you can edit the components mappings and layout.

tip

The Display Page Template editor works like the Content Page Editor. See Adding Elements to Content Pages for more information.

This example shows how to map the Category fields using a Card Fragment.

  1. Drag and drop a Container Fragment to the default drop zone.

  2. On top of the Container Fragment, drag and drop a new Card Fragment.

  3. Click on the Browser (Browser)button and then click the Card’s title to open the Mapping options.

  4. In the Mapping tab, click the Source drop-down menu and select Category

  5. Click the Field drop-down menu and select Name to map your Category’s name to the Card’s title.

    Map the Category fields in the Display Page Template using a Card Fragment.

  6. Repeat the same mapping process for the Card description and Card image. This list summarizes the Card Fragment to Category Field mappings in the example:

    • Title → Name
    • Content → Description
    • Image → Main Image
  7. Click Publish.

  8. Under the Display Page Templates list, click the Actions (Actions) menu for the new Display Page Template and choose Mark as Default.

    Set the Display Page Template as default using the Actions menu.

  9. In the Product Menu (Product Menu), go to CategorizationCategories and select the Vocabulary with the Categories from Step 1.

  10. On any Category, click the Actions (Actions) menu and select View Display Page.

    Open the Display Page for one of the categories using the Actions Menu option.

The Display Page uses your Display Page Template mappings to show the Category fields. The Display Page URL is unique for the selected Category.

The Display Page template shows the Category fields and provides a unique URL.