CSS y JavaScript personalizados

Inyecta tus propias reglas CSS y código JavaScript directamente en el módulo sin tocar los archivos del tema, y engánchate a los eventos clave del ciclo de vida del vídeo mediante callbacks dedicados.

nota

Disponible desde v3.2.0

Resumen

La sección CSS / JS personalizado te ofrece un espacio dedicado en el Back Office para ampliar y personalizar el comportamiento del módulo en el front-end. Cualquier CSS que introduzcas se añade después de la hoja de estilos predeterminada del módulo, por lo que tus reglas siempre ganan la batalla de especificidad. El JavaScript que introduzcas se carga como un archivo separado y tiene acceso a jQuery y a todas las variables del front-office de PrestaShop.

Más allá del CSS y JS generales, la sección expone tres callbacks JavaScript estructurados que se disparan en los momentos precisos: inmediatamente después de que las miniaturas de vídeo se inyectan en la página, cuando se hace clic en cualquier miniatura, y cuando se detecta una visita desde un dispositivo móvil o una ventana con un ancho reducido. Estos callbacks te permiten añadir analíticas, reinicializar sliders o aplicar comportamientos específicos para pantallas táctiles sin modificar los archivos del módulo directamente.

El CSS personalizado se almacena en views/css/pv_custom.css y el JavaScript personalizado en views/js/pv_custom.js dentro de la carpeta del módulo. Ambos archivos solo se cargan en las páginas donde el módulo está activo, y únicamente cuando contienen contenido.

Configuración

Ve a Módulos > Gestor de módulos > Product Video > Configurar y navega a la pestaña CSS / JS personalizado.

CSS personalizado

Campo	Valor por defecto	Descripción
Introduce aquí el CSS personalizado	(vacío)	Reglas CSS cargadas después de la hoja de estilos predeterminada del módulo. Escribe CSS estándar apuntando a las clases de los elementos del módulo. No se necesitan etiquetas <style>.

JavaScript global

Campo	Valor por defecto	Descripción
JavaScript global	(vacío)	JavaScript que se ejecuta en todas las páginas donde el módulo está activo. Escribe código en bruto — sin etiquetas <script>. jQuery ($) y todas las variables globales del front-office de PrestaShop están disponibles.

JavaScript específico para móvil

Campo	Valores	Valor por defecto	Descripción
JavaScript específico para móvil	Cualquier JS	(vacío)	JavaScript que se ejecuta solo cuando el visitante está en un dispositivo móvil o cuando el ancho de la ventana está en el valor de Punto de corte móvil o por debajo de él.
Punto de corte móvil (px)	Entero	768	Umbral de ancho de ventana en píxeles. Cuando el navegador tiene este ancho o menos, el JavaScript específico para móvil se activa — incluso en un navegador de escritorio. El callback móvil también se dispara cuando se redimensiona la página cruzando este umbral.

Valores de punto de corte habituales: 480 (móvil), 768 (tablet), 992 (escritorio pequeño), 1200 (escritorio).

Callbacks avanzados

Estos callbacks son funciones JavaScript con nombre que el módulo llama en momentos específicos del ciclo de vida. Tú solo escribes el cuerpo de la función — el módulo se encarga de llamarla en el momento adecuado.

Campo del callback	Firma de la función	Cuándo se dispara	Variables disponibles
JS: Tras insertar miniaturas	afterVideoInsert()	Inmediatamente después de que las miniaturas de vídeo se inyectan en el DOM, incluyendo tras cambios de combinación y actualizaciones AJAX	—
JS: Manejador de clic en miniatura	afterVideoClick(is_video, e)	Cuando se hace clic en cualquier miniatura de producto	is_video (booleano — true para miniaturas de vídeo, false para miniaturas de imagen), e (el objeto de evento clic de jQuery)

El callback Tras insertar miniaturas puede dispararse más de una vez por carga de página (por ejemplo, tras un cambio de combinación de producto). Escribe código que sea seguro de ejecutar varias veces.

Puedes llamar a e.preventDefault() o e.stopPropagation() dentro del Manejador de clic en miniatura si es necesario, aunque hacerlo puede impedir el comportamiento de apertura de vídeo predeterminado del módulo.

Cómo funciona

Carga de CSS

Cuando un visitante carga una página de producto (o cualquier página donde el módulo está activo), el módulo comprueba si views/css/pv_custom.css tiene contenido. Si lo tiene, se añade a la página como una hoja de estilos separada, posicionada después del CSS predeterminado del módulo. Este orden garantiza que tus reglas personalizadas anulen los valores predeterminados del módulo sin necesidad de !important.

