Pestañas de Ficha de Producto PrestaShop — Documentación
Instalar, configurar y usar el gestor de pestañas de ficha de producto: ámbitos, contenido HTML o CMS, arrastrar y soltar y acordeón móvil.
Este módulo te permite crear pestañas personalizadas en la ficha de producto de tu tienda PrestaShop 8 o 9. Cada pestaña puede apuntar a todos los productos, a categorías específicas o a una selección precisa de productos, mostrar contenido HTML enriquecido o una página CMS, y convertirse en acordeón en móvil. Esta documentación cubre la instalación, la configuración y el uso diario.
Instalación
El módulo se instala como cualquier módulo de PrestaShop, sin dependencias ni configuración de servidor especial.
- En el back-office, abre Módulos > Gestor de módulos y haz clic en Subir un módulo.
- Selecciona el archivo ZIP del módulo y deja que se complete la instalación.
- Una vez instalado, aparece un nuevo acceso Catálogo > DF Tabs Builder en el menú del back-office.
El módulo crea cinco tablas dedicadas a sus datos. Se eliminan automáticamente al desinstalar, sin dejar residuos en la base de datos.
Ajustes generales
Desde la página del módulo, el botón Configurar abre los ajustes generales, independientes de las pestañas en sí.
Acordeón móvil
Esta opción activa la conversión automática de las pestañas en un acordeón en pantallas pequeñas. Cuando está activada, por debajo de cierto ancho de pantalla la fila de pestañas se convierte en una pila de encabezados desplegables de apertura única. Por encima de ese ancho, las pestañas nativas de tu tema se muestran con normalidad.
Punto de ruptura
El punto de ruptura define el ancho de pantalla (en píxeles) por debajo del cual se activa el modo acordeón. El valor por defecto es 768 píxeles, que corresponde al cambio tableta/móvil de la mayoría de los temas. Puedes introducir un valor entre 320 y 1920 píxeles.
Crear una pestaña
Abre Catálogo > DF Tabs Builder y haz clic en Añadir pestaña. El formulario de edición reúne todos los ajustes de una pestaña.
Título de la pestaña
El título se introduce idioma por idioma: es la etiqueta que se muestra en la pestaña, en la ficha de producto. Rellénalo para cada uno de los idiomas de tu tienda.
Estado
El interruptor Activo permite activar o desactivar la pestaña sin eliminarla. Una pestaña inactiva no aparece en ninguna ficha de producto.
Segmentar los productos adecuados
El campo Mostrar en determina el ámbito de la pestaña. Hay tres opciones.
Todos los productos
La pestaña es global: aparece en todas las fichas de producto de la tienda. Es la opción ideal para una pestaña de confianza, de envío o de preguntas frecuentes comunes.
Categorías específicas
La pestaña solo se muestra en los productos de las categorías seleccionadas. Aparece entonces un árbol de categorías con casillas de verificación y búsqueda: marca una o varias categorías. Un producto asociado a cualquiera de las categorías marcadas verá la pestaña.
Productos específicos
La pestaña apunta solo a una selección precisa de productos. Aparece un campo de búsqueda: escribe al menos dos caracteres para buscar un producto por nombre, referencia o identificador. Haz clic en un resultado para añadirlo; se muestra entonces como una etiqueta. Haz clic en la cruz de una etiqueta para quitar el producto de la selección.
Puedes compartir una pestaña de cuidados en toda una sección segmentándola por categoría, reservando una pestaña técnica para unas pocas referencias precisas mediante la segmentación por producto.
Elegir el contenido de la pestaña
El campo Tipo de contenido ofrece dos fuentes.
HTML personalizado
Redactas el contenido directamente en el editor enriquecido integrado, idioma por idioma. Puedes insertar texto con formato, listas, imágenes, tablas o vídeos integrados. Es el modo recomendado para un contenido propio de la pestaña.
Página CMS
Enlazas una página CMS existente de tu tienda. Su contenido se muestra entonces en la pestaña, en el idioma del visitante. Es práctico para reutilizar una política de devoluciones o una carta de cuidados ya redactada, sin duplicarla: cualquier actualización de la página CMS se refleja automáticamente en la pestaña.
Una pestaña cuyo contenido resuelto está vacío no se muestra en la ficha de producto. Esto evita mostrar una pestaña vacía, por ejemplo cuando una página CMS está desactivada.
Reordenar las pestañas
En la lista de pestañas, una columna de posición permite reordenar las pestañas por arrastrar y soltar: agarra el tirador de una fila y muévela hacia arriba o hacia abajo. El orden definido aquí es exactamente el orden en que las pestañas aparecen en la ficha de producto, de izquierda a derecha.
Comportamiento en móvil
Cuando el acordeón móvil está activado en los ajustes generales, las pestañas se convierten automáticamente en un acordeón por debajo del punto de ruptura definido. Cada pestaña se convierte en un encabezado clicable con un chevron; al abrir un encabezado se cierra el anterior (apertura única). Por encima del punto de ruptura, las pestañas nativas de tu tema se restauran de forma idéntica: el comportamiento no es destructivo.
El acordeón se apoya en el marcado de pestañas estándar del tema. En un tema con un marcado muy atípico, si el acordeón no puede construirse, las pestañas se muestran con normalidad: no se introduce ninguna regresión.
Desinstalación
La desinstalación desde el Gestor de módulos elimina el módulo, sus ajustes y todas las pestañas creadas, junto con las cinco tablas asociadas. Se solicita una confirmación porque esta operación borra definitivamente todas las pestañas.
Resolución de problemas
Mis pestañas no aparecen en la ficha de producto
Comprueba que la pestaña esté activa, que su ámbito corresponda realmente al producto consultado (categoría o producto segmentado) y que su contenido no esté vacío. Para una pestaña de tipo página CMS, asegúrate de que la página CMS enlazada esté activa en el idioma del visitante.
El acordeón no se activa en móvil
Asegúrate de que la opción de acordeón móvil esté activada en los ajustes generales y de que el ancho de tu pantalla sea realmente inferior al punto de ruptura configurado. Vacía la caché de PrestaShop tras cualquier cambio de ajustes.
Una pestaña se muestra en el lugar equivocado
El orden de las pestañas viene determinado por la columna de posición de la lista. Reordena las pestañas por arrastrar y soltar y luego recarga la ficha de producto para comprobarlo.