Janeworld – Página de producto

Esta página es uno de los puntos fuertes del proyecto JaneWorld debido a la gran cantidad de funcionalidades desarrolladas para cubrir los diferentes apartados que detallan el producto. Así como la Home, la ficha de producto adquiere una elevada importancia ya que de ellas depende gran parte del ROI de una Web.

Se han desarrollado y programado diferentes tipos páginas para detallar las características de cada gama de productos.

Slider Hero: Imagen para el Header

La imagen que se muestra al principio de la página del producto está implementada mediante un campo ACF de imagen/galería diferente para cada producto.

También dispone de dos campos personalizados, a petición del departamento de marketing, que se utilizan como h1 y como slogan del producto. Por programación comprueba si el h1 adicional está relleno y, en caso contrario, utiliza el campo estánda de título del producto.

Galería principal y Selector de colores

El selector de colores está definido para que cambie el color de todos los productos que muestra esta página. Así, si cambiamos el color del producto principal (arriba) cambiará el color de los productos mostrados en la sección de Fórmulas en el caso de los productos de una categoría especifica.

Nativamente, al seleccionar el color cambia la imagen pero al cambiar la imagen no cambia el color del selector. Por esto, las miniaturas de la galería de imágenes tienen implementados unos meta-data para controlar la selección de color mediante unas funciones de javascript que interaccionan tanto en la galería principal como en el selector de las Fórmulas.

Atributos del producto

Hay 3 zonas que muestran los atributos del producto:

  1. Superior: Columna derecha, posición 2 del  hook «product summary»
  2. Media: Columna derecha, posición 3 del hook «product summary»
  3. Inferior: Después del módulo de Caracteristicas en el hook «product content»

Se ha personalizado la consulta de los atributos para asociar cada valor a un pictograma representativo. Estos son en formato SVG para aligerar el peso de la Web lo máximo posible.

Módulo de Fórmulas: Kit de productos

Las fórmulas son un bundle de productos pero, por exigencias del cliente, no está tratado como tal.

Esta funcionalidad está basada en un slider de la libreria slick. Cada diapositiva corresponde a un producto de los que componen el kit. A su vez, está asociado al Título, Texto y el Link hacia el producto unitario.

También dispone de selector de colores que hace que cambie de color todos los kits de todas las diapositivas y, a su vez, interacciona con las demás galerías y sus selectores de colores.

Selector de colores Fórmulas (Kits)

Visualmente es igual que el selector de color de los productos estándar pero debido a la casuística de no tratarse de un bundle, se ha desarrollado e implementado un script que consulta el stock de cada uno de los productos que lo componen y su color. Si hay stock de cada uno de los productos en el color seleccionado, habilita el botón de añadir a la cesta y, en caso contrario, lo deshabilita. En este último caso, también actualiza el stock del kit en ese color poniendolo a 0 para que no pueda comprarse.

Para realizar esta operación, se utilizan unas tablas intermedias  de la base de datos que son actualizadas por el ERP mediante tareas CRON cada 30 minutos. Por lo que tenemos el stock real del almacén de todos los productos actualizado casi en tiempo real.

Selector de colores «Ediciones limitadas»

Las Ediciones limitadas son una serie de productos de una colección especifica con un color concreto. Como hay diferentes productos pero un solor color, se opto por desarrollar un selector que en lugar de mostrar colores, muestra las miniaturas de cada uno de los productos que forman parte de esta colección.

Estos selectores también interactuan con la galería principal, la cual ha sido modificada también para que muestre el producto seleccionado en las miniaturas.

Módulo de Caracteristicas técnicas

Este módulo es una galería interactiva, basada en la librería Slick,  que muestra una imagen y un texto informativo de la misma.

En un principio el diseño no contemplaba ningún tipo de interacción pero luego se solicitó que se pudiese seleccionar lo que se quería ver por el texto informativo, por la imagen o por los bullets.

Es decir, si haces click en la imagen, su texto se pone en negrita. Si haces click en cualquiera de las características hace que cambie la imagen por la que corresponde a esa caracteristica. Y si haces click en el bullet, cambia la imagen y su texto se pone en negrita.

Módulo «Usando tu…»

Este módulo fue diseñado de la misma forma que el de Características pero con un campo más: Titular.

Más adelante, el cliente, solicitó contemplar multiples casuísticas:

  • Imagenes + Titulares + Textos descriptivos (uno o más)
  • Video + Titular + Texto descriptivo (uno o más)
  • Varias imagenes + 1 Titular + 1 Texto
  • Varios Videos + 1 Titular + 1 Texto descriptivo
  • Varias imágenes o vídeos + Titular

Para poder mostrar cualquier tipo de información siguiendo estas posibilidades, se crearon 4 tipos de campos personalizados ACF repeaters con un campo adicional que especifica el tipop de contenido a mostrar. Después se desarrolló una programación que contemplaba estas y abierta a nuevas casuísticas que pudieran solicitar.

Módulo de Productos relacionados

Este módulo es un slider horizontal basado en un carrousel de la librería Slick.

Los productos relacionados son añadidos mediante el backend nativo del woocommerce y solo hemos tenido que desarrollar el script que hace la consulta a la base de datos. luego hemos incrustado la maquetación HTML y JS que le dota de la interacción de pasar a otro producto o ir a su ficha para ver todos los detalles.

Junto con este, se integró también un slider con los UpSells, el famoso Cruce de ventas.

Valoraciones y comentarios

En esta sección los usuarios pueden valorar los productos y dejar algún comentario ha sido totalmente adaptada al diseño facilitado.

Se ha desarrollado una función que modifica la estructura de la información consultada para poder aplicar el formato HTML y CSS.

CTA’s

En la página de producto hay diferentes llamadas a la acción:

– Instrucciones: Se trata de un ACF que adjunta el archivo PDF al producto. Para mostrarlo hemos programado un shortcode que compone el botón para la descarga y que podemo ubicar en cualquier zona.

– Wishlist:  Es un botón que realiza la acción de añadir el producto a la lista de deseos y, además, muestra un contador de las veces que ha sido añadido. Se ha realizado mediante un plugin estándar que ha sido modificado para poder enviar la Wishlist por email totalmente personalizada y adaptada a diferentes acciones de Marketing.

– Comparar: Es un botón que te lleva directamente al Comparador de productos.

Optimización de la página de producto

Una vez desarrolladas todas las funcionalidades de la ficha de producto pasamos a optimizar su gestión y su carga.

Como no puede ser de otra forma, creamos un plugin, al que llamamos «Custom product», y hacemos que se cargue únicamente en la página de producto.

Este plugin está estructurado por bloques de funciones que asignan la información al hook correspondiente o crea un shortcode que podemos utilizar en cualquier parte de la ficha de producto.

Gracias a este método, y previa petición del cliente, hemos podido realizar cambios de posiciones de alguno de los bloques en segundos. Esto también te permite estructurar mejor el contenido, controlar el orden de carga  y realizar cambios de programación mucho más rápido.

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?