Situation

The default hybris, it is required to upload separate image variants for different resolutions and purposes. As a rule, these images are downscaled copies of the larger image. In OOTB hybris you need to resize/crop the images manually using 3rd party software installed on your PC. There are a couple of reasons why SAP didn’t integrate the automatic crop and resize into the platform. The first one is that different variants may have different proportions and cropping may not work well for some images.Smart cropping needs an intervention of the designers, so you need to provide them with the appropriate tools. The second reason is that a dumb resize won’t work for the images that are full of small details or small fonts (and it is important to leave them readable).

Challenge

I would like to demonstrate the proof of concept of crop and resize functionality for hybris. It is well-integrated into Product cockpit and very convenient in use. With this feature, you will be able to significantly improve the product management process without losing flexibility. There are different image types in the product data in Hybris, to name a few:

• Thumbnail type, for search results and category pages
• Normal/picture type, for the product page, as the main picture
• Detailed type, for pop-up gallery pages and other needs

In the default hybris package, the automatic image resize functionality is provided by a module named “mediaconversion”. However, this module has some severe limitations that make it hardly suitable for most of the projects. To name a few:

• MediaConversion module hasn’t been integrated into Product Cockpit. You need to launch it in HMC or on schedule.
• There is no cropping feature in MediaConversion. As I wrote above, there are good reasons to treat this point as a major issue. For the thumbnail generation cropping is critical, especially for the images with non-standard proportions.
• OOTB MediaConversion module uses the 3rd party tool, imageMagick.  This tool is a binary package, and you need to install it separately for your operation system.
• OOTB MediaConversion module is not interactive. You can’t generate the thumbnails only without touching other image types/size, for example. All or nothing.

So my goal was integrating the cropping and resize functionality into Product cockpit and assign generated image variants to corresponding (and chosen) product attributes. 

Complexity

There are two ways on how to implement interactive cropping:

• Using native ZK components,
• Using Javascript.

Unfortunately, Product Cockpit uses the version of ZK that’s terribly old-fashioned. The version 3.6.4 that is used by hybris is seven years old. For example, Slider functionality is not available in 3.6.4. Anyway, even in the latest versions of ZK, the full set of available components is not enough to solve the task in a good manner. As for using 3rd party javascript libraries, the architecture of ZK Framework is not fully compatible with Javascript modules. You need to redesign and rewrite the modules completely to make them pluggable to ZK. The old versions of ZK (like 3.6.4) are even worse in terms of compatibility with external JS code. The native product cockpit interface is also poorly extensible. It is not easy to put any UI component into any place at the page. Some areas are easier to manage in terms of customization, some are not. I put the button in the top right corner, at the top of the product edit panel.

Solution

Technical details

Challenges

Integrating 3rd party javascript code with ZK framework 3.6.3. I used IFRAME in the modal Window and additional web context to host additional JSP. To push data (converted images) from JSP back to ZK I used the filesystem (temporary filename in the temporary folder). To push commands from Javascript to ZK Framework I send a ButtonClick event from iframe/JSP’s Javascript to parent window (ZK modal Window), namely to the hidden ZK Button.

Architecture

I used the following libraries to implement crop & resize:

• Croppie javascript library for cropping
• Scalr java library for resizing

To overcome the limitation with integrating 3rd party javascript and building rich UI, I decided to configure an additional web context (in the same module where cockpit customizations are, trainingcockpits in my case)

1. A new context was added to the trainingcockpit extension (/admintools). The context authorization is based on the same Spring Security configuration.
2. Crop functionality is in /admintools/crops
3. Product cockpit customization:
   1. Editing area: A “convert images” button is added .
      1. Two methods are overrided:
         1. update() (to support “reload page”)
         2. fireCurrentObjectChanged(prev, newOne) (to support double click in the browser area)
      2. Both methods call the same method, that adds the button with the event listener onClick
      3. The event listener does the following things:
         1. 1. Create a modal window using ZK final org.zkoss.zul.Window window = (org.zkoss.zul.Window) Executions.createComponentsDirectly(zScript, “zul”, null, params); window.setWidth(“95%”); window.setHeight(“95%”); window.setPosition(“center”); window.setClosable(true); window.doModal();
            2. Scale the image using Scalr
            3. Results are pulled by ZK, the product model is updated
            4. The editing area should be refreshed. UISessionUtils.getCurrentSession().getCurrentPerspective().getEditorArea().perspectiveChanged(perspective,perspective);

© Rauf Aliev, August 2016