Querplex delivers a new feature - Collage Formatter for SAP Commerce CMS

The Customer wanted more freedom in arranging CMS Components with one another. Our Dynamic Content Page Template already offers a certain degree of customization by being able to add a certain amount of Content Slots in one row.

But the Customer seeks a more advanced, highly customizable way to position their content. Images and Text should not just be divided into equally dimensioned slots but also arranged in all different kinds of proportions and span across multiple adjacent components both horizontally and vertically.

Since slot patterns can have almost infinite combination possibilities and redefining them would turn out to be a never-ending story, we decided to go for a more individual approach.

Instead of handling multiple Content Slots each holding a CMS Component, we went for one Content Slot that serves as a container for multiple CMS Items. That way the components are condensed in a single CMS scope which we have more control over.

Well, almost...

Unfortunately, by nature, there are no editing options for Content Slots in SAP SmartEdit. That’s why we decided to introduce another CMS Component that will be dragged into the very same Content Slot and perform some styling magic that will apply to all the components adjacent.

From a technical perspective this new Component which from now on we refer to as “Collage Formatter” is located on the very same level of the HTML Dom Tree as all the other components within that Slot but on the Composable Storefront Side we will make sure the component’s data is applied to the parent div.
Wondering how? Stay Tuned!
The basic idea is to make use of the CSS Grid System and cast an individual template on the slot and its contents.
But how is the Editor – untrained in CSS basics – going to define such a template?

For this component, we provided the ability to work with simple Data Tables (just like in Word) as a sort of preview for the desired layout. The editor can predefine the number of columns and rows, as well as the grid-gap size (you can also completely remove the space between gaps). The editor can also merge cells to create an even more individualized collage.

And finally, that’s it – we achieved having our bunch of components arranged to a certain collage view which we defined in SmartEdit.

In the end, the client receives the ability to create different collages, adding grid gaps, different effects ( blur, zoom-in, hover), text.

The Collage Component is now available on the SAP Store together with Magic templates and Composable components.