How to create and display a Product Tree in Hybris Commerce

Wilco Menge, 03 October 2018

In this weeks blog I will show you how you can model and display a tree of products in Hybris Commerce.

The end goal is to present an overview of a training schedule to the end user. The schedule consists of training their prerequisite relations.

Note: I’m not talking about a tree of products, not a Product Hierarchies; which is something different in the SAP terminology. (A Product Hierarchy is a separate hierarchy to which products can be assigned. This can be helpful in building a catalog.)

The Product tree we are going to build shows relations between products, such as compound products (Product A contains Product B) or a training catalogue (Product A is a prerequisite of Product B).

We will render the tree with a cool javascript library: dagre-d3.

Defining the Catalog Changes

Changes in the Catalog of Hybris Commerce can be quite small or none at all, depending on your needs. Hybris commerce already allows you to define relations between Types, and a relation between Products is already available.

In the Backoffice, you can define relations between products:

These relations have a Type, such as ‘Similar’, ‘Upsell’ or ‘Consists of’. If the relation type you want to model isn’t available, you can just add it. The Product Reference is modeled as a relation between the Product Type and the ProductReference Type. The ProductReference Type has a field referenceType of type ProductReferenceTypeEnum:

This Enum can be extended in your *-items.xml:

Now you are ready to enter some test data in the system:

Defining the CMS Changes

Now that we can maintain our data, it is time to show it on screen. For this part, more changes are needed. We need to define:

A CMS Component Type that can show our tree
A CMS Page with Content Slots and Page Restrictions, so that the tree is only rendered for specific categories

For brevity, I will not elaborate on the CMS page.

Custom CMS Component

Create a new Item Type based on SimpleCMSComponent:

Create yourstorefront/web/webroot/WEB-INF/views/responsive/cms/customcmscomponent.jsp

This is the starting point for your integration with the javascript library.

Rendering the Tree (Almost)

Before we render the tree we still have one problem: We want to show the tree on a Category page, which is populated from Solr for performance reasons. However, Solr only contains a limited set of attributes, and this set doesn’t contain Product References. This means we need to populate the relations from the database.

First we need to register a populator that will be called everytime a search result item will be shown on screen:

Next, we need to implement the populator. There is already an existing populator for Product References, so can simply delegate the work to that bean:

Rendering the Tree (At last)

Now, we have all information readily available in our jsp file we can get started!

There are many javascript libraries that can aid in visualising information, a good overview is here. I have selected dagre-d3, mainly because it is simple to start with: You just supply it with the nodes and edges you want to draw and it will automatically lay-out a diagram:

Result:

The complete example can be found in this fiddle

Now all we need to do is use the information from Hybris Commerce to build up this list in the jsp component:

And the ouptut will be shown on the relevant Category pages. So when the user browses in the catalogue and selects a category, he or she will see a nice hierarchy: