# Configurador de Producto por Pasos: guía completa > Presentación El Configurador de Producto por Pasos añade a la ficha de producto un recorrido guiado: el cliente elige sus opciones (tamaño, soporte, color, marco…), escribe un texto, sube un… - Página: - Idioma: es - Actualizado el: 2026-10-11 - Otros idiomas: [fr](https://www.datafirefly.com/documentation/dfproductconfigurator/index.md), [en](https://www.datafirefly.com/en/documentation/dfproductconfigurator/index.md), [de](https://www.datafirefly.com/de/documentation/dfproductconfigurator/index.md), [it](https://www.datafirefly.com/it/documentation/dfproductconfigurator/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfproductconfigurator/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfproductconfigurator/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfproductconfigurator/index.md) - Índice: ## Presentación El Configurador de Producto por Pasos añade a la ficha de producto un recorrido guiado: el cliente elige sus opciones (tamaño, soporte, color, marco…), escribe un texto, sube un archivo, y el precio se actualiza con cada elección. El suplemento se calcula en el servidor y lo lleva una personalización nativa de PrestaShop, por lo que sigue al carrito, al pedido y a la factura. El módulo sustituye con ventaja a las combinaciones cuando un producto mezcla muchas opciones: no se crea ninguna combinación, cada opción lleva su precio y su peso, y un mismo configurador puede servir a todo un catálogo. - **Configurador**: un conjunto de campos, vinculado a uno o varios productos y, si hace falta, a categorías. - **Campo**: un paso del recorrido (lista, botones de radio, muestras, miniaturas, texto, subida…). - **Opción**: una elección ofrecida en un campo, con su precio, su peso, su referencia y su visual. ## Instalación y actualización 1. En el back-office, abra **Módulos → Gestor de módulos → Subir un módulo** y suba el ZIP del módulo. 2. Pulse **Configurar** para acceder a los ajustes de visualización y a los datos de demostración. 3. Los configuradores se gestionan en **Módulos → Configuradores de producto**. Compatibilidad: PrestaShop 1.7.7 a 9.x, PHP 7.1 o superior (según la versión de PrestaShop). El módulo no usa Composer ni jQuery y no requiere ninguna modificación del tema. Para actualizar, suba simplemente el nuevo ZIP. El esquema de la base de datos, los hooks y las cachés se actualizan automáticamente, incluso si los archivos se copiaron a mano sin pasar por el gestor de módulos. Los configuradores existentes se conservan. ## Ajustes de visualización La página **Configurar** del módulo reúne los ajustes comunes a todos los configuradores: - **Modo de visualización**: bloque integrado en la ficha de producto (recomendado con un page builder), botón «Configurar» que abre una ventana a pantalla completa, o sustitución completa de la ficha de producto. - **Ubicación**: automática (hook `displayProductAdditionalInfo` del tema) o manual (usted coloca el configurador, ver la sección Creative Elements). - **Ocultar el botón de carrito nativo del tema**: evita añadir al carrito sin pasar por el configurador. - **Selector de cantidad en el configurador**: en modo integrado, muestra la cantidad junto al botón «Añadir al carrito» del configurador y oculta la del tema. - **Mostrar el nombre y la descripción del configurador**: desactívelo cuando el título y el texto del producto ya los gestiona el tema o el page builder. - **Mostrar la barra de pasos** y **Numerar los pasos**: la fila de pastillas sobre los campos y los números delante de cada título se pueden ocultar por separado. - **Tras añadir al carrito**: ventana con el detalle de la personalización, ventana nativa del tema (módulo de carrito `ps_shoppingcart`) o un simple mensaje bajo el botón. ## Crear un configurador En **Módulos → Configuradores de producto**, pulse **Nuevo configurador**. Desde la ficha de un producto en el back-office (página de producto antigua), el botón «Crear un configurador para este producto» rellena el producto. ### Productos y categorías vinculados - **Productos vinculados**: escriba un nombre, una referencia o un ID y pulse el resultado. Añada tantos productos como necesite; la cruz de una etiqueta quita el producto. - **Categorías vinculadas**: marque las categorías cuyos productos deben recibir el configurador. El filtro sobre la lista encuentra una categoría por su nombre. La opción **Incluir subcategorías** extiende el vínculo a todo el árbol. Cada producto conserva su propio precio base. Si un producto está vinculado a varios configuradores activos, el vínculo directo al producto gana sobre el vínculo por categoría, y después el configurador más antiguo. Un aviso indica los productos afectados. ### Ajustes generales - **Nombre interno (opcional)**: sirve para encontrar el configurador en la lista. Si se deja vacío, toma el nombre del primer producto vinculado. Solo se muestra en la ficha de producto si el ajuste correspondiente está activo. - **Activo**: un configurador inactivo no aparece en ningún producto. - **Bloquear el añadir al carrito si es inválido**: el botón «Añadir al carrito» permanece desactivado mientras falte un campo obligatorio. - **Modo de precio**: precio del producto + opciones (caso general), o precio base personalizado + opciones. ## Los campos Pulse **Añadir un campo**, elija su tipo, escriba su etiqueta en cada idioma (selector de idioma arriba del formulario) y marque **Obligatorio** si hace falta. Bajo el título puede mostrarse un texto de ayuda. ### Tipos de campo - **Lista desplegable**, **Botones de radio**, **Muestras de color**, **Miniaturas de imagen**: una elección entre opciones. - **Casillas**: varias elecciones posibles (acabados, envoltorio de regalo…). - **Campo de texto**, **Área de texto**, **Número**, **Fecha**, **Subida de archivo**: entrada libre. Una sola opción «portadora» define entonces la tarifa (por ejemplo 0,20 € por carácter). ### Opciones Cada opción lleva una etiqueta multilingüe, un impacto de precio y su tipo (importe fijo, porcentaje del precio base, por carácter, por unidad, fórmula), un color para las muestras, una miniatura para las miniaturas de imagen, un **peso** en kg, una **referencia**, el estado «por defecto» y la disponibilidad. Una opción no disponible sigue visible pero en gris. ### Reordenar campos y opciones Arrastre un campo por su asa para cambiar el orden de los pasos; el botón **Plegar todo** facilita la operación en un configurador largo. Las opciones se reordenan igual con su asa. El orden se guarda con el configurador. ### Mostrar solo si… Un campo puede aparecer solo cuando se elige una opción concreta de otro campo. Ejemplo: el campo «Marco» solo se muestra si se elige «Impresión enmarcada» en «Tipo». En el bloque **Mostrar solo si…**, seleccione la o las opciones activadoras (Ctrl o Cmd + clic para elegir varias: el campo se muestra si se elige una de ellas). Sin selección, el campo se muestra siempre. Las dependencias en cadena se gestionan: si un campo activador está oculto, los campos que dependen de él también lo están. Un campo oculto no entra en el precio ni en el pedido, aunque sea obligatorio. En la lista solo aparecen las opciones ya guardadas. Tras crear opciones nuevas, guarde el configurador una vez y después defina las condiciones. ### Enlace de información (ventana) Cada campo puede mostrar, a la derecha de su título, un enlace como «Guía de materiales» o «Guía de tallas». Al pulsarlo se abre una ventana sobre la página. - **Texto del enlace**: la etiqueta mostrada, en cada idioma. Vacío: sin enlace. - **Contenido de la ventana**: HTML (texto, tabla, imágenes) y las etiquetas `{hook …}` y `{widget …}`, ejecutadas como en el widget Shortcode de Creative Elements. Para un diseño rico, cree la ventana como plantilla guardada en Creative Elements y pegue su shortcode. Los scripts y los iframes se rechazan al guardar por seguridad: un aviso lo indica y se conserva el contenido anterior. ## Precio y peso Los impactos se introducen **sin impuestos** en la moneda por defecto. La ficha de producto muestra el precio base, el total de opciones y el total con IVA, actualizados con cada elección. Ese total es solo una visualización: el precio real se recalcula en el servidor a partir de las elecciones del cliente y lo lleva la personalización nativa de PrestaShop. Modificar la página o las peticiones en el navegador no cambia el precio facturado. PrestaShop suma el **peso** de las opciones elegidas al peso del carrito. Los tramos de peso de sus transportistas se aplican por tanto con normalidad, y el precio de las opciones cuenta en el total usado para el umbral de envío gratuito. Para gastos de envío que dependen del tamaño, asigne a cada formato un peso real o volumétrico (por ejemplo 40 × 60 enmarcado = 2,5 kg). Los límites de dimensiones de los transportistas solo leen las dimensiones del producto, no las opciones elegidas. ## Vista previa visual (opcional) En el bloque **Vista previa visual** del configurador, active la vista previa y suba una imagen de fondo (PNG transparente recomendado). Cada campo puede entonces colocar una capa de imagen, teñir la silueta o mostrar el texto del cliente en una zona que usted dibuja con el ratón. El cliente puede elegir la fuente, el tamaño y el color de su texto, y los colores pueden vincularse a otro campo. Al añadir al carrito, el visual final se compone y se guarda con el pedido. Vista previa desactivada: no se muestra ninguna vista previa, las imágenes del tema o del page builder no se modifican nunca y los ajustes de vista previa de los campos se ocultan en el editor (siguen guardados si vuelve a activar la vista previa). ## Creative Elements y page builders 1. En los ajustes del módulo, elija el modo **Integrado** y la ubicación **Manual**. 2. Desactive la vista previa en el configurador: las imágenes de la ficha siguen siendo las del page builder. 3. En la plantilla de ficha de producto de Creative Elements, añada un widget **Módulos**, elija el módulo DataFirefly Configurador e introduzca el hook `displayDfProductConfigurator`. También puede usar un widget **Shortcode** con `{hook h='displayDfProductConfigurator'}`. 4. Coloque este widget donde quiera, por ejemplo bajo el título y el precio. En los productos sin configurador, el widget no muestra nada. 5. Si hace falta, desactive la numeración, la barra de pasos y el nombre del configurador, y active el selector de cantidad integrado si el widget «Añadir al carrito» de Creative Elements no está en la ficha. En un tema, el mismo hook se llama con `{hook h='displayDfProductConfigurator' product=$product}`. El configurador solo se muestra una vez por página. ## Tras añadir al carrito Con el ajuste por defecto se abre una ventana: imagen del producto, precio unitario, detalle de cada elección (por ejemplo Tipo: Impresión enmarcada, Tamaño: 40 × 60 cm, Marco: Nogal), cantidad, y luego el número de artículos, subtotal, envío y total del carrito, con los botones **Seguir comprando** y **Finalizar compra**. La plantilla `views/templates/front/cart_modal.tpl` se puede sobrescribir en el tema. El ajuste «Ventana nativa del tema» usa la ventana del módulo de carrito; no muestra el detalle de la personalización. El ajuste «Mensaje» muestra un enlace al carrito bajo el botón. ## Carrito, pedido y producción Cada configuración validada crea una personalización nativa de PrestaShop: dos configuraciones distintas dan dos líneas de carrito separadas. El resumen legible (Tamaño: 40 × 60 cm · Tipo: Impresión enmarcada · Marco: Nogal) aparece en el carrito, el pedido, la factura y el back-office. El detalle del pedido en el back-office muestra un panel **Personalizaciones** con el resumen campo por campo, los archivos enviados por el cliente y, si la vista previa está activa, el visual final. En el tema Classic, un cambio de cantidad recarga parte de la ficha de producto por AJAX: el configurador permanece en su sitio y conserva las elecciones del cliente. ## Duplicar un configurador En la lista, abra el menú de la fila y pulse **Duplicar** (el botón también está al final del editor). La copia recoge los ajustes, campos, opciones, traducciones e imágenes. Las condiciones «Mostrar solo si…» y los colores vinculados se reconectan a los campos copiados. La copia se crea **inactiva y sin producto ni categoría vinculados**, para no ocupar el lugar del original: vincule sus productos y actívela. ## Datos de demostración La página **Configurar** ofrece tres importaciones, que se pueden repetir sin duplicados: - **Taza, jarrón, camiseta**: vista previa compuesta, texto grabado, colores según la forma, fórmula de precio, subida de archivo. - **Bordado (parche y gorro)**: colores vinculados entre varios elementos. - **Cuadro de foto (arte mural)**: vista previa desactivada, enlace «Guía de materiales», tamaños con peso, tipo de soporte en miniaturas, foto del cliente, color de fondo, marco mostrado solo para una impresión enmarcada. ## Solución de problemas ### El configurador no se muestra - Compruebe que el configurador está **activo** y vinculado al producto, directamente o mediante una categoría. - Con ubicación manual, compruebe que el hook `displayDfProductConfigurator` está colocado en la plantilla de ficha de producto. - Con ubicación automática, compruebe que el tema llama a `displayProductAdditionalInfo` (el tema Classic lo hace). - Vacíe la caché (**Parámetros avanzados → Rendimiento**). ### Una opción no aparece en «Mostrar solo si…» Todavía no está guardada. Guarde el configurador y vuelva al campo. ### El enlace de información no aparece El texto del enlace y el contenido de la ventana deben estar rellenados en el idioma mostrado. ### El botón «Añadir al carrito» sigue en gris Falta un campo obligatorio visible: el mensaje bajo el total indica cuál. Desactive «Bloquear el añadir al carrito si es inválido» para dejar el botón activo y mostrar los errores al pulsarlo. ### Los gastos de envío no cambian según las opciones Compruebe que las opciones llevan un peso y que el transportista factura por peso (y no por precio). ## Historial de versiones - **1.3.0**: PrestaShop 1.7.7 y 1.7.8, varios productos y categorías por configurador, duplicación, condiciones elegidas en una lista de opciones, enlaces de información en ventana, hook dedicado para page builders, ventana de carrito, ajustes de visualización, arrastrar y soltar, demo de cuadro de foto. - **1.2.1**: vista previa idéntica al visual final, mensajes del front traducidos, editor de zonas con las proporciones correctas. - **1.2.0**: colores vinculados, recoloreado de visuales, demos en un clic, vista previa siempre visible. - **1.1.0**: fuente, tamaño y color a elección del cliente, zonas de colocación con el ratón, visual final y panel de pedido, tres modos de visualización. - **1.0.0**: versión inicial.