Carga de JavaScript

Todo el JS personalizado — código global, código móvil y callbacks — se compila en un único archivo, views/js/pv_custom.js, al guardar la configuración. El módulo carga este archivo después de sus propios scripts, por lo que tu código puede referenciar con seguridad cualquier variable o función que el módulo ya haya definido.

Internamente, el archivo usa separadores de comentarios (/* ---------- */) para delimitar cada sección. El Back Office lee estos delimitadores para rellenar correctamente cada área de texto cuando vuelves a abrir la configuración.

Temporización del callback móvil

El callback móvil se dispara bajo dos condiciones: el servidor detecta un user-agent móvil (variable is_mobile), o el ancho de la ventana del visitante está en el valor de Punto de corte móvil o por debajo de él. La comprobación se ejecuta al cargar la página y de nuevo en cada redimensionamiento del navegador, con un debounce de 250 ms. El callback solo se dispara cuando el estado pasa de no-móvil a móvil — no en cada evento de redimensionamiento.

Callback tras insertar miniaturas

La función afterVideoInsert se llama dentro de la rutina insertThumbnails del módulo, directamente después de que las miniaturas se han añadido al DOM. Este es el momento ideal para reinicializar un slider, adjuntar manejadores de eventos personalizados o aplicar estilos que dependen de que las miniaturas estén presentes.

Manejador de clic en miniatura

La función afterVideoClick se llama en cada clic sobre una miniatura, con is_video establecido en true para las miniaturas de vídeo y false para las miniaturas de imagen (no vídeo). El argumento e es el objeto de evento jQuery en bruto del manejador de clic.

Ejemplos de uso

Ejemplo: Dar estilo al overlay del badge de vídeo

Quieres que las miniaturas de vídeo muestren un icono de reproducción blanco en lugar del color predeterminado:

.pv-badge-icon {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.55);
}

Pega esto en Introduce aquí el CSS personalizado y guarda.

---

Ejemplo: Enviar un evento de Google Analytics 4 cuando se hace clic en una miniatura de vídeo

En el campo JS: Manejador de clic en miniatura, introduce:

if (is_video) {
    gtag('event', 'video_thumbnail_click', {
        event_category: 'Product Video',
        event_label: window.location.pathname
    });
}

El callback recibe is_video como booleano, por lo que solo disparas el evento para los clics en vídeos reales.

---

Ejemplo: Reinicializar un slider Slick tras insertar las miniaturas

Si tu tema usa un slider Slick para la galería de imágenes y los vídeos se inyectan de forma asíncrona, es posible que el slider no los recoja. En el campo JS: Tras insertar miniaturas, introduce:

if ($.fn.slick && $('.product-images').hasClass('slick-initialized')) {
    $('.product-images').slick('reinit');
}

Esto comprueba de forma segura que Slick está presente y ya inicializado antes de llamar a reinit.

---

Ejemplo: Ajustar el ancho del vídeo solo en pantallas estrechas

En el campo JavaScript específico para móvil, con Punto de corte móvil establecido en 640:

$('.pv-video-wrapper').css('max-width', '100%');

Esto se ejecuta solo cuando la ventana del visitante tiene 640 px de ancho o menos.

Notas importantes

• Se requieren permisos de escritura en los archivos. El módulo escribe directamente en views/css/pv_custom.css y views/js/pv_custom.js dentro de su propia carpeta. Si el servidor web no puede escribir en esos archivos, se mostrará un error en el Back Office al guardar. Comprueba que la carpeta del módulo sea escribible por el usuario del servidor web.
• Borra la caché de PrestaShop tras guardar si tus cambios no aparecen de inmediato en el front-office. Ve a Parámetros avanzados > Rendimiento y haz clic en Vaciar la caché.
• El Punto de corte móvil solo controla el callback móvil, no el diseño CSS responsive del módulo. Cambiar este valor no afecta a cuándo se activan las media queries integradas del módulo.
• Sin etiquetas <script> ni <style>. Escribe solo código en bruto en todas las áreas de texto. El módulo envuelve y carga tu código correctamente.
• Los archivos CSS y JS se incluyen en la copia de seguridad/restauración de la configuración. Cuando usas la función Copia de seguridad de configuración / Cargar configuración del módulo, tu CSS y JS personalizados se guardan y restauran junto con el resto de ajustes.
• Multishop: Los archivos CSS y JS personalizados se almacenan en disco dentro de la carpeta del módulo, que se comparte entre todas las tiendas. Si gestionas varias tiendas, todas cargan el mismo CSS y JS personalizados. No existe una anulación por tienda para esta función.

