Saltar al contenido principal

Pestañas y Ubicación en la Descripción

Añade una sección de vídeo dedicada en la parte inferior de la página de producto — dentro de la barra de pestañas, en el área del pie de producto o en una posición personalizada de tu tema — con un reproductor embebido completo o una lista de miniaturas en las que se puede hacer clic.

nota

Disponible desde v3.0.0

Resumen

Esta ubicación está diseñada para vídeos más largos y demostraciones detalladas del producto en las que se desea separar el contenido de vídeo de la galería y el área de añadir al carrito. En lugar de competir por la atención cerca de las imágenes del producto, los vídeos aparecen más abajo en la página, donde los clientes que quieren más detalles llegarán de forma natural al hacer scroll.

Dispones de tres opciones de ubicación: dentro de la barra de pestañas del producto (junto a Descripción, Detalles y otras pestañas nativas), en el área del pie de producto justo debajo del bloque de pestañas, o mediante un hook personalizado que puedes colocar en cualquier lugar de la plantilla de tu tema. Dentro de cada ubicación puedes elegir entre un reproductor embebido completo y una cuadrícula de miniaturas que abre una ventana lightbox emergente.

La sección solo se muestra en los productos que tienen vídeos asignados. Los productos sin vídeos no muestran ninguna pestaña, ningún bloque en el pie ni ninguna salida del hook, por lo que nunca verás una pestaña "Vídeos" vacía.

Configuración

Ve a Módulos > Gestor de módulos > Product Video > Configurar y abre la sección Pestañas y Descripción.

Activar

CampoValoresPor defectoDescripción
Activar / desactivar esta funciónSí / NoNoInterruptor principal. Actívalo para habilitar la ubicación de Pestañas y Descripción.
Mostrar enTodos los dispositivos / Solo escritorio / Solo móvil y tabletasTodos los dispositivosLimita esta ubicación a tipos de dispositivos específicos. Úsalo si otra ubicación ya cubre el móvil y solo quieres la pestaña en escritorio, o viceversa.

Ubicación y Estilo

CampoValoresPor defectoDescripción
UbicaciónPestañas de producto / Pie de producto / Hook DisplayProductVideosContentPie de productoDónde aparece la sección de vídeo en la página de producto. Consulta "Cómo funciona" más adelante para ver los detalles de cada opción.
VisualizaciónReproductor con vídeos debajo / Lista de miniaturas con ventana emergenteReproductor con vídeos debajoCómo se presentan los vídeos. El reproductor se incrusta directamente en la página; la lista de miniaturas muestra una cuadrícula en la que se puede hacer clic para abrir cada vídeo en una ventana lightbox emergente.

Dimensiones del Reproductor

Estos dos campos se ignoran cuando Hacer vídeo adaptable está activado.

CampoValoresPor defectoDescripción
Anchura del vídeoNúmero (píxeles, sin sufijo px)720Anchura del reproductor incrustado.
Altura del vídeoNúmero (píxeles, sin sufijo px)520Altura del reproductor incrustado.
Hacer vídeo adaptableSí / NoEscala el reproductor para ocupar el ancho del contenedor manteniendo la relación de aspecto. Recomendado para temas modernos con diseño adaptable.

Cuadrícula de Miniaturas

Esta configuración solo se aplica cuando Visualización está definido como "Lista de miniaturas con ventana emergente".

CampoValoresPor defectoDescripción
Número de vídeos por línea4 / 5 / 6 / 7 / 86Cuántas columnas de miniaturas aparecen en la cuadrícula.

Guarda los cambios después de ajustar cualquier configuración. La vista previa en el front office se actualiza de inmediato tras vaciar la caché de Smarty que utilice tu tema.

Cómo Funciona

Ubicación en Pestañas de producto

Al seleccionar Pestañas de producto, el módulo se engancha a displayProductTab y displayProductTabContent (PS 1.6) o displayProductExtraContent (PS 1.7+) para inyectar una pestaña "Vídeos" junto a las pestañas nativas del producto. En PrestaShop 1.7 y versiones posteriores, el título de la pestaña se establece automáticamente como "Vídeos" mediante la API ProductExtraContent, lo que garantiza una integración limpia con el orden de pestañas y los estilos CSS gestionados por tu tema.

La pestaña solo aparece cuando al menos un vídeo está asignado al producto. Si el producto no tiene vídeos, la pestaña no se muestra en absoluto: tus clientes nunca verán una pestaña de Vídeos vacía.

