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:
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. Under Site Administration → Categorization → Categories, check the Categories you want to update and then click the Page (
) icon or, from the top Actions (
) 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.
These are the steps to display your Categories on a Display Page:
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.
Create a new Category named Car Insurance.
In the Categories application, click the Actions (
) menu for your new category and select Edit.Click the Details tab and add a Description of this Category.
Click the Images tab and add an image for the Category using the Add Image (
) button.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.
Go to Site Administration → Design → Page Templates.
Click Display Page Templates and click the Add (
) button.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.
Enter the Name of your Display Page Template and in the Content Type drop-down menu, select Category.
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.
Drag and drop a Container Fragment to the default drop zone.
On top of the Container Fragment, drag and drop a new Card Fragment.
Click on the Selection menu (A) and then click the Card’s title (B) to open the Mapping options.
In the Mapping area and the Source drop-down menu, select Category if it’s not selected already.
Click the Field drop-down menu and select Name (C) to map your Category’s name to the Card’s title.
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
Click Publish.
Under the Display Page Templates list, click the Actions (
) menu for the new Display Page Template and choose Mark as Default.
Go to Site Administration → Categorization → Categories and select the Vocabulary with the Categories from Step 1.
On any Category, click the Actions (
) menu 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.
