Módulo Magento 2 Pestañas adicionales en la ficha de producto ( Custom Tabs )
- Compatibilidad
- 2.4.9, 2.4.8, 2.4.7, 2.4.6, 2.4.5, 2.4.4, 2.4.3, 2.4.2, 2.4.1, 2.4.0
- Hyva Theme
- Hyva Theme Redy
Descripción / Módulo Magento 2 Pestañas adicionales en la ficha de producto ( Custom Tabs )
MAGENTO 2 · FICHA DE PRODUCTO · INFORMACIÓN ADICIONAL
La información adecuada en la sección de producto adecuada.
Kowal Custom Tab
Amplía la ficha de producto con pestañas y secciones propias que toman el contenido de los atributos. Gestiona nombres, orden y visibilidad desde el panel de Magento.
Contenido desde atributos · Secciones vacías ocultas · Nombres por Store View
CÓMO FUNCIONA EN LA PRÁCTICA
01 · Creas una entrada
Configuras el nombre, el atributo, el estado y el orden.
02 · Completas el producto
Añades contenido en el atributo de producto asignado.
03 · La ficha muestra la información
El módulo muestra la entrada solo donde tiene contenido.
¿Qué gana tu tienda?
Descubre las funciones, el uso y la configuración del módulo.
Pestañas de producto flexibles sin tocar la plantilla
Kowal Custom Tab es un módulo Magento 2 que permite ampliar rápidamente la ficha de producto con pestañas propias y dinámicas. El administrador puede crear secciones informativas adicionales, asignarlas a atributos de producto y controlar su orden sin editar los archivos del tema.
El módulo resulta útil en tiendas que necesitan presentar información adicional de producto de forma ordenada: tablas de tallas, composición, instrucciones de uso, archivos técnicos, información de entrega, garantía, certificados o descripciones ampliadas dependientes del producto.
Principales posibilidades
- Añadir pestañas propias en la ficha de producto.
- Obtener el contenido de la pestaña desde un atributo de producto seleccionado.
- Ocultar automáticamente las pestañas cuando el producto no tiene contenido completado en el atributo asignado.
- Gestionar el orden de visualización de las pestañas.
- Activar y desactivar pestañas desde el panel de administración.
- Compatibilidad con contenido HTML y widgets CMS renderizados por el filtro de Magento.
- Traducción del nombre de la pestaña por Store View según el mecanismo de scope de Magento.
- Fallback al valor predeterminado cuando el nombre para un Store View determinado no se ha sobrescrito.
Ventajas para la tienda
- Mejor organización de la información en la ficha de producto.
- Menos trabajo de desarrollo al añadir secciones de producto repetibles.
- Presentación coherente de datos adicionales en muchas categorías de productos.
- Posibilidad de adaptar los nombres de las pestañas a distintas versiones lingüísticas de la tienda.
- Menor riesgo de errores en la plantilla, ya que la configuración se realiza desde el panel de administración.
Ejemplos de uso
- Pestaña 'Especificación técnica' obtenida desde un atributo de producto.
- Pestaña 'Tabla de tallas' visible solo en productos con la tabla completada.
- Pestaña 'Instrucciones de uso' para productos que requieren una descripción adicional.
- Pestaña 'Composición y cuidado' en una tienda de moda.
- Pestaña 'Datos logísticos' en una tienda B2B.
- Nombres de pestañas independientes para las versiones polaca, inglesa y alemana de la tienda.
Para quién es este módulo
El módulo está pensado para tiendas Magento 2 que quieren ampliar la ficha de producto con información adicional sin crear cambios frontend individuales para cada pestaña. Encaja especialmente bien en tiendas multilingües, catálogos B2B e implementaciones en las que los datos de producto se mantienen en atributos de Magento.
Pestañas, secciones y diseño Full Width
La entrada puede tener Display Mode Tabs o Section. En el diseño por columnas eliges una pestaña o una sección independiente. En el diseño Product Full Width todas las entradas son secciones.
En Full Width, el módulo crea una navegación flotante por las secciones visibles. El campo Full Page Product - floating menu sections permite definir el orden, los destinos y las etiquetas del menú; un campo vacío restaura la detección automática.
Luma y adaptador Hyvä opcional
El paquete incluye Kowal_CustomTabHyva. Para la vista de tienda Hyvä, activa el módulo y la opción Hyva compatibility. El renderizado del adaptador está desactivado por defecto; la instalación en Luma no requiere Hyvä.
En Hyvä, tanto Tabs como Section se muestran como tarjetas nativas de sección de producto. El adaptador conserva el orden, las traducciones, la ocultación de atributos vacíos y el filtrado de contenido CMS. El menú Full Width solo funciona si el tema correspondiente ofrece este diseño.
Instalación mediante Composer
Paquete: kowal/module-customtab; módulo: Kowal_CustomTab. Tras configurar el acceso al repositorio de Kowal, instala el paquete, activa el módulo, ejecuta la actualización de Magento y limpia la cache. Para el modo de producción, incluye la compilación y el despliegue de contenido estático conforme al proceso de la tienda.
De la configuración al resultado
1. Creas una entrada
Configuras el nombre, el atributo, el estado y el orden.
2. Completas el producto
Añades contenido en el atributo de producto asignado.
3. La ficha muestra la información
El módulo muestra la entrada solo donde tiene contenido.
Tabla de tallas allí donde se necesita
Ejemplo: creas una pestaña 'Tabla de tallas' a partir de un atributo de producto. Las prendas con la tabla completada muestran la sección; los productos sin contenido no muestran una pestaña vacía.
Puedes adaptar el nombre por separado para las versiones polaca, inglesa y alemana de la tienda.
Organiza la información adicional en la ficha de producto
¿Quieres adaptar el módulo a tu tienda? Consulta la implementación de Kowal Custom Tab y comenta la configuración o las ampliaciones necesarias.
Más Información
| Hyva Theme | Hyva Theme Redy |
|---|---|
| Conformidad con la plantilla | Hyvä, Luma / Blank, KOWAL |
Instrucciones de instalación del módulo
Kowal Custom Tab - instalación y configuración
Requisitos
- Magento 2.4 o superior.
- Acceso a CLI de Magento.
- Composer configurado para descargar paquetes privados de Kowal.
- Módulo base
kowal/base. - Permisos de administrador para el panel de Magento.
Instalación mediante Composer
Añade el repositorio del paquete:
Recibirás por correo electrónico los datos de acceso al repositorio Composer (dirección de e-mail del cliente y token de licencia) después de la compra. También están disponibles en el panel de cliente tras iniciar sesión en kowal.store. Sustituye TWOJ_EMAIL_KLIENTA por la dirección de e-mail de tu cuenta y TWOJ_TOKEN por el token recibido. Ejecuta los comandos en el directorio raíz de Magento.
composer config repositories.kowal composer https://repo.kowal.store
Configura los datos de acceso al repositorio Composer de Kowal:
composer config http-basic.repo.kowal.store "TWOJ_EMAIL_KLIENTA" "TWOJ_TOKEN"
Instala el módulo:
composer require kowal/module-customtab
Ejecuta la actualización de Magento:
php bin/magento setup:upgrade
En un entorno de producción, ejecuta la compilación DI y el despliegue de recursos estáticos según el proceso del proyecto:
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
Limpia la caché:
php bin/magento cache:flush
Verificación de la instalación
Comprueba si el módulo está activo:
php bin/magento module:status Kowal_CustomTab
Si el módulo está inactivo, actívalo:
php bin/magento module:enable Kowal_CustomTab
php bin/magento setup:upgrade
php bin/magento cache:flush
Configuración del módulo
En el panel de Magento, ve a:
Stores > Configuration > Kowal > Custom Tab
Configura la opciónEnable moduleenYes, guarda la configuración y limpia la caché si Magento lo solicita.
Gestión de pestañas
En el panel de administración, ve a:
Kowal > Custom Tabs > Custom Tab
Haz clic enAdd new CustomTabpara crear una nueva pestaña.
Completa los campos:
Name- nombre de la pestaña visible en el frontend.Field type- tipo de fuente de contenido.Attribute code- atributo de producto desde el que se obtendrá el contenido de la pestaña.Status- actividad de la pestaña.Sort Order- orden de visualización de la pestaña.
Guarda la pestaña.
Traducción del nombre de la pestaña
El nombre predeterminado de la pestaña se guarda parastore_id = 0.
Para añadir una traducción para un Store View concreto:
- Abre una pestaña existente en modo edición.
- Utiliza el conmutador Store View en la zona superior derecha del formulario.
- Selecciona el Store View para el que quieres cambiar el nombre.
- Desmarca
Use Default Valuejunto al campoName. - Introduce el nombre de la pestaña para la versión lingüística seleccionada.
- Guarda el formulario.
SiUse Default Valuepermanece marcado, el módulo utilizará el valor predeterminado destore_id = 0.
Funcionamiento en el frontend
El módulo añade pestañas a la sección de detalles del producto. La pestaña aparece solo cuando el producto tiene un valor completado en el atributo indicado en la configuración de la pestaña.
Para el nombre de la pestaña, el módulo aplica fallback:
- Nombre para el Store View actual.
- Nombre predeterminado de
store_id = 0. - Valor de la tabla principal de pestañas, conservado por compatibilidad.
El contenido de la pestaña se filtra mediante el mecanismo CMS de Magento, por lo que puede incluir etiquetas HTML y widgets compatibles con Magento.
Actualización de una instalación existente
Después de actualizar el módulo a una versión con compatibilidad multilingüe, ejecuta:
php bin/magento setup:upgrade
php bin/magento cache:flush
La nueva tabla de valores por Store View se añadirá mediante el esquema declarativo de Magento. Tras el primer guardado de una pestaña existente, su nombre predeterminado también se persistirá como registrostore_id = 0.
Resolución de problemas
Si la pestaña no aparece en el frontend:
- Comprueba si el módulo está activado en la configuración.
- Comprueba si la pestaña tiene
Statusconfigurado enYes. - Comprueba si el producto tiene un valor completado en el atributo indicado en el campo
Attribute code. - Limpia la caché de Magento.
- Asegúrate de que el layout del tema sigue renderizando el bloque
product.info.details.
Si la traducción del nombre no aparece en el frontend:
- Comprueba si estás editando el Store View correcto.
- Comprueba si
Use Default Valueestá desmarcado para el campoName. - Guarda la pestaña y limpia la caché.