Parameters of Hybris Mobile and Desktop Site

responsive

Most people face problems on setting  mobile site and understanding parameters that control the switching of Desktop and Mobile site. Also, how does responsiveness of the site differ in both Desktop and Mobile site?

Now let us have a look at the differences in terms of technical aspects that differentiates both Desktop and Mobile site.

In terms of User Interface

Basically both Desktop and Mobile site differs in terms of the UI. UI is controlled by languages such as HTML,CSS,JavaScript, etc..

But the backend code remains almost the same for both Desktop and Mobile site.

Additionally , UI defined using Hybris WCMS ,need to define different page templates , Content slot, ContentPage, ProductPage and the corresponding relationship between them for both Mobile and Desktop site.

In terms of Java Code

First we need to detect the devices from which the request is arising, in order to set the Ui Experience level on par with the device.

This is carried out using an interceptor ie.Device Detection Before Controller Handler using class Default Device Detection Facade and more specifically in Spring Device Request Device Data Populator.

Once device detection ends, the detected device must be mapped to UI Experience level (eg.mobile,tablet,desktop,etc..) in class DeviceDataUI ExperienceLevelPopulator.

After this the detected UiExperienceLevel is compared with the supported Ui Experience Level and if there is an appropriate match the detected Ui Experience Level is set to this value.

Switching of Mobile and Desktop site
hybris-hosting-infographic

Ui experience level is configured in the properties file by setting the property “uiexperience.level.supported”.

The value “uiexperience.level.supported”  should be specified in the correct format using Comma separated Camel cases names like Mobile, Desktop , or Desktop ,Mobile for the functionality to work correctly.

There is also an additional interceptor , SetUiExperienceBeforeControllerHandler called before the request reaches the controller. This usually checks for the parameters like “uiel” (like?uiel=Mobile) in the request and if  set, its value is used to override all the previous UiExperienceLevel.

The corresponding CSS, JS and images are set based on the Ui Experience Level and we see either Desktop or Mobile site.

Responsiveness

responsiveWhen the website has been designed for responsive design then the site parameters gets adjusted according to the device type, this is done because responsive JS is used.

Hybris eliminated the need for Desktop and Mobile site by making the Desktop site responsive according to the request made.

At Veltrod, we offer best services using the industry best methods and practices, for customized website creation contact us on sales@veltrod.in.


About Author

Madhumitha Srinivas

I am an avid reader. My ultimate goal is to convey complex information in a much more simple and interesting form.

For business enquiry, please contact us

TOP BLOGGER

© Copyright 2013 Veltrod Scroll Top