Páginas responsive en Hybris
La plataforma web SAP Hybris Commerce ofrece un diseño responsive en las tiendas web de todos sus aceleradores.
Las herramientas usadas son principalmente bootstrap, JQuery, librerías y ficheros propios de JavaScript y CSS (extendido con Less)
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:
es equivalente a
También podemos anidar una fila (row) dentro de otra fila y dentro de esa celda tendrá 12 columnas
Se divide en 7 secciones, tienen estas clases:
Ya hemos producido un cambio estético muy significativo
por
conseguimos este efecto
![]() |
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
<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>
Páginas responsive en Hybris Commerce
Hybris ofrece dos páginas responsive:- landingLayout2Page.jsp
- contentLayout1Page.jsp
landingLayout2Page
Como su nombre indica landingLayout2Page está pensada para la home. Veamos su estructura en el StorefrontSecciones Home |
Se divide en 7 secciones, tienen estas clases:
- Section1
- Section2A -> col-xs-12 col-sm-6
- Cada componente tiene a su vez definido col-xs-12 col-sm-6
- Section2B -> col-xs-12 col-sm-6
- Cada componente tiene a su vez definido col-xs-12 col-sm-6
- Section2C -> col-xs-12 (Sin componentes)
- Section3
- Section4 -> col-xs-6 col-md-3
- 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
Comentarios
Publicar un comentario