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.

Create catalogs to group related products for effective management.

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.

Define and manage your own products using Liferay commerce features.

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

Channels are the storefront where you can display and sell your products.

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 Ian Miller.

    • Username: ian.miller@clarityvisionsolutions.com
    • Password: learn
  2. Open the Global Menu (Global Menu), go to the Commerce tab, and click Catalogs.

  3. Click Add (Add Button).

  4. Enter the following:

    FieldValue
    NameClarity Eyewear
    Default Catalog LanguageEnglish (United States)
    CurrencyUS Dollar

    Create a catalog to group related products together.

  5. Click Submit to finish creating the catalog.

The catalog should appear in the Catalogs section after saving.

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,

  1. Open the Global Menu (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:

    FieldValue
    TitleFrame Description
    Priority10.0
    Keyframe-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:

    FieldValue
    LabelFrame Material
    DescriptionThe material of the frame.
    Use in Faceted NavigationYes
    Default Specification GroupFrame Description
    Keyframe-material
  9. Click Save to finish creating your specification label.

  10. Create two more specifications with these values:

    • Frame Color

      FieldValue
      LabelFrame Color
      DescriptionThe color of the frame.
      Use in Faceted NavigationYes
      Default Specification GroupFrame Description
      Keyframe-color
    • Frame Size

      FieldValue
      LabelFrame Size
      DescriptionThe size of the frame (in default units).
      Use in Faceted NavigationNo
      Default Specification GroupFrame Description
      Keyframe-size
  11. Return to the Specification Labels page.

Create three Product specification labels.

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 (Global Menu), go to the Commerce tab, and click Products.

  2. Click Add (Add Button) and select Simple.

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

  3. Enter the following:

    FieldValue
    NameClassic Aviator Sunglasses
    CatalogClarity Eyewear
  4. Click Submit to finish creating your product.

    Now you can configure the product. First, add a product description using ChatGPT.

  5. In the Full Description field editor, click on the AI Creator button (AI Creator Button).

  6. Enter a description, tone, and word count.

    For example,

    FieldValue
    DescriptionA product description for a pair of classic aviator sunglasses made for sunny days.
    ToneFriendly
    Word Count200
  7. Click Create. This generates your content.

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

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

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

    Now that the product is categorized, add some specifications.

  11. Scroll down and type Frame in the Add Specifications field.

    This lists available specifications.

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

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

  14. Enter the following:

    FieldValue
    ValueMetal
    Position10
  15. Click Save.

  16. Repeat steps 7-9 for the other specifications and enter these values:

    • Frame Color:

      FieldValue
      ValueGold
      Position20
    • Frame Size:

      FieldValue
      Value54-20
      Position30

    Now that your product has specifications, let’s add an image for the product.

  17. Click Save as Draft to save your changes.

  18. Go to the Media tab.

  19. For Images, click Add (Add Button) and click Select File.

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

  21. Enter these details for the image:

    FieldValue
    TitleClassic Aviator Sunglasses
    Priority10.0
  22. Click Publish to save the product image.

    Add the image to the product's media.

  23. Click Publish to finish creating the product.

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

    ProductSpecificationsCategoriesTagsImage
    AquaComfort Plus DailiesN/AContactsdailyaquacomfort-plus-dailies
    Single Vision LensesN/ALensesdailybiofinity-toric-lenses

    Note: To add the tag, type daily into the Tags field.

    Create three Products.

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 (Global Menu), go to the Commerce tab, and click Channels.

  2. Click Add (Add Button).

  3. Enter the following:

    FieldValue
    NameClarity Public
    CurrencyUS Dollar
    TypeSite
  4. Click Add to finish creating your channel.

    Note: To display products in a site, you must link it to a channel.

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

  6. Choose Clarity Public Enterprise Website.

  7. Click Save.

Create the Clarity Public commerce channel.

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: walter.douglas@clarityvisionsolutions.com
    • Password: learn
  2. Go to the Products page and begin editing it (Edit Button).

  3. Open the Fragments and Widgets panel (Fragments and Widgets).

  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 (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 modal window.

    The Clarity Products categories should appear after saving.

  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 (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 training workspace, go to the [repository-folder]/exercises/lesson-14/ folder and open the commerce-category-navigation-cards.ftl file.

  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 (Edit Button).

  18. Hover over the Commerce Categories Navigation widget, click the Actions button (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.

Use a display template for the Clarity Category Cards widget.

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 (Edit Button) to begin editing the page.

  3. From the Fragments and Widgets panel (Fragments and Widgets), 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 (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 training workspace, go to the [repository-folder]/exercises/lesson-14/ folder and open the commerce-search-results-cards.ftl file.

  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 (Edit Button).

  14. Hover over the Search Results widget, click Actions (Actions Button) 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.

    The Search Results widget should look blank.

  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.

    The Search Results widget should now display the products.

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. In the Page Templates application, go to the Display Page Templates tab, and click New.

  2. Select Primary Master Page.

  3. Enter these values and click Save:

    FieldValue
    NameProduct Details
    Content TypeProduct

    This creates a new display page template for products.

  4. Drag and drop the Product Details Page fragment composition into the drop area.

    Drag and drop the Product Details Page fragment composition into the drop area.

  5. In the Product Details container, map these fragments with their corresponding product fields.

    FragmentFragment Sub-ElementMapping
    Product Nameelement-textName (Basic Information)
    SKUelement-textSKU (Basic Information)
    Descriptionelement-htmlDescription (Basic Information)
  6. Select the button’s link sub-element and configure these settings:

    TabFieldValue
    LinkLinkPage
    LinkPageContact Us
  7. Double click the Button fragment and change its text to Contact Sales.

  8. In the Specifications container, double click the Heading fragment and change its text to Specifications.

  9. Map fragments in the Specifications container to their fields:

    FragmentFragment Sub-ElementMapping
    Specification Nameelement-textName (Basic Information)
    Specification Valueelement-textValue (Basic Information)
  10. In the Attachments container, double click the Heading fragment and change its text to Attachments.

  11. Map fragments in the Attachments container to their fields:

    FragmentFragment Sub-ElementMapping
    Attachment Nameelement-textTitle (Basic Information)
  12. Select the Download button and configure these settings in the configuration side panel:

    TabFieldValue
    GeneralStyleLink
    GeneralSizeSmall
  13. Select the Download button’s link sub-element and configure these settings:

    TabFieldValue
    LinkLinkMapped URL
    LinkFieldDownload URL
  14. Double click the Download button and change its text to Download.

  15. Click Publish.

  16. Click Actions (Actions Button) for the Product Details template and select Mark as Default.

  17. 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:

Capabilities

Product

Contact Us

Connect

Powered by Liferay
© 2024 Liferay Inc. All Rights Reserved • Privacy Policy