Resolución de problemas

Problema	Solución
El CSS personalizado no es visible en el front-office	Borra la caché de PrestaShop en Parámetros avanzados > Rendimiento > Vaciar la caché. Comprueba también que no haya errores de sintaxis en el CSS — una regla sin cerrar puede invalidar silenciosamente todo lo que sigue.
El guardado falla con un error de escritura de archivo	El usuario del servidor web no tiene acceso de escritura a views/css/ o views/js/ dentro de la carpeta del módulo. Corrige los permisos de la carpeta (normalmente 755 para directorios, 644 para archivos, propiedad del usuario del servidor web).
El JS móvil se dispara en una pantalla de escritorio	La ventana de tu navegador de escritorio es más estrecha que el valor del Punto de corte móvil. Ensancha la ventana del navegador o reduce el punto de corte. Recuerda que la comprobación también se ejecuta al redimensionar.
El callback Tras insertar miniaturas provoca un error JS en la segunda ejecución	El callback se dispara cada vez que se insertan miniaturas, incluyendo los cambios de combinación. Protege tu código para que no se ejecute dos veces — por ejemplo, comprueba if ($('.my-element').length === 0) antes de crear elementos.
El callback de clic en miniatura no se dispara	El callback solo se adjunta a las miniaturas gestionadas por este módulo, dentro de la ubicación de visualización de la Galería de imágenes. Verifica que la Ubicación de la galería de imágenes está activa y que las miniaturas de vídeo se están renderizando en la página de producto.
El JS personalizado se guardó pero sigue ejecutándose la versión antigua	Es posible que tu navegador esté sirviendo una versión en caché de pv_custom.js. Haz una recarga forzada (Ctrl+Shift+R / Cmd+Shift+R) y borra también la caché de PrestaShop.

Preguntas frecuentes

¿Debo incluir etiquetas <script> o <style> en las áreas de texto?

No. Escribe solo código CSS o JavaScript en bruto. El módulo envuelve y carga cada bloque en el tipo de archivo correcto de forma automática.

¿Mi CSS personalizado anulará los estilos predeterminados del módulo?

Sí. El archivo CSS personalizado se carga después de la hoja de estilos predeterminada del módulo, por lo que tus reglas tienen prioridad sin necesidad de !important en la mayoría de los casos.

¿El callback móvil se dispara para dispositivos móviles reales, o solo según el ancho de pantalla?

Ambos. Se dispara si el servidor detecta un user-agent móvil, o si el ancho de la ventana del visitante está en el valor del Punto de corte móvil o por debajo — lo que sea cierto. En escritorio, reducir la ventana del navegador por debajo del punto de corte también lo activa.

¿Puedo usar el callback afterVideoClick para evitar que se abra el vídeo?

Sí. Llama a e.preventDefault() o e.stopPropagation() dentro del cuerpo del callback. Ten en cuenta que esto también impedirá el comportamiento de apertura de vídeo propio del módulo para los clics afectados.

¿Qué ocurre con mi código personalizado cuando actualizo el módulo?

Los archivos CSS y JS personalizados (pv_custom.css y pv_custom.js) se almacenan de forma independiente de los archivos principales del módulo y no se sobreescriben durante una actualización. Tu código personalizado se conserva.

¿El JS personalizado está disponible tanto para temas de PS 1.6 como de PS 1.7+?

Sí. El módulo carga pv_custom.js mediante el mecanismo estándar addJS() de PrestaShop, que funciona en todas las versiones compatibles (PrestaShop 1.6, 1.7, 8 y Thirty Bees).

¿Puedo apuntar a elementos externos al módulo en mi CSS personalizado?

Sí. El archivo CSS es una hoja de estilos global en la página, por lo que puedes apuntar a cualquier elemento visible en el front-office. Sin embargo, apuntar a elementos fuera del módulo puede entrar en conflicto con los estilos propios de tu tema u otros módulos.

Funciones relacionadas

• Compatibilidad con el tema — Selectores CSS y ajustes de adaptación estructural para que coincidan con el diseño de tu tema
• Integración con slider — Usa el callback Tras insertar miniaturas para reinicializar el slider de imágenes de tu tema después de inyectar los vídeos