Panel Lateral
Coloca un reproductor de vídeo o una cuadrícula de miniaturas junto a la descripción del producto — cerca del precio, el botón de añadir al carrito y otros elementos de compra — sin modificar la galería de imágenes.
Disponible desde v3.0.0
Descripción general
El Panel Lateral ofrece una segunda área de visualización de vídeo en la página de producto, ubicada en la columna de información del producto en lugar de dentro de la tira de fotos. Esto coloca el contenido de vídeo justo donde se toman las decisiones de compra: cerca del título, la descripción corta, el precio o el bloque de añadir al carrito.
Puedes elegir entre dos estilos de visualización. El primero muestra el vídeo incrustado y listo para reproducirse de inmediato, sin necesidad de ningún clic. El segundo muestra una cuadrícula compacta de miniaturas donde los clientes pueden hacer clic en cualquier miniatura para abrir el reproductor a tamaño completo en una superposición lightbox. Ambos estilos son totalmente compatibles con YouTube, Vimeo, HTML5 y proveedores de vídeo personalizados.
El Panel Lateral es independiente de las funciones Galería de Imágenes y Pestañas. Puedes usar los tres al mismo tiempo, o utilizar únicamente el Panel Lateral por separado. La ubicación es altamente configurable: un hook estándar de PrestaShop (la opción más compatible), varias posiciones predefinidas en la página de producto, o cualquier selector CSS que elijas.
Configuración
- Ve a Módulos > Gestor de módulos, busca Product Video y haz clic en Configurar.
- Abre la pestaña Panel Lateral.
- Ajusta los parámetros que se describen a continuación y haz clic en Guardar.
Activar
| Campo | Valores | Por defecto | Descripción |
|---|---|---|---|
| Activar / desactivar esta función | Sí / No | Sí | Interruptor principal. Desactívalo para ocultar el Panel Lateral sin perder la configuración. |
| Mostrar en | Todos los dispositivos / Solo escritorio / Solo móvil y tableta | Todos los dispositivos | Restringe el Panel Lateral a tipos de dispositivos específicos. Útil cuando el panel se ve bien en escritorio pero ocupa demasiado espacio en móvil. |
Ubicación (PrestaShop 1.6)
| Campo | Valores | Por defecto | Descripción |
|---|---|---|---|
| Ubicación | Columna izquierda / Columna derecha | Columna derecha | Inserta el panel en el área de widgets de la columna izquierda o derecha del tema. Solo se aplica en PrestaShop 1.5–1.6. |
Ubicación (PrestaShop 1.7+)
| Campo | Valores | Por defecto | Descripción |
|---|---|---|---|
| Ubicación | Posición de botones adicionales / Después de las miniaturas del producto / El título / La descripción corta / El precio / El bloque de cantidad y añadir al carrito / Posición personalizada | Posición de botones adicionales | Dónde en la página de producto se inserta el Panel Lateral. Consulta las notas a continuación para cada opción. |
| Selector de posición personalizada | Cualquier selector CSS/jQuery | — | Visible solo cuando se selecciona Posición personalizada. Introduce el selector del elemento objetivo en tu tema (p. ej. .product-variants o #main .product-add-to-cart). |
| Modo de inserción | Antes / Al principio / Al final / Después | Después | Controla cómo se inserta el panel en relación con el elemento elegido. Antes y Después lo colocan fuera del elemento; Al principio y Al final lo colocan dentro. |
Posición de botones adicionales utiliza el hook
displayProductAdditionalInfode PrestaShop — la opción más segura porque no requiere manipulación del DOM. Si tu tema no renderiza este hook, elige una posición predefinida o usa la posición personalizada.
Después de las miniaturas del producto utiliza el hook
displayAfterProductThumbs. La plantilla de producto de tu tema debe incluir{hook h="displayAfterProductThumbs" product=$product}para que esto funcione.
Las posiciones predefinidas (título, descripción corta, precio, añadir al carrito) utilizan inyección DOM con JavaScript y no son compatibles con constructores de páginas como Elementor o Divi.
Estilo de visualización
| Campo | Valores | Por defecto | Descripción |
|---|---|---|---|
| Visualización de vídeos | Mostrar el primer vídeo incrustado / Mostrar una lista de miniaturas | Mostrar una lista de miniaturas | Elige si mostrar un reproductor incrustado de inmediato o una cuadrícula de miniaturas en la que se puede hacer clic. |
| Número de vídeos por línea | 2 / 3 / 4 / 5 / 6 | 3 | Se aplica cuando se selecciona Mostrar una lista de miniaturas. Define cuántas columnas de miniaturas aparecen en la cuadrícula. |
Título
| Campo | Valores | Por defecto | Descripción |
|---|---|---|---|
| Mostrar título | Sí / No | No | Cuando está activado, aparece un encabezado sobre el panel. |
| Formato del título | h2 / h3 / h4 / h5 / p / span | h3 | El elemento HTML utilizado para el encabezado. Elige un nivel que se adapte a la jerarquía de encabezados de tu tema. |
| Clase del contenedor del título | Texto | — | Clase CSS opcional añadida al elemento del título. Úsala para aplicar estilos personalizados sin modificar los archivos del tema. |
Modal de vista rápida
| Campo | Valores | Por defecto | Descripción |
|---|---|---|---|
| Mostrar en vista modal | Sí / No | No | Solo para PrestaShop 1.7+. Cuando está activado, el Panel Lateral también se renderiza dentro del modal de vista rápida del producto. |
Cómo funciona
Modo de reproductor incrustado
Cuando se selecciona Mostrar el primer vídeo incrustado, el módulo renderiza un iframe para el primer vídeo del producto directamente en la página. El reproductor es visible y está listo para reproducirse en cuanto carga la página, sin necesidad de interacción. Esta opción es ideal cuando tienes un vídeo principal que quieres que los clientes vean de inmediato.
Modo de lista de miniaturas
Cuando se selecciona Mostrar una lista de miniaturas, los clientes ven una cuadrícula de imágenes en miniatura de los vídeos. La cuadrícula ocupa el ancho disponible con el número de columnas especificado. Al hacer clic en cualquier miniatura se abre ese vídeo en una superposición lightbox con FancyBox. Los clientes pueden explorar todas las miniaturas antes de decidir qué vídeo ver.
Ubicación e inyección
Para las ubicaciones basadas en hooks (Posición de botones adicionales, Después de las miniaturas del producto), el módulo renderiza el panel en el lado del servidor a través del sistema de hooks de PrestaShop. No se necesita inyección JavaScript, lo que las convierte en las opciones más fiables.
Para las posiciones predefinidas y la posición personalizada, el módulo utiliza JavaScript para encontrar el elemento objetivo y llamar a .before(), .prepend(), .append() o .after() de jQuery según el Modo de inserción seleccionado.
Modal de vista rápida
Cuando Mostrar en vista modal está activado, el módulo detecta cuándo se abre el modal de vista rápida y renderiza el Panel Lateral dentro de él. Esto permite a los clientes ver vídeos sin necesidad de navegar a la página completa del producto.
Ejemplos de uso
Ejemplo: Vídeo junto al botón de añadir al carrito en un producto con un vídeo principal
Vendes una batidora y tienes un vídeo de demostración. Configura Visualización de vídeos en Mostrar el primer vídeo incrustado, Ubicación en El bloque de cantidad / añadir al carrito y Modo de inserción en Antes. El reproductor de vídeo aparece directamente encima del botón de añadir al carrito, visible en el momento en que carga la página. No es necesario desplazarse ni hacer clic.
Ejemplo: Cuadrícula de miniaturas bajo la descripción corta para un producto con múltiples ángulos
Vendes muebles con cinco vídeos desde distintos ángulos. Configura Visualización de vídeos en Mostrar una lista de miniaturas, Número de vídeos por línea en 3 y Ubicación en La descripción corta con Modo de inserción en Después. Los clientes ven una franja de miniaturas de 3 columnas inmediatamente después de la descripción corta. Al hacer clic en cualquier miniatura se abre un lightbox a pantalla completa.
Ejemplo: Posición personalizada en un tema con una maquetación no estándar
Tu tema coloca el bloque de añadir al carrito dentro de un contenedor personalizado <div class="my-theme-purchase">. Configura Ubicación en Posición personalizada, introduce .my-theme-purchase como selector y establece Modo de inserción en Antes. El Panel Lateral aparece justo encima de ese contenedor, independientemente de la estructura del tema.
Notas importantes
- El Panel Lateral y la Galería de Imágenes son totalmente independientes. Activar uno no afecta al otro.
- En PrestaShop 1.6, solo se aplican las opciones Columna izquierda y Columna derecha. El selector de posición de PS 1.7 se ignora.
- Las posiciones predefinidas y la posición personalizada utilizan inyección DOM con JavaScript al cargar la página. Si el elemento objetivo no existe en el DOM cuando se ejecuta el script, el panel no aparecerá. Verifica el selector con el inspector de tu navegador.
- La posición personalizada no es compatible con constructores de páginas (Elementor, Divi, WPBakery) que renderizan el contenido de forma asíncrona.
- Número de vídeos por línea solo afecta al modo de visualización de lista de miniaturas. No tiene efecto cuando se selecciona el modo de reproductor incrustado.
- La opción Modal de vista rápida está oculta en PrestaShop 1.6 — solo es relevante para temas de la versión 1.7+ que incluyan una función de vista rápida.
- En una configuración multtienda, los ajustes del Panel Lateral son por tienda. Puedes activar el Panel Lateral en una tienda y desactivarlo en otra, o utilizar ubicaciones diferentes por tienda.
Solución de problemas
| Problema | Solución |
|---|---|
| El Panel Lateral no aparece en ningún lugar de la página | Comprueba que Activar / desactivar esta función esté configurado en Sí y que Mostrar en coincida con el dispositivo que estás usando para las pruebas. Si usas una ubicación basada en hook, verifica que el hook esté presente en tu tema. |
| El panel aparece en una posición incorrecta | Cambia a Posición personalizada, abre el inspector del navegador, localiza el elemento contenedor exacto, copia su selector CSS y pégalo en Selector de posición personalizada. Ajusta el Modo de inserción para colocarlo antes o después. |
| El panel se superpone al botón de añadir al carrito o al precio | Cambia el Modo de inserción de Al final (dentro) a Después (fuera). Esto coloca el panel después del contenedor en lugar de dentro de él. |
| El panel aparece en escritorio pero no en móvil | Mostrar en está configurado en Solo escritorio. Cámbialo a Todos los dispositivos o Solo móvil y tableta según sea necesario. |
| El modal de vista rápida no muestra el Panel Lateral | Confirma que Mostrar en vista modal está configurado en Sí y que estás en PrestaShop 1.7+. Algunos plugins de vista rápida de terceros utilizan una estructura de modal diferente que el módulo no puede detectar automáticamente. |
| El encabezado del título rompe la maquetación | Configura Mostrar título en No si el encabezado no es necesario. De lo contrario, ajusta el Formato del título para que coincida con el nivel de encabezado que espera tu tema, o usa Clase del contenedor del título para aplicar una anulación CSS. |
Preguntas frecuentes
¿Puedo mostrar vídeos diferentes en el Panel Lateral y en la Galería de Imágenes?
No — ambos muestran las mismas entradas de vídeo asociadas al producto. Lo que difiere es el estilo de visualización, la ubicación y la presentación del reproductor. Puedes controlar qué vídeos aparecen gestionando la lista de vídeos del producto.
¿El Panel Lateral ralentiza la carga de la página?
Las ubicaciones basadas en hooks (Posición de botones adicionales, Después de las miniaturas del producto) se renderizan en el servidor junto con la página, por lo que no hay tiempo de carga adicional. Las posiciones predefinidas y la posición personalizada inyectan el contenido con JavaScript tras cargar el DOM, lo que añade un breve instante antes de que aparezca el panel, pero no supone una solicitud de red adicional.
¿Qué ocurre si configuro tanto la Galería de Imágenes como el Panel Lateral para mostrar un reproductor incrustado?
Ambos se renderizarán de forma independiente. La Galería de Imágenes incrusta el vídeo dentro del área del carrusel de fotos; el Panel Lateral lo incrusta en la columna de información del producto. Esto es válido y algunos comerciantes lo usan intencionadamente para que el vídeo sea imposible de pasar por alto.
¿Puedo limitar el Panel Lateral solo a clientes registrados?
No directamente desde los ajustes del Panel Lateral. Usa la función Restricciones de acceso (disponible en la configuración del módulo) para restringir qué grupos de clientes pueden ver vídeos en todas las ubicaciones de visualización, incluido el Panel Lateral.
He seleccionado la opción «Después de las miniaturas del producto» pero no aparece nada. ¿Por qué?
Esta opción depende de que el hook displayAfterProductThumbs esté presente en la plantilla de producto de tu tema. Muchos temas no lo incluyen. Abre el archivo product.tpl del tema (o product.html.twig en PS 1.7) y comprueba si existe este hook. Si no está, cambia a una ubicación diferente o usa la posición personalizada.
¿Puedo mostrar el Panel Lateral solo en determinados productos?
El Panel Lateral solo aparece en productos que tengan al menos un vídeo asignado. Si un producto no tiene vídeos, el Panel Lateral no se renderiza para él independientemente de tu configuración.
Funciones relacionadas
- Ubicación en la galería de imágenes — Integra vídeos en la tira de fotos del producto
- Pestañas y descripción — Muestra un reproductor a tamaño completo en una pestaña dedicada del producto o bajo la descripción
- Listados de productos — Muestra indicadores de vídeo o miniaturas en las páginas de categoría y resultados de búsqueda
- Restricciones de acceso — Restringe qué grupos de clientes pueden ver vídeos