Las Pestañas de producto requieren que tu tema llame a los hooks correspondientes en su plantilla de producto. El tema Classic por defecto (PS 1.7+) y la mayoría de los temas comerciales lo admiten. Si la pestaña no aparece tras activarla, es probable que tu tema no implemente estos hooks; cambia a Pie de producto en su lugar.

Ubicación en Pie de producto

Al seleccionar Pie de producto, el módulo utiliza displayFooterProduct. La sección de vídeo se muestra por debajo de todas las pestañas y el contenido de la descripción, antes del pie de página. Esta opción funciona con prácticamente cualquier tema de PrestaShop porque displayFooterProduct es un hook estándar presente desde PS 1.6.

En PS 1.6, el alias hookProductFooter también está registrado, por lo que ambas convenciones de nomenclatura se gestionan automáticamente.

Hook DisplayProductVideosContent (ubicación personalizada)

Al seleccionar la opción Hook DisplayProductVideosContent, el módulo responde al hook personalizado displayProductVideosContent, pero no genera ninguna salida hasta que añadas la llamada al hook en la plantilla de tu tema manualmente. Esto te da un control total sobre el lugar exacto de la página de producto donde aparece la sección de vídeo.

Para activarlo, abre el archivo product.tpl de tu tema (o el archivo equivalente) y añade esta línea en la posición deseada:

{hook h='displayProductVideosContent' product=$product}

Esta es la única opción de ubicación que requiere editar la plantilla manualmente. Las otras dos opciones funcionan sin tocar los archivos del tema.

Dimensiones adaptables frente a fijas

Con Hacer vídeo adaptable activado (valor por defecto), el reproductor se extiende para ocupar el 100 % del ancho de su contenedor y ajusta su altura proporcionalmente. Los valores de Anchura del vídeo y Altura del vídeo se ignoran completamente en este modo.

Con Hacer vídeo adaptable desactivado, el reproductor se muestra exactamente con las dimensiones en píxeles que especifiques. Usa esta opción cuando tu maquetación tenga un contenedor de ancho fijo y necesites que el reproductor coincida con un tamaño preciso, por ejemplo, para alinearlo con una barra lateral o una columna de cuadrícula específica.

Filtrado por dispositivo

La configuración Mostrar en se evalúa en el servidor usando la detección de dispositivos móviles de PrestaShop. Al establecerla en "Solo escritorio" se oculta la sección completamente en teléfonos y tabletas; "Solo móvil y tabletas" la oculta en navegadores de escritorio. Úsala para evitar duplicar el contenido de vídeo cuando ya has activado otra ubicación (como el panel lateral) para una clase de dispositivo.

Ejemplos de Uso

Ejemplo: Añadir una pestaña de Vídeos junto a Descripción y Detalles

Vendes objetivos fotográficos. Cada objetivo tiene un vídeo de análisis de 3 minutos. Activa esta función, establece Ubicación en "Pestañas de producto", deja Visualización como "Reproductor con vídeos debajo" y activa Hacer vídeo adaptable. Los clientes verán una pestaña "Vídeos" junto a "Descripción" y podrán hacer clic en ella para ver el análisis sin abandonar la página.

Ejemplo: Cuadrícula de miniaturas en el pie para un producto con muchos vídeos

Vendes cursos online y cada producto tiene 6 miniaturas de clips de vista previa. Establece Ubicación en "Pie de producto", Visualización en "Lista de miniaturas con ventana emergente" y Número de vídeos por línea en 6. Las seis miniaturas aparecen en una sola fila debajo de la descripción. Los clientes hacen clic en cualquier miniatura para abrir ese clip en una ventana lightbox.

Ejemplo: Reproductor de tamaño fijo en una maquetación de columna estrecha

Tu tema tiene una maquetación de dos columnas en la página de producto y la columna derecha tiene 480 px de ancho. Establece Ubicación en "Pie de producto", desactiva Hacer vídeo adaptable y define Anchura del vídeo en 460 y Altura del vídeo en 260. El reproductor encaja perfectamente dentro de la columna sin desbordarse.

