JaneWorld

JaneWorld es la segunda fase de un proyecto de eCommerce basado en WordPress y Woocommerce como renovación del antiguo proyecto Jané basado en un catalogo online internacional en 5 idiomas pero meramente presencial.

Para el desarrollo de este proyecto nos basamos en un diseño realizado adhoc y su maquetación en HTML y Javascrip. Esta fue integrada mediante el theme starter Underscore y su child para la programación a medida de todas las funcionalidades sin perder las caracteristicas básicas del WordPress y WooCommerce: actualizaciones del core, instalación y actualizaciones de plugins, tanto nativos como desarrollados a medida, etc.

Para el desarrollo y personalización de las funcionalidades se han utilizado plugins premium como ACF Pro, WPML o Wishlist. El resto de plugins han sido desarrollado manualmente mediante programación. Tan solo hemos utilizado algún plugin standar para mejorar el rendieminto (Caché) y aumentar la seguridad de la plataforma.

Preparando el entorno de desarrollo

Para este proyecto preparamos diferentes entornos de desarrollo y de pre-producción utilizando herramientas como Docker o GIT entre otras.

El primer entorno que montamos fue el de Desarrollo y fue creado bajo un subdominio. En él inicializamos un repositorio GIT en el cual colaborabamos los departamentos de programación y de diseño. Este entorno nos permitía implementar la maquetación directamente sobre la programación y agregar las hojas de estilos de cada sección para luego compilar el SASS mediante node.js

Al mismo tiempo creamos un entrorno Dockerizado para nuestro uso exclusivo en el que realizabamos las pruebas más exigentes. Este entorno nos permitia replicar el entorno en cualquier máquina en menos de un minuto.

El tercer entorno es el que llamamos Pre-producción. En este entorno se actualizaban los cambios realizados en el entorno de desarrollo. Su objetivo era que el cliente pudiese ver y probar cualquier funcionalidad o aspecto de la web como si estuviese en producción en tiempo real. Así, y a falta de conocimientos técnicos, no tener que descargarse y arrancar el Docker.

Preparación para el desarrollo

1 – Instalación y configuración

Una vez estudiado el proyecto y decidida la estrategia empezamos por lo más básico, instalación y configuración de la plataforma y todos los plugins de terceros que concretamos durante el análisis del proyecto:

  • WordPress
  • WooCommerce
  • WPML (Multilingüe)
  • ACF Pro
  • ContactForm 7
  • Wishlist (Lista de deseos)
  • Store locator (Localizador de tiendas y Servicios técnicos)

2 – Creación del template principal

Para ello, utilizamos el creador de «themes starter» con la herramienta de Underscore, el cual nos permite crear un tema básico que contiene todos los elementos de WordPress y WooCommerce pero sin ningún tipo de estilo y con una estructura minima que te muestra los contenidos..

3 – Creación del template child

Para realizar el desarrollo de la programación, la implementación de la estructura HTML y los estilos CSS creamos un Theme Child. De esta manera, siempre podremos actualizar el Theme padre donde reside la programación del Theme y que, por motivo de seguridad y compatibilidades, conviene actualizarla cuando corresponda.

Desarrollo del proyecto paso a paso

En este punto es donde empezamos a trasladar el diseño facilitado en HTML, CSS y JS, desarrollado mediante node.js y SASS, a la estructura marcada por los hooks de WordPress. Una vez estructurado todo es cuando se desarrollan las funcionalidades para dota de lógica a todo ese diseño.

Las modificaciones de los estilos y javascript realizadas a partir de este punto se volvieron a compilar mediante node.js y SASS para integrarlas en los archivos SCSS y ser cargadas en un único archivo optimizando al máximo la carga y liberando de peso a la Web.

Estructura de la Web, elementos comunes

A partir de aquí trabajamos el desarrollo de la Web por bloques, así se va estructurando visualmente y también se va testeando las diferentes partes en los diferentes navegadores y dispositivos. Cualquier detalle se comunica al departamento de diseño para su corrección.

Header

En la cabecera de la web es donde tenemos que cargar todos los archivos y librerias necesarias para que todo se vea igual que en el diseño: CSS, JS, Fuentes tipográficas, etc.

Read more

Footer

El footer es lo último que carga la web pero que contendrá la carga de algunos de los archivos y elementos javascript desarrollados para las funcionalidades.

Read more

La carga de archivos y scripts en el header o en el footer depende de si es posible y por un tema de optimización ya que hace que cargue más rápida la parte visible dando una mejor experiencia de usuario.

Barra de navegación y Menús

Se ha desarrollado un menú que contiene los accesos a categorías, páginas informativas, noticias, cesta, mi cuenta, lista de deseos, buscador y selector de idioma. El item correspondiente a las categorías de los productos, abre un bloque dividido en dos columnas, que muestra todas las categorías. Cada uno de los items del menú contienen un icono, el nombre de la categoría y una imagen. La funcionalidad desarrollada hace que:

  • Cada icono tenga un color especifico que puede ser cambiado en cualquier momento haciendo que el resto de elementos de esa categoría cambie al mismo tiempo. Para ello, hemos programado una función que consulta esta información antes de que se carguen los estilos y los preasigna en la carga de la página visitada
  • Al pasar el raton por encima del icono o nombre de la categoría, cambia la imagen del producto destacado de esa categoría y el link que te lleva a ver el producto. Para asignar estos productos destacados hemos utilizado ACF en las categorías para seleccionar el producto mediante busquedas predictivas.
Menú sticky en la página de producto

Se ha desarrollado un menú sticky para la página de producto. Contiene una miniatura, el nombre del producto y los links hacia las diferentes secciones que hay en la la página de producto: Catateristicas técnicas, Usando tu, Fórmulas y Valoraciones. Este menú se hace visible cuando se hace scroll en la página de producto. Los links sólo se muestran si existe la sección en el producto ya que no todos los productos tienen las mismas secciones.

Deja una respuesta

 

¿Hablamos?

Para contactar directamente, haz click en el icono

o rellena el siguiente formulario y te contactamos a la mayor brevedad posible

    Abrir chat
    💬 ¿Podemos ayudarte?
    Hola 👋
    ¿Cómo puedo ayudarte?