Using Clarity’s Products as Content
Although they are not yet building an e-commerce storefront, Clarity wants to leverage some Liferay commerce capabilities to create product content. While it is feasible to build Clarity’s product material using web content structures, Liferay’s commerce features provide an additional layer of future-proofing to the website. In this section, we’ll cover the following commerce features:
- Catalogs
- Products
- Channels
Catalogs
A catalog is a group of related products. Liferay catalogs provide a highly flexible way to organize your product offerings in the most sensible way for your business. There is no limit to the number of catalogs you can create, although maintenance effort should be a factor in how many you choose to have. Catalogs also enable you to define permissions for the products they contain, so that different product teams can manage different product groupings.
In addition, catalogs capture important commerce attributes like language, currency, and price lists, along with a placeholder image for products without an associated image. As useful as catalogs are, they are just empty containers without the products to populate them. Let’s take a look at products next.
Products
Like any manufacturer, Clarity has variants of their products designed to achieve different goals and target different customer profiles. Liferay Commerce supports four product types out of the box:
-
Simple Product: Any physical product for which inventory is tracked.
-
Virtual Product: Any non-tangible product, such as music files, electronic publications, services, and warranties.
-
Grouped Product: Two or more products from a Catalog that are packaged together and sold as a single item. Grouped products are tracked in your inventory and can contain simple products, virtual products, or other grouped products.
-
Shop by Diagram: Component parts belonging to a Bill of Materials (BOM) diagram that references products in the store.
Products offer more than just a predefined type of content–they offer many additional features that together create a first-class commerce experience with minimal effort:
- Product details
- Product options
- Units of measure
- Configurable products
- Product media (images, videos, etc.)
- Related products
- Downloadable product documents
- Product availability
- Product variants
While Clarity could model all of these product types and attributes with web content structures, Liferay commerce provides an intuitive solution that you can implement with ease.
Channels
Once their products and catalogs are configured, Clarity needs to think about how they will display their products to customer and website visitors. Channels are the storefront where products are displayed and sold to customers. They come with several useful features:
-
Store administrators can create multiple channels, each representing a different customer experience (B2B, B2C, B2X)
-
Channels can be linked to Liferay sites
-
You can use Liferay’s headless APIs to creative native mobile applications with channels or integrate channels with external marketplaces
-
Channels define default display languages and currencies, as well as default product display pages and category pages
-
For transactional sites, channels offer payment, shipping, and tax information
While e-commerce isn’t Clarity’s main focus right now, setting up these features will set them up for success in the future.
Exercise: Creating Clarity’s Products Catalog
A catalog is a group of related products. Liferay catalogs provide a highly flexible way to organize your product offerings in the most sensible way for your business.
Here you’ll create a catalog for Clarity’s products as Ian Miller.
To do this,
-
Sign in as Ian Miller.
- Username:
ian.miller@clarityvisionsolutions.com
- Password:
learn
- Username:
-
Open the Global Menu (), go to the Commerce tab, and click Catalogs.
-
Click Add ().
-
Enter the following:
Field Value Name Clarity Eyewear
Default Catalog Language English (United States) Currency US Dollar -
Click Submit to finish creating the catalog.
Great! Now that you’ve created the catalog, you can start adding products to it. But first, let’s add specifications that you can add to Clarity’s products when you create them.
Exercise: Defining Product Specifications
Product specifications store information about products, like size, material, and color. To improve organization, you can also save them into specification groups.
Here you’ll add product specifications as Ian Miller.
To do this,
-
Open the Global Menu (), go to the Commerce tab, and click Specifications.
-
Click the Specification Groups tab.
-
Click New to add a new specification group.
-
Enter the following:
Field Value Title Frame Description
Priority 10.0
Key frame-description
-
Click Save to finish creating your product specification group.
You can now add product specifications to it.
-
Return to the Specification Groups overview and go to the Specification Labels tab.
-
Click New to add a new specification.
-
Enter the following:
Field Value Label Frame Material
Description The material of the frame.
Use in Faceted Navigation Yes Default Specification Group Frame Description Key frame-material
-
Click Save to finish creating your specification label.
-
Create two more specifications with these values:
-
Frame Color
Field Value Label Frame Color
Description The color of the frame.
Use in Faceted Navigation Yes Default Specification Group Frame Description Key frame-color
-
Frame Size
Field Value Label Frame Size
Description The size of the frame (in default units).
Use in Faceted Navigation No Default Specification Group Frame Description Key frame-size
-
-
Return to the Specification Labels page.
Now that you’ve added some specifications, you can apply them to products as you create them.
Exercise: Creating Products
Products represent the items sold by a company. Like any manufacturer, Clarity has a wide variety of products designed to achieve different goals and target different customer profiles.
Here you’ll add products to Clarity’s catalog, apply specifications and more as Ian Miller.
To do this,
-
Open the Global Menu (), go to the Commerce tab, and click Products.
-
Click Add () and select Simple.
Note: A simple product is any physical product for which inventory is tracked.
-
Enter the following:
Field Value Name Classic Aviator Sunglasses
Catalog Clarity Eyewear -
Click Submit to finish creating your product.
Now you can configure the product. First, add a product description using ChatGPT.
-
In the Full Description field editor, click on the AI Creator button ().
-
Enter a description, tone, and word count.
For example,
Field Value Description A product description for a pair of classic aviator sunglasses made for sunny days. Tone Friendly Word Count 200
-
Click Create. This generates your content.
-
Click Add to copy the response into the Full Description field.
Alternatively, click Try Again to generate a new response.
Now that you’ve added a long description, let’s categorize the product.
-
In the Categorization section, click Select for Clarity Products.
-
Select Sunglasses and click Done to apply the category to this item.
Now that the product is categorized, add some specifications.
-
Scroll down and type
Frame
in the Add Specifications field.This lists available specifications.
-
Select Frame Material, Frame Color, and Frame Size specifications, and close the modal window.
-
In the Specifications section, click Frame Material to begin editing it.
-
Enter the following:
Field Value Value Metal
Position 10
-
Click Save.
-
Repeat steps 7-9 for the other specifications and enter these values:
-
Frame Color:
Field Value Value Gold
Position 20
-
Frame Size:
Field Value Value 54-20
Position 30
Now that your product has specifications, let’s add an image for the product.
-
-
Click Save as Draft to save your changes.
-
Go to the Media tab.
-
For Images, click Add () and click Select File.
-
Select the classic-aviator-sunglasses image from the Product Images asset library.
-
Enter these details for the image:
Field Value Title Classic Aviator Sunglasses Priority 10.0 -
Click Publish to save the product image.
-
Click Publish to finish creating the product.
-
Repeat the above steps to create two more products: AquaComfort Plus Dailies and Single Vision Lenses. Tags should be typed directly into the Tags field in the Details screen.
Product Specifications Categories Tags Image AquaComfort Plus Dailies
N/A Contacts daily aquacomfort-plus-dailies Single Vision Lenses
N/A Lenses daily biofinity-toric-lenses Note: To add the tag, type
daily
into the Tags field.
Great! Now that you’ve added products, you can set up a channel to display them in Clarity’s site.
Exercise: Creating a Commerce Channel
Channels determine the storefront where products are displayed and sold to customers.
Here you’ll create a channel and link it to Clarity’s public enterprise website as Ian Miller.
To do this,
-
Open the Global Menu (), go to the Commerce tab, and click Channels.
-
Click Add ().
-
Enter the following:
Field Value Name Clarity Public
Currency US Dollar Type Site -
Click Add to finish creating your channel.
Note: To display products in a site, you must link it to a channel.
-
Go to the Type tab and click Select Site.
-
Choose Clarity Public Enterprise Website.
-
Click Save.
With the channel created, let’s return to Clarity’s site and finish setting up their product pages.
Exercise: Setting Up the Product Pages
The training workspace includes three pages for displaying Clarity’s products: Products, Product List, and Product Details. Each page is already wireframed.
Here you’ll finish setting up each page as Walter Douglas.
Updating the Products Page
The Products page is a marketing page intended to showcase the product categories defined in the Clarity Products vocabulary. By selecting a category, users are directed to the Product List page where they’ll only see products from the selected category.
To implement this,
-
Sign in as Walter Douglas.
- Email:
walter.douglas@clarityvisionsolutions.com
- Password:
learn
- Email:
-
Go to the Products page and begin editing it ().
-
Open the Fragments and Widgets panel ().
-
Go to the Widgets tab.
-
Drag and drop the Commerce Categories Navigation widget into the Commerce Categories container.
-
Hover over the widget, click the Actions button () in the top right corner of the widget, and select Configuration.
-
For Vocabulary, select Clarity Products.
Note: Do not enable the Use Root Category option.
-
Click Save and close the modal window.
-
Click Publish to view the updated page.
Currently, you have a list of categories, but this is a long way from Clarity’s designs. The content of this widget is dynamically updated, so it’s easier to maintain as new categories are added and old categories are updated or retired. Now let’s do something about the design.
-
Open the Site Menu (), expand Design, and select Templates.
-
Go to the Widget Templates tab.
-
Click New and select Commerce Categories Navigation Template.
-
Enter
Clarity Category Cards
as the template name. -
From the training workspace, go to the
[repository-folder]/exercises/lesson-14/
folder and open thecommerce-category-navigation-cards.ftl
file. -
Copy and paste the contents of this file into the editor.
-
Click Save.
-
Return to the Products page and begin editing it ().
-
Hover over the Commerce Categories Navigation widget, click the Actions button () in the top right corner of the widget, and select Configuration.
-
For Display Template, select Clarity Category Cards.
-
Click Save and close the window.
-
Click Publish to view the page.
Great! You can see we are a lot closer to the final design requested by Clarity. Now that you’ve finished the Products page, let’s complete the Product List page.
Creating the Product Listing Page (PLP)
As you’ve probably noticed, while the Commerce Categories Navigation widget looks better and provides us links to each category, the links aren’t working. That’s because Liferay doesn’t know which page to display for each category. For Liferay to recognize a page as a category display page, we can either assign it in the Channel settings or add the Category Content widget to it.
Currently, the Product List page includes most of the necessary widgets to display lists of products, but it’s not connected to Liferay’s category display feature.
To fix this,
-
Go to the Product List page.
-
Click Edit () to begin editing the page.
-
From the Fragments and Widgets panel (), drag and drop the Category Content widget just above the Search Results container.
-
Click Publish.
-
Return to the Products page and click one of the category cards to confirm it is working properly.
The Category Navigation should be working. However, the Search Results widget is blank, as it has no display template set to it. To fix that, let’s create a new template for that widget.
-
Open the Site Menu (), expand Design, and select Templates.
-
Go to the Widget Templates tab.
-
Click New and select Search Results Template.
Important: There are two “Search Results Template” options. One is for general search results while the other one is for Commerce products. Try selecting the second option first. If it’s the right one, you will see some commerce specific variables in the Elements menu (i.e., Commerce Product Search Result Display Context and Commerce Product Catalog Entries). If you do not see these variables, try using the other template.
-
Enter
Clarity Search Results Cards
as the template name. -
From the training workspace, go to the
[repository-folder]/exercises/lesson-14/
folder and open thecommerce-search-results-cards.ftl
file. -
Copy and paste the contents of this file into the editor.
-
Click Save.
-
Go to the Product List page and begin editing it ().
-
Hover over the Search Results widget, click Actions () in the top right corner of the widget, and select Configuration.
Note: The Search Results widget should look blank, towards the bottom right side of the layout.
-
For Render Selection, select Use Application Display Template.
-
For Display Template, select Clarity Search Results Cards.
Note: If you don’t see the template here, return to step 8 and try the other Search Results template.
-
Click Save and close the window.
-
Click Publish.
-
Return to the Products page and click one of the category cards to confirm it is working properly and you are seeing your new template.
Creating the Product Display Page
Finally, when you click a product in the Product List page, it doesn’t work as expected. This is because Liferay doesn’t know which page to use to display product details.
To fix this,
-
In the Page Templates application, go to the Display Page Templates tab, and click New.
-
Select Primary Master Page.
-
Enter these values and click Save:
Field Value Name Product Details
Content Type Product This creates a new display page template for products.
-
Drag and drop the Product Details Page fragment composition into the drop area.
-
In the Product Details container, map these fragments with their corresponding product fields.
Fragment Fragment Sub-Element Mapping Product Name element-text Name (Basic Information) SKU element-text SKU (Basic Information) Description element-html Description (Basic Information) -
Select the button’s link sub-element and configure these settings:
Tab Field Value Link Link Page Link Page Contact Us -
Double click the Button fragment and change its text to
Contact Sales
. -
In the Specifications container, double click the Heading fragment and change its text to
Specifications
. -
Map fragments in the Specifications container to their fields:
Fragment Fragment Sub-Element Mapping Specification Name element-text Name (Basic Information) Specification Value element-text Value (Basic Information) -
In the Attachments container, double click the Heading fragment and change its text to
Attachments
. -
Map fragments in the Attachments container to their fields:
Fragment Fragment Sub-Element Mapping Attachment Name element-text Title (Basic Information) -
Select the Download button and configure these settings in the configuration side panel:
Tab Field Value General Style Link General Size Small -
Select the Download button’s link sub-element and configure these settings:
Tab Field Value Link Link Mapped URL Link Field Download URL -
Double click the Download button and change its text to Download.
-
Click Publish.
-
Click Actions () for the Product Details template and select Mark as Default.
-
Return to the Category Display page and select one of the products to confirm it is working.
Conclusion
Congratulations! You’ve finished setting up Clarity’s product pages. Next, lest’s explore how Clarity can set up publishing workflows in Liferay DXP.
Next Up: Implementing Clarity’s Content Publishing Workflow
Additional Resources
See official documentation to learn more about using Liferay Commerce features: