Temas visuales
06/12/2011
Temas visuales en ataStore
Temas visuales
AtaStore tiene implementado un sistema multitienda y permite que cada tienda tenga un diseño personalizado de una manera muy potente.
Cada diseño personalizado y cada tienda van asociados a un dominio distinto, así cuando se carga la página http://skydive.atotarreu.com/ se va a la tienda SkyDive y se muestra el diseño personalizado para dicha tienda, y cuando se carga la página http://senergy.atotarreu.com/ se va a la tienda Senergy y se muestra el diseño personalizado para dicha tienda.
La personalización de basa en carpetas con el nombre del dominio, que se colocan bajo la carpeta WEB-INF/static
Así tendremos WEB-INF/static/default WEB-INF/static/skydive.atotarreu.com WEB-INF/static/senergy.atotarreu.com para las personalizaciones por defecto, de la tienda SkyDive y de la tienda Senergy, respectivamente.
Bajo la carpeta de las personalizaciones podemos poner plantillas HTML, archivos CSS e imágenes.
Sin embargo, y esto es lo más destacado del sistema, no hay que volver a colocar en cada personalización todos los HTML, CSS e imágenes, sino sólo las que queramos modificar. Las que no coloquemos se cogerán de la personalización "default".
Implementación técnica
La implementación de este sistema se consigue a través de la combinación de un Interceptor de Spring com.atotarreu.store.web.ThemeInterceptor con un TemplateResolver de Thymeleaf com.atotarreu.util.ThemeTemplateResolver
En primer lugar, el ThemeInterceptor almacena el nombre de dominio de la URL (serverName), ya que desde Thymeleaf no tenemos acceso.
En el caso de que el recurso solicitado sea un archivo CSS o una imagen, el ThemeInterceptor la procesa directamente, sirviendo el recurso correspondiente a la personalización.
En el caso de que el recurso solicitado sea una plantilla HTML es ThemeTemplateResolver quien es llamado, que comprueba si existe una plantilla personalizada y devuelve la plantilla correspondiente a la personalización.
