5. Diseño

El diseño de la tienda electrónica está realizado bajo el Modelo Vista Controlador, el cual es un estilo de arquitectura software que mantiene diferenciación entre los datos de una aplicación, la interfaz de usuario y la lógica de control, ofreciendo independencia entre ellos.

Este modelo se lleva a cabo por la aplicación Prestashop dado que se suele cambiar muy a menudo de vista, por lo tanto si no se realizara bajo esta arquitectura el trabajo de realizarlo sería de un coste elevado.

Además, la utilización de éste permite que cualquier persona con unos conocimientos básicos sobre Prestashop sea capaz de personalizar el diseño sin un gran esfuerzo.

El modelo es el responsable de la lógica de negocio de la aplicación, es decir, de acceder a la capa de almacenamiento de datos comunicándose con la BDA. Cada tabla es un objeto que crea una capa de abstracción de la base de datos.

De esta manera se puede trabajar asegurando integridad y seguridad sobre la información almacenada en la base de datos. Esto lo hace, por ejemplo, al no permitir comprar un número negativo de productos.

Este nivel pertenece a la interfaz de usuario. Esta capa de la aplicación es la que ve el usuario cuando interactúa con nuestra tienda, por ello tiene un formato adecuado para que pueda relacionarse el sistema con el cliente.

Es independiente del controlador y del modelo. Principalmente está compuesto por código html, archivos php con extensión .ptl que forman las vistas.

Este nivel controla las funciones que pueden llevarse a cabo en nuestra aplicación. Responde a eventos, que suelen ser acciones realizadas por el usuario, e invoca cambios en el modelo.

Para personalizar el diseño y adaptarlo a la temática del proyecto, se decidió buscar una plantilla que no fuese demasiado seria, dado que los productos a la venta tienen un toque infantil; se precisaba de un diseño responsive porque es mejor que tener una plantilla adaptada a cada dispositivo. Después de investigar en el mercado de plantillas disponibles de Prestashop, se encontró un tema llamativo y que se ajustaba a las necesidades de la tienda. El nombre del tema seleccionado es Baby Comm y puede encontrarse en:

http://addons.prestashop.com/es/temas-ninos-bebes/8005-baby-comm-responsive.html

Las modificaciones realizadas al tema han sido principalmente sobre las imágenes y el CSS. Estas modificaciones se han hecho efectivas actualizando los archivos del tema de la tienda a través del FTP.

Se modificaron las imágenes asociadas a los botones del carrito y los productos para cambiarles el color y ajustarlos al estilo del logo.

Se cambió el logo de la plantilla por el logo de la tienda, el cual se hizo en formato png para permitir la visualización del fondo y lograr una mejor integración con él.

Se modificó el CSS para separar en las previsualizaciones de productos el círculo que indica que un producto es nuevo, de manera que se tenga una mejor visualización del mismo dado que antes éste era más invasivo con la imagen.

Se cambiaron todas las imágenes asociadas a las categorías por un texto personalizado sin fondo para un diseño más simple y evitar que éste se encuentre recargado.

Las modificaciones realizadas en cuanto a la estructura de la tienda, se realizaron principalmente mediante la gestión de módulos. Los módulos son la manera que tiene Prestashop de añadir funcionalidad y personalización a la tienda.

Se cambió la distribución del slider de la página principal y se extendió el tamaño de las imágenes para que ocupasen todo el ancho de la página, de esta manera se atrae la atención del usuario al centro de la página en el cual, a través de texto en las imágenes, se muestra información sobre la tienda y sus productos.

Se modificó la distribución del menú de navegación para darle una estructura coherente. De esta manera encontramos los botones con las principales secciones de la tienda situados a la vista del usuario, para que pueda elegir de qué manera navegar por la página web.

Se añadió una columna en la parte izquierda de la página en la cual se muestra la distribución de las categorías e información necesaria acerca de la tienda y su manera de gestionarse. Debajo de esto se encuentran los productos más vistos de la página, de manera que llaman más la atención del cliente.

En la parte central se colocaron aquellos productos nuevos y populares, ya que cuando se entra en una tienda se suele visitar primero las novedades. Así el cliente encuentra a simple vista aquello que pueda llamarle la atención.

Para llevar a cabo esta integración se siguió una guía12 paso a paso. En esta guía no solo nos enseñaban a agregar el blog dentro de la tienda, sino también a integrarlo con el tema utilizado.

Los pasos a seguir son los siguientes:

• Instalamos Prestashop tal cual encontramos en el anexo.
• Instalamos WordPress, para ello solo hemos de descomprimir la carpeta descargada de la página oficial dentro de una carpeta llamada “blog” dentro de “public_html”, carpeta en la cual encontramos todos los archivos de la página web.
• Realizamos una modificación en el archivo header.php alojado dentro de la carpeta de WordPress13. Realizamos una copia del contenido del archivo, por si acaso, y lo sustituiremos por completo con el siguiente código:

• Esto sirve para cargar la configuración principal de Prestashop además de su archivo cabecera. Tras esto tendremos media página configurada.
• A continuación realizaremos lo mismo con el archivo footer.php alojado en el mismo sitio que el anterior. Una vez realizada la copia del contenido, lo sustituimos por entero por el siguiente código:

• En estos momentos, nuestro blog tiene la cabecera y pie de página correctos, pero Prestashop no nos reconoce la página y detecta un error 404. Para solucionar este problema hemos de indicar que cuando entremos en el blog, el body de la página quede identificado como blog y se carguen las hojas de estilo para su total integración.
•  Para corregir esto, debemos acceder al archivo header.tpl14. Tras realizar la copia de su contenido, buscaremos la línea de código que se parezca a:

• Y la sustituiremos por el siguiente código:

• Con esto conseguimos que una vez estemos dentro del blog, en lugar de llamar a las hojas de estilo de WordPress y Prestashop, llame al cuerpo del blog y, en caso de no estar dentro de la sección blog, actúe normal.
• Dentro de Prestashop, tendremos que acceder al módulo “Menú horizontal superior”, donde encontraremos la opción de agregar un nuevo enlace. Para agregar el enlace del blog pondremos como etiqueta “Blog” y como enlace /blog
• Tras seguir todos estos pasos y haber realizado los cambios, tendremos finalmente nuestro blog integrado.