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 you organized 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 the same way you render other types of display page content:

• Create a display page template for categories and set this template as the default one.
• Select the display page template of your choice when you create or edit the category.

You can also assign a display page template to multiple categories at once.

1. Open the Site Menu () and navigate to Categorization → Categories.

2. Check the categories you want to update and click Page () or, from the top Actions menu () menu, select Assign Display Page Template.

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.

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. Open the Site Menu () and navigate to Categorization → Categories.

2. Create a new vocabulary named Vehicle Ownership.

3. Create a new category named Car Insurance. Click Save.

4. In the categories application, click Actions () for your new category and select Edit.

5. Click the Images tab and click Add () to add an image for the category.

6. Click the Details tab and add a description of this category.

   

7. 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 Site Menu () and navigate to Design → Page Templates.

2. Click Display Page Templates and click Add ().

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.

   

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 the 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 Specific Content

5. Click Item and select the category you want to map.

6. Click the Field drop-down menu and select Name to map your category’s name to the card’s title.

   

7. Repeat the same mapping process for the card description. This list summarizes the card fragment to category field mappings in the example:

   • Title → Name
   • Content → Description
   • Image → Main Image

8. Click Publish.

9. Under the Display Page Templates list, click Actions () for the new display page template and choose Mark as Default.

   

10. Open the Site Menu (), navigate to Categorization → Categories, and select the vocabulary with the categories from step 1.

11. On any category, click Actions () and select View Display Page.

    

The display page uses your display page template mappings to show the category fields. The display page URL is unique for the selected category.

Related Topics

• Creating and Managing Display Page Templates
• Publishing Content With Display Pages
• Defining Categories and Vocabularies for Content.