Embedding portlets and setting preferences in a Liferay 7.2 theme

How to embed a Navigation Menu portlet in a theme's freemarker template and set portlet preferences

Neil Griffin
Neil Griffin
Egy perces olvasmány

As you might expect, there are a few other configurations that are available to us and once you click Submit you'll see all of the options available.  


 

This is the screen that allows you to provide localized values for Name as well as a localized Description.  We can also decide if we want our option to appear in the Option Facet in our search experiences.   This would be very useful for options such as Color or Size, but wouldn't make sense for a free form text option for something like monogramming.  We can also select if option will be required before adding the item to your cart and finally we can decide if this option is a SKU Contributor.  SKU Contributors are options that are tied to different SKUs.  Again, think of options such as Color or Size.  Each of these will correspond to a different item on a shelf in the store of the warehouse, but an option such as monogramming wouldn't typically be tied to a different SKU.  

Importing Options

As I've mentioned previously when working with Liferay's Headless APIs, the easiest way to get started is with Liferay's API Explorer.  To do this, be sure you are logged in as an Administrator and navigate to the Liferay API Explorer (e.g. http://localhost:8080/o/api).  We're going to be working with the Commerce Admin Catalog API (/headless-commerce-admin-catalog/v1.0).  Thankfully the Product Option related endpoints are all very intuitively named and we'll start in the Option section.  


If we are creating or importing a single Option we can POST to the /o/headless-commerce-admin-catalog/v1.0/options endpoint or if we are going to be working with multiple options we can use the /o/headless-commerce-admin-catalog/v1.0/options/batch

endpoint.  In either case, I recommend you start with a GET against the

/o/headless-commerce-admin-catalog/v1.0/options

Here are the steps that I took to accomplish this task:

  • As an Administrator, go to the Control Panel and click on Site Builder > Pages
  • Added three widget pages: P1, P2, and P3
  • Clicked on "Go to Site" and then added a "Navigation Menu" widget to the home page
  • Added a new navigation menu named "MyMenu" and added P1, P2, and P3
  • Clicked on the "..." ellipses for the portlet and click on "Configuration"
  • Clicked on the "Choose Menu" radio button
  • Clicked on the "Select" button and clicked on "MyMenu"
  • Clicked on the "Save" button
    •

theme and to make the navigation display a specific set of pages.I recently came across a requirement to embed a Navigation Menu portlet in a Liferay 7.2

At this point the navigation menu looked like the following:

When I clicked the "Save" button, Liferay persisted some portlet preferences to the database. Knowing this, I shut down the portal in order to look at the $LIFERAY_HOME/data/hypersonic/lportal.script database in order to find out what the preferences looked like.

WARNING: Looking directly in the Liferay database isn't a best practice. I only show it here to help the reader understand what's going on behind the scenes. Olaf Kock developed the layout-info-web module that you can use to read the portlet preferences for everything on a page. You can also find out the preference names in the OSGi configuration Java source. For example: SiteNavigationMenuPortletInstanceConfiguration.java

After viewing the lportal.script file and searching for "MyMenu", I found this:

INSERT INTO SITENAVIGATIONMENU VALUES(0,'46b6d781-ed21-8c5d-dd36-6518a89bc1e1',36622,35019,20101,20130,'Admin User','2020-05-01 17:07:20.523000','2020-05-01 17:07:20.523000','MyMenu',0,'1',NULL)

I took note of "36622" as the primary key and then searched the file for that value:

INSERT INTO PORTLETPREFERENCES VALUES(1,36621,20101,0,3,18,'com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_RjnkBjOsupLW','<portlet-preferences><preference><name>displayStyle</name><value>ddmTemplate_NAVBAR-BLANK-FTL</value></preference><preference><name>siteNavigationMenuId</name><value>36622</value></preference><preference><name>displayDepth</name><value>0</value></preference><preference><name>rootMenuItemType</name><value>absolute</value></preference><preference><name>siteNavigationMenuType</name><value>-1</value></preference><preference><name>expandedLevels</name><value>auto</value></preference><preference><name>rootMenuItemLevel</name><value>0</value></preference><preference><name>displayStyleGroupId</name><value>35019</value></preference></portlet-preferences>')

With this information, I learned exactly which portlet preference name+value pairs that I needed for my embedded navigation portlet.

The next step was to create a custom theme:

npm install -g yo
yo liferay-theme

After setting the theme name, Liferay version, etc. the aforementioned command generated a theme project for me.

I then copied node_modules/liferay-frontend-theme-unstyled/templates/portal_normal.ftl to src/templates/portal_normal.ftl and modified it with the following:

        <#assign myNavPrefs = freeMarkerPortletPreferences.getPreferences({"displayStyle": "ddmTemplate_NAVBAR-BLANK-FTL", "siteNavigationMenuId": "36622", "displayDepth": "0", "rootMenuItemType": "absolute", "siteNavigationMenuType": "-1", "expandedLevels": "auto", "rootMenuItemLevel": "0", "displayStyleGroupId": "35019"}) />
        <@liferay_portlet["runtime"]
            defaultPreferences="${myNavPrefs}"
            instanceId="ABCDEF"
            persistSettings=false
            portletName="com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet"
        />

After deploying the theme with gulp deploy I was able to apply the theme to my site, and the Navigation Menu portlet appeared on every page.

References: