Páginas responsive en Hybris

La plataforma web SAP Hybris Commerce ofrece un diseño responsive en las tiendas web de todos sus aceleradores.

Solución Responsive (https://pixabay.com/es/imac-ipad-iphone-macbook-1999636/)

Las herramientas usadas son principalmente bootstrap, JQuery, librerías y ficheros propios de JavaScript y CSS (extendido con Less)

Grid de Bootstrap

De forma muy muy muy resumida, bootstrap divide la página en un Grid cuyas filas (row) son de 12 columnas, la regla es que cada row todas las columnas "col-" sumen 12 por ejemplo.

Grid 12 Columnas de Bootstrap

Para conseguir el responsive, indicas por cada tamaño de pantalla cuántas columnas ocupar, en el ejemplo de arriba incidamos que para el tamaño md (Medium) use 3, 9 o 12 columnas. Tenemos estas configuraciones:

• col-xs- Extra Small para <576px
• col-sm- Small para ≥576px
• col-md- Medium para ≥768px
• col-lg- Large para ≥992px
• col-xl- Extra Large para ≥1200px

bootstrap sigue la filosofía mobile first por lo que si definimos un tamaño para col-sm todos los tamaños mayores tienen la mismas columnas, es decir:

<div class="col-xs-12 col-sm-6">

es equivalente a

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">

También podemos anidar una fila (row) dentro de otra fila y dentro de esa celda tendrá 12 columnas

 <div class="row">
    <div class="col-sm-6">
      <h1>Principal</h1>
      <div class="row">
        <div class="col-sm-6 other">
          <h2>Hija</h2>
        </div>

1	2	3	...	12
1 2 3 4 5 6 7 8 9 10 11 12

Páginas responsive en Hybris Commerce

Hybris ofrece dos páginas responsive:

1. landingLayout2Page.jsp
2. contentLayout1Page.jsp

landingLayout2Page

Como su nombre indica landingLayout2Page está pensada para la home. Veamos su estructura en el Storefront

Secciones Home

Se divide en 7 secciones, tienen estas clases:

1. Section1
2. Section2A -> col-xs-12 col-sm-6
• Cada componente tiene a su vez definido col-xs-12 col-sm-6
3. Section2B -> col-xs-12 col-sm-6
• Cada componente tiene a su vez definido col-xs-12 col-sm-6
4. Section2C -> col-xs-12 (Sin componentes)
5. Section3
6. Section4 -> col-xs-6 col-md-3
7. Section5

Conociendo un poquito cómo trabaja bootsrap vamos a ver cómo podemos hacer que con cambios mínimos en el código, la página sufra grandes cambios estéticos.

Cambio primero, despejar el contenido

En los storefront de ejemplo las respectivas home ocupan toda la pantalla y (en mi opinión) dando una sensación de agobio en desktop

Home en desktop

Para dar un poco de "aire" a la página podemos usar la clase container de bootstrap, simplemente incluyendo la clase

<div class="container">

Ya hemos producido un cambio estético muy significativo

Home en desktop con la clase container

Comprobamos en mobile

Home en mobile con la clase container

Esto es sólo una prueba de la potencia que tiene bootstrap y como se puede aprovechar en Hybris.

Cambio segundo, banners secundarios en smartphones

Veamos otro ejemplo. Vemos que en desktop el banner principal (en rojo) tiene mucho protagonismo pero en smartphones al definiar las secciones Section2A y Section2B las clases col-xs-12 (toda la pantalla) el banner principal pierde protagonismo respecto a las subsecciones (en azul)

Secciones home mobile

a parte, tampoco se ven del todo las subsecciones a qué hace referencia

Cambiando la definición de estas secciones de: 

<div class="col-xs-12 col-sm-6 no-space">

por

<div class="col-xs-6 no-space">

conseguimos este efecto

Home mobile con nueva clase col-xs-6

Respetando el protagonismo del banner principal y apareciendo las dos subcategorías destacadas SHOP WOMEN y SHOP TEENS.

Estos son dos ejemplos muy rápidos y simples, espero que a grandes rasgos hayan dado una idea de las ventajas que ofrece boostrap + Hybris

Más Info.

• Responsive Storefronts
• Bootstrap