Notas Importantes

  • En PrestaShop 1.6, la opción "Pestañas de producto" usa displayProductTab / displayProductTabContent. En PS 1.7+, usa displayProductExtraContent. Ambas se gestionan automáticamente; no es necesario cambiar nada al actualizar.
  • La nota sobre la opción adaptable en el Back Office indica "Solo funciona para TAB y Opciones de Descripción del Producto" — esto significa que se aplica únicamente a la ubicación de Pestañas y Descripción y no afecta a las ubicaciones de Galería de imágenes ni de Panel lateral.
  • Esta ubicación es compatible con multitienda. La configuración se almacena por contexto de tienda, por lo que puedes activarla en una tienda y desactivarla en otra.
  • Si el filtro de dispositivo Mostrar en está activo y realizas pruebas desde un navegador de escritorio, cámbialo temporalmente a "Todos los dispositivos" para confirmar que la sección se muestra correctamente antes de volver a aplicar el filtrado por dispositivo.
  • Las claves de configuración PV_VIDEOW y PV_VIDEOH también las usa la función de carrusel AMP cuando la compatibilidad con AMP está activada. Cambiarlas aquí afecta a ambas.

Solución de Problemas

ProblemaSolución
La pestaña de Vídeos nunca apareceConfirma que tu tema llama a {hook h='displayProductTab'} y {hook h='displayProductTabContent'} en su plantilla de producto. Si no lo hace, cambia Ubicación a "Pie de producto".
La pestaña aparece en PS 1.7 pero está vacíaComprueba que al menos un vídeo esté asignado al producto en la página de edición del producto. El hook devuelve una salida vacía para los productos sin vídeos, pero el marco de la pestaña puede seguir mostrándose según el tema.
El reproductor es demasiado ancho y se desbordaActiva Hacer vídeo adaptable para que el reproductor se ajuste al contenedor, o reduce Anchura del vídeo para que se adapte a tu maquetación.
Las dimensiones del reproductor parecen no tener efectoEs probable que Hacer vídeo adaptable esté activado. Desactívalo para usar los valores fijos de anchura y altura.
La opción de hook personalizado no muestra nadaDebes añadir manualmente {hook h='displayProductVideosContent' product=$product} al archivo product.tpl de tu tema. El hook solo genera contenido después de añadir esta línea.
Los vídeos aparecen en móvil cuando está configurado como Solo escritorioVacía la caché de plantillas Smarty de tu tema. La detección de dispositivos se realiza en el servidor, pero las plantillas en caché pueden servir contenido desactualizado.

Preguntas Frecuentes

¿Aparecerá una pestaña de Vídeos en productos que no tienen vídeos?

No. La pestaña y el bloque del pie solo se muestran cuando el producto tiene al menos un vídeo asignado. Los productos sin vídeos no generan ninguna salida desde esta ubicación.

¿Cuál es la diferencia entre "Reproductor con vídeos debajo" y "Lista de miniaturas con ventana emergente"?

La opción de reproductor incrusta un reproductor de vídeo completo directamente en la página para que los clientes puedan ver el vídeo sin ningún clic adicional. La lista de miniaturas muestra una cuadrícula de miniaturas de vídeo; los clientes hacen clic en una miniatura para abrir el vídeo en una ventana lightbox emergente. Usa el reproductor cuando tengas un vídeo principal por producto, y la lista de miniaturas cuando los productos tengan varios vídeos que quieras mostrar para explorar.

Mi tema usa un maquetador de páginas y el hook de pestaña de producto no está disponible. ¿Qué debo hacer?

Selecciona la opción del hook DisplayProductVideosContent y añade {hook h='displayProductVideosContent' product=$product} al diseño de la página de producto en el editor de plantillas de tu maquetador. Si tu maquetador no admite la inyección de hooks, usa Pie de producto en su lugar; funciona con casi cualquier tema y maquetador.

¿Activar esta ubicación ralentiza las páginas de producto?

El módulo solo carga los datos de vídeo y genera la salida en las páginas de producto donde esta ubicación está activa. Para los productos sin vídeos, el hook devuelve una cadena vacía de inmediato, por lo que no hay sobrecarga de consultas para los productos sin vídeos.

¿Puedo mostrar la pestaña en escritorio y el pie en móvil al mismo tiempo?

No con una única instancia de esta ubicación. Para conseguir ubicaciones específicas por dispositivo, configura esta ubicación para una ubicación concreta y usa el Panel lateral u otra ubicación para la otra clase de dispositivo, controlando cada una con el filtro de dispositivo Mostrar en.

La configuración "Número de vídeos por línea" no tiene ningún efecto. ¿Por qué?

Esta configuración solo se aplica cuando Visualización está definido como "Lista de miniaturas con ventana emergente". Si usas la opción "Reproductor con vídeos debajo", el número de columnas no tiene ningún efecto.

Funciones Relacionadas