Creating Clarity’s Commerce 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,

1. Sign in as the Ian Miller.

   • Username: [e-mail]
   • Password: learn

2. Open the Global Menu (), go to the Commerce tab, and click Catalogs.

3. Click Add ().

4. Enter the following:

   Field	Value
   Name	Clarity Eyewear
   Default Catalog Language	English (United States)
   Currency	US Dollar

   

5. 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 specifications as Ian Miller, which you’ll apply to Clarity’s products in the next exercise.

To do this,

1. Open the Global Menu (), go to the Commerce tab, and click Specifications.

2. Click the Specification Groups tab.

3. Click New to add a new specification group.

4. Enter the following:

   Field	Value
   Title	Frame Description
   Priority	10.0
   Key	frame-description

5. Click Save to finish creating your product specification group.

   You can now add product specifications to it.

6. Return to the Specification Groups overview and go to the Specification Labels tab.

7. Click New to add a new specification.

8. 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

9. Click Save to finish creating your specification label.

10. 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

11. 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,

1. Open the Global Menu (), go to the Commerce tab, and click Products.

2. Click Add () and select Simple.

   Note

   A simple product is any physical product for which inventory is tracked.

3. Enter the following:

   Field	Value
   Name	Classic Aviator Sunglasses
   Catalog	Clarity Eyewear

4. Click Submit to finish creating your product.

   Now you can configure the product. First, add a category to it.

5. In the Categorization section, click Select for Clarity Products.

6. Select Sunglasses and click Done to apply the category to this item.

   Now that the product is categorized, add some specifications.

7. In the Details tab, scroll down and type Frame in the Add Specifications field.

   This lists available specifications.

8. Select Frame Material, Frame Color, and Frame Size specifications, and close the modal window.

9. In the Specifications section, click Frame Material to begin editing it.

10. Enter the following:

    Field	Value
    Value	Metal
    Position	10

11. Click Save.

12. 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.

13. Click Save as Draft to save your changes.

14. Go to the Media tab.

15. For Images, click Add () and click Select File.

16. Select the classic-aviator-sunglasses image from the Product Images asset library.

17. Enter these details for the image:

    Field	Value
    Title	Classic Aviator Sunglasses
    Priority	10.0

18. Click Publish to save the product image.

    

19. Click the Details tab and click Publish to publish the product.

20. 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

    

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,

1. Open the Global Menu (), go to the Commerce tab, and click Channels.

2. Click Add ().

3. Enter the following:

   Field	Value
   Name	Clarity Public
   Currency	US Dollar
   Type	Site

4. Click Add to finish creating your channel.

   Note

   To use a channel to sell products, you must link it to a site.

5. Go to the Type tab and click Select Site.

6. Choose Clarity Public Enterprise Website.

7. 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,

1. Sign in as Walter Douglas.

   • Email: [e-mail]
   • Password: learn

2. Go to the Products page and begin editing it ().

3. Open the Fragments and Widgets tab () in the side panel.

4. Go to the Widgets tab.

5. Drag and drop the Commerce Categories Navigation widget into the Commerce Categories container.

6. Hover over the widget, click the Actions button () in the top right corner of the widget, and select Configuration.

7. For Vocabulary, select Clarity Products.

   Note

   Do not enable the Use Root Category option.

8. Click Save and close the window.

   

9. 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.

10. Open the Site Menu (), expand Design, and select Templates.

11. Go to the Widget Templates tab.

12. Click New and select Commerce Categories Navigation Template.

13. Enter Clarity Category Cards as the template name.

14. From the downloaded course bundle, navigate to the [repository-folder]/exercises/lesson-14/ folder and open the commerce-category-navigation-cards.ftl file on your machine.

15. Copy and paste the contents of this file into the editor.

16. Click Save.

17. Return to the Products page and begin editing it ().

18. Hover over the Commerce Categories Navigation widget, click the Actions button () in the top right corner of the widget, and select Configuration.

19. For Display Template, select Clarity Category Cards.

20. Click Save and close the window.

21. 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,

1. Go to the Product List page.

2. Click Edit () to begin editing the page.

3. From the Fragments and Widgets tab (), drag and drop the Category Content widget just above the Search Results container.

4. Click Publish.

5. 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.

6. Open the Site Menu (), expand Design, and select Templates.

7. Go to the Widget Templates tab.

8. 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.

9. Enter Clarity Search Results Cards as the template name.

10. From the downloaded course bundle, navigate to the [repository-folder]/exercises/lesson-14/ folder and open the commerce-search-results-cards.ftl file on your machine.

11. Copy and paste the contents of this file into the editor.

12. Click Save.

13. Go to the Product List page and begin editing it ().

14. 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.

    

15. For Render Selection, select Use Application Display Template.

16. 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.

17. Click Save and close the window.

18. Click Publish.

19. 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,

1. Go to the Product Detail page.

   This page already includes most of the necessary widgets for displaying products. We’re just missing the Product Detail widget to make everything work.

2. From the Fragments and Widgets tab (), drag and drop the Product Detail widget above the provided Product Publisher widget.

3. Publish the page.

4. Return to the Category Display page and select one of the products to confirm it is working.

We’re almost there, but just as before, the out-of-the-box widget doesn’t align with our designs.

Bonus: As a bonus exercise, repeat the steps from the previous exercise to create a Product Detail widget that matches the Clarity Vision Solutions design.

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: Publishing Content with Workflows

Additional Resources

See official documentation to learn more about using Liferay Commerce features:

• Introduction to Liferay Commerce
• Catalogs
• Creating and Managing Products
• Channels