Escaparate de vídeos de producto - Carrusel YouTube, Vimeo y Dailymotion con lightbox, portada o columna, sin jQuery

Sus vídeos de producto, convertidos en herramienta de venta

Un vídeo colocado en una ficha de producto solo lo ven las personas que ya están en esa ficha. Este módulo lleva sus vídeos de producto adonde los visitantes empiezan de verdad: la portada, o una columna lateral presente en todas las páginas.

Cada diapositiva utiliza la imagen de portada del propio producto como miniatura y enlaza directamente con ese producto. Demostraciones, unboxings y vídeos explicativos dejan de estar enterrados y empiezan a atraer gente hacia sus fichas de producto.

Tres plataformas, ninguna clave API

Usted pega un enlace y el módulo se encarga del resto. Reconoce YouTube, Vimeo y Dailymotion, y mientras escribe aparece una etiqueta que nombra la plataforma y le devuelve el identificador del vídeo que ha extraído, de modo que puede comprobar que ha interpretado el vídeo correcto antes de guardar.

YouTube se reconoce en todas sus formas habituales: watch?v=…, youtu.be/…, Shorts, directos, enlaces de inserción y enlaces /v/. Vimeo funciona con enlaces normales y también con el hash de privacidad de los vídeos ocultos (vimeo.com/123456789/abcdef1234): pegue el enlace completo y el hash se conserva. Dailymotion admite sus URL de vídeo estándar.

No hay ninguna clave API que obtener ni ninguna cuenta de desarrollador que registrar para ninguna de las tres.

Un lightbox que no manda a sus visitantes fuera

Al hacer clic en una diapositiva, el vídeo se abre en una capa sin distracciones dentro de su propia tienda, así que nadie acaba en YouTube en mitad de la visita. Se cierra con un clic o con la tecla Escape, y está marcado como un diálogo real para las tecnologías de asistencia. Al cerrarlo, el reproductor se vacía en lugar de solo ocultarse, de modo que el audio se detiene de verdad en vez de seguir sonando de fondo.

Los vídeos de YouTube se reproducen mediante el reproductor youtube-nocookie.com, respetuoso con la privacidad.

Portada, columna lateral o cualquier punto de su plantilla

El carrusel se muestra en la portada de forma predeterminada. Para llevarlo a una columna, vaya a Diseño → Posiciones, localice Escaparate de vídeos de producto y transplántelo a displayLeftColumn o displayRightColumn. Los desarrolladores de plantillas también pueden insertarlo donde quieran con {widget name='productvideoslider'}.

Las columnas laterales muestran automáticamente un solo vídeo cada vez, sea cual sea el número de vídeos por fila que haya configurado: en una columna estrecha no caben cuatro de forma legible.

Adaptable por lógica real, no por buenas intenciones

Usted elige de 1 a 6 vídeos por fila en escritorio. El módulo después reduce ese número automáticamente en JavaScript, midiendo el ancho real de la ventana: como máximo 2 por debajo de 576 px, 3 por debajo de 768 px, 4 por debajo de 992 px, y el número que usted haya elegido por encima. Su ajuste es un máximo, no una cantidad fija.

El desplazamiento funciona con deslizamiento táctil nativo en móviles y tabletas. Flechas, puntos, reproducción automática, velocidad de reproducción automática y pausa al pasar el ratón son opcionales y configurables, y el carrusel se mantiene dentro del ancho de contenido de su plantilla en lugar de extenderse de borde a borde.

Orden, visibilidad y una lista que le dice la verdad

La lista Sus vídeos de producto se reordena con flechas arriba/abajo y le permite ocultar cualquier vídeo con un clic sin eliminarlo. Cada fila muestra su producto, su plataforma y su estado.

Si el producto de un vídeo se elimina más adelante, la lista se lo dice con claridad mediante un aviso "Producto eliminado" en lugar de dejarle con la duda, y usted puede reasignar esa fila a otro producto o borrarla.

Nada roto llega nunca a su tienda

Una diapositiva se muestra solo cuando el vídeo está activo y su producto está activo en la tienda actual. Eso se aplica en la propia consulta, uniendo con el estado del producto a nivel de tienda, así que un producto desactivado o ajeno a esa tienda simplemente desaparece. Al eliminar un producto, sus vídeos se eliminan automáticamente.

La versión 2 cerró un punto de escritura sin autenticar

Conviene decirlo con franqueza, porque es la verdadera razón para actualizar.

La versión 1.x incluía un archivo ajax.php independiente cuya comprobación de autenticación se superaba con solo enviar un identificador de producto. Cualquier visitante anónimo podía enviar por POST un identificador de producto y un texto arbitrario y hacer que se escribiera directamente en la tabla product del núcleo. El mismo archivo concatenaba un valor de la petición directamente en SQL y ejecutaba error_reporting(0), ocultando todos los fallos que provocaba.

Peor aún, el valor almacenado se imprimía tal cual dentro de un atributo href, de modo que un enlace con un pseudoprotocolo malicioso de ejecución de código se activaba al hacer clic.

Ese archivo ha desaparecido. Ahora los enlaces se validan y solo se guardan URL reconocidas de YouTube, Vimeo y Dailymotion, cada acción de administración pasa por el token de empleado estándar y la salida se escapa en las plantillas.

Ya no modifica la tabla de productos de PrestaShop

La versión 1.x ejecutaba ALTER TABLE ps_product ADD product_video_field_1 al instalarse y nunca la eliminaba: desinstalar dejaba una columna permanente en la tabla de productos del núcleo.

La versión 2 guarda sus datos en su propia tabla. La actualización migra todos los vídeos existentes fuera de la columna del núcleo, detecta la plataforma de cada uno y después elimina esa columna. La desinstalación también la elimina, si de algún modo hubiera sobrevivido. Cualquier enlace migrado que no se haya podido reconocer queda oculto en lugar de mostrarse roto, así que puede corregirlo y reactivarlo desde la lista.

El front office perdió todas sus dependencias

La versión 1.x cargaba jQuery 1.4.4, Fancybox y el plugin mousewheel en todas las páginas de la tienda, entrando en conflicto con el jQuery que ya tuviera su plantilla. Todo eso ha desaparecido. El front office es JavaScript y CSS nativos, sin ninguna dependencia: un archivo pequeño de cada uno.

El módulo registra esos dos archivos solo en las páginas donde realmente tiene algo que mostrar. Conviene saberlo: si usa la opción Combinar, comprimir y almacenar en caché de PrestaShop, la plataforma fusiona los recursos de todos los módulos en paquetes compartidos, así que el código de este módulo viajará dentro de ese paquete como el de los demás. Es el comportamiento de PrestaShop, no algo a lo que un módulo pueda renunciar.

Se han corregido otros dos errores de la versión 1.x: la visualización en columna izquierda y derecha que anunciaba nunca llegó a registrarse, así que no hacía absolutamente nada; y su lógica de portada tomaba los N primeros productos de la categoría Inicio y después buscaba vídeos, de forma que una tienda cuyos primeros productos no tuvieran vídeo se encontraba con un carrusel vacío.

Compatibilidad

PrestaShop 1.7 a 9, en ocho idiomas: alemán, español, francés, inglés, italiano, neerlandés, polaco y turco.

Sin overrides, sin modificar el núcleo ni la plantilla, sin jQuery. La desinstalación elimina la tabla del módulo y sus ajustes, y elimina la antigua columna del núcleo, dejando su base de datos tal como estaba antes de la instalación.

Preguntas frecuentes

¿Necesito una clave API de YouTube, Vimeo o Dailymotion?

No. Usted pega un enlace de vídeo corriente y el módulo reconoce la plataforma por sí solo. No hay ninguna clave que obtener ni ninguna cuenta de desarrollador que registrar para ninguna de las tres.

¿Dónde puede aparecer el carrusel?

En la portada de forma predeterminada, en la columna izquierda o derecha transplantándolo desde Diseño → Posiciones, o en cualquier punto de su plantilla con {widget name='productvideoslider'}.

¿Por qué mi columna lateral muestra un solo vídeo cada vez?

Es intencionado. Las columnas laterales son estrechas, así que el carrusel muestra siempre un vídeo ahí, sea cual sea el ajuste de vídeos por fila.

He configurado seis vídeos por fila pero veo menos.

El número por fila es un máximo pensado para escritorio. El módulo mide el ancho real de la ventana en JavaScript y muestra como máximo 2 por debajo de 576 px, 3 por debajo de 768 px y 4 por debajo de 992 px.

Mi vídeo de Vimeo no se reproduce en el lightbox.

Si es un vídeo oculto, necesita su hash de privacidad en el enlace, como vimeo.com/123456789/abcdef1234: pegue la URL completa desde el botón Compartir. Un vídeo cuyo propietario haya desactivado la inserción no puede reproducirse en ningún sitio web.

No se acepta un enlace.

Pegue la URL completa desde la barra de direcciones o desde el botón Compartir. La etiqueta situada bajo el campo le indica al momento si el enlace se reconoce, nombrando la plataforma y devolviéndole el identificador del vídeo extraído, así que nunca tiene que guardar y cruzar los dedos.

Uno de mis vídeos muestra un aviso "Producto eliminado".

El producto al que apuntaba ese vídeo fue eliminado. Edite la fila para elegir otro producto, o borre la fila.

El carrusel no aparece en absoluto.

Solo se muestra cuando al menos un vídeo está activo y su producto está activo en la tienda actual. Revise la columna de estado en la lista y también el estado del propio producto.

¿Qué pasa con la columna que la versión 1 añadió a mi tabla de productos?

La actualización migra sus vídeos fuera de ella y después la elimina. La desinstalación también la elimina. Su base de datos acaba tal como estaba antes de que el módulo se instalara.