Configurador de Producto por Pasos — Guía completa

Presentación

DF Product Configurator convierte una ficha de producto PrestaShop en un configurador guiado por pasos: el cliente elige un color, añade un grabado, selecciona un accesorio, ve el resultado compuesto en tiempo real sobre la foto del producto, y el recargo de precio correspondiente se aplica al carrito — en el servidor, de forma infalsificable.

El módulo se basa en dos conceptos simples:

• Paso: una pregunta al cliente, vinculada a un producto. Existen dos tipos: Elección visual (el cliente hace clic en una opción) y Texto / grabado (el cliente escribe un texto libre).
• Opción: una respuesta posible de un paso de elección visual, con su visual (miniatura fotográfica o muestra de color), su capa de vista previa y su impacto en el precio.

Instalación

1. En el back office de PrestaShop, abra Módulos → Gestor de módulos → Subir un módulo.
2. Suba el archivo dfproductconfigurator.zip y haga clic en Instalar.
3. Aparecen dos nuevas pestañas bajo Catálogo: Configurador — Pasos y Configurador — Opciones.

Crear un paso

1. Abra Catálogo → Configurador — Pasos y haga clic en Añadir.
2. Indique el producto: escriba al menos 3 caracteres en el campo de búsqueda y haga clic en un resultado — el ID de producto se rellena automáticamente.
3. Elija el tipo de paso: Elección visual o Texto / grabado.
4. Introduzca la etiqueta en cada idioma (por ejemplo «Color», «Grabado», «Accesorio»). Es el texto mostrado en el stepper.
5. Marque Obligatorio si el cliente debe responder a este paso antes de poder añadir al carrito.
6. Ajuste la posición para ordenar los pasos.

Campos específicos de los pasos de grabado

Para un paso de tipo Texto / grabado, aparecen campos adicionales:

• Longitud máxima: número de caracteres permitidos (validado también en el servidor).
• Impacto en el precio: recargo aplicado en cuanto el cliente escribe un texto (0 para un grabado gratuito).
• Posición X / Y: posición del texto en la vista previa, en porcentaje del ancho y del alto de la imagen (50 / 50 = centro).
• Tamaño y color del texto: tamaño en píxeles y color hexadecimal de la superposición.
• Placeholder: texto de ayuda mostrado en el campo, traducible.

Crear las opciones de un paso

1. En la lista de pasos, haga clic en la acción Opciones del paso correspondiente (o abra Catálogo → Configurador — Opciones).
2. Haga clic en Añadir e introduzca la etiqueta multilingüe de la opción.
3. Defina su impacto en el precio sin impuestos: positivo (recargo), negativo (descuento) o nulo (incluido).
4. Elija el visual de la tarjeta de opción: un color hexadecimal (mostrado como muestra redonda) o una miniatura fotográfica (redimensionada automáticamente a 400 px).
5. Si lo desea, suba una capa PNG transparente (hasta 1600 px): se apilará sobre la foto del producto en la vista previa compuesta.
6. Marque Por defecto para preseleccionar esta opción — una sola opción por defecto por paso, el módulo lo garantiza.

Funcionamiento del precio

Los impactos de precio se definen sin impuestos, en la divisa por defecto de la tienda. En la ficha de producto, el módulo los convierte a la divisa del visitante y los muestra con o sin IVA según el grupo de cliente, con un total recalculado en directo.

Ese total mostrado es puramente indicativo. En el carrito, el recargo real lo aplica el hook nativo de cálculo de precios de PrestaShop, en el servidor, a partir de la configuración guardada en la base de datos: conversión de divisa al tipo de cambio, IVA del contexto del cliente, redondeo a los decimales de la divisa. Un cliente que manipule el DOM o las peticiones no puede cambiar el precio facturado.

Recorrido del cliente en la ficha de producto

El bloque configurador se muestra automáticamente en la ficha de producto (hook de información adicional) en cuanto existe al menos un paso activo para el producto. El cliente:

1. navega entre los pasos mediante el stepper (los pasos completados aparecen marcados);
2. hace clic en sus opciones o escribe su grabado — la vista previa compuesta y el total se actualizan al instante;
3. hace clic en Añadir al carrito: el módulo valida los pasos obligatorios, guarda la configuración en el servidor y deja que el añadido al carrito continúe con normalidad.

Si un paso obligatorio está incompleto, el configurador se abre en ese paso con un mensaje explícito y el añadido al carrito queda bloqueado.

Carrito, pedido y factura

Cada configuración validada crea una personalización nativa de PrestaShop: dos configuraciones distintas del mismo producto generan dos líneas de carrito diferentes, cada una con su precio. El resumen legible (por ejemplo Color: Azul océano · Grabado: Lea · Accesorio: Tapón de bambú) aparece bajo el nombre del producto en el carrito, el pedido, la factura y el detalle del pedido en el back office — sin ningún ajuste adicional.

Al validar el pedido, la configuración se archiva en una tabla dedicada. Las configuraciones de carritos abandonados se purgan automáticamente a los 60 días.

Combinaciones, invitados y multi-divisa

• Combinaciones: el configurador sigue la combinación seleccionada — la vista previa se reconstruye y el precio base mostrado es el de la combinación.
• Clientes invitados: se crea un carrito automáticamente si es necesario al guardar la configuración.
• Multi-divisa: la conversión usa el tipo de cambio de la tienda, tanto en la visualización como en el cálculo del servidor.

Desinstalación y limpieza

El módulo limpia tras de sí:

• al eliminar un producto, se eliminan sus pasos, opciones e imágenes de opciones;
• al desinstalar, se eliminan las tablas del módulo y se liberan los campos de personalización creados (los contadores de producto se decrementan).

Solución de problemas

El bloque configurador no se muestra

• Compruebe que al menos un paso activo está vinculado al producto correcto (ID de producto correcto).
• Vacíe la caché de PrestaShop (Parámetros avanzados → Rendimiento).
• Compruebe que su tema llama al hook displayProductAdditionalInfo (es el caso del tema Classic y de casi todos los temas).

La vista previa compuesta está desplazada

La capa PNG no comparte el encuadre de la foto de portada. Vuelva a exportar la capa con la misma proporción y la misma posición del producto que la imagen principal.

El recargo no aparece en el carrito

• Compruebe que la opción seleccionada tiene realmente un impacto de precio distinto de cero.
• El precio del carrito lo recalcula PrestaShop: vacíe la caché y vuelva a probar con un carrito nuevo.

Dos añadidos idénticos crean dos líneas

Es el comportamiento esperado si las configuraciones difieren. Si son estrictamente idénticas y se añaden en la misma sesión, el módulo reutiliza la misma personalización e incrementa la cantidad.