Product Media Pro - Vídeo, Google Maps, Instagram, audio o HTML propio en cualquier producto, sin tocar la plantilla

Un producto, un contenido multimedia, sin editar el tema

Hay productos que necesitan algo más que fotografías. Un vídeo de demostración, un mapa hasta el taller donde se fabricó, una muestra grabada, la publicación de Instagram en la que un cliente le etiquetó. Añadir cualquiera de esas cosas suele obligarle a editar su tema, y a volver a editarlo después de cada actualización.

Este módulo da a cada producto su propio panel multimedia, dentro de la pestaña Módulos del producto en el back office. Elija una fuente, pegue un enlace y guarde. El contenido aparece en la página de ese producto y en ninguna otra.

Ocho fuentes y una vista previa mientras pega

YouTube, Vimeo y Dailymotion admiten la URL de vídeo corriente, la que aparece en la barra de direcciones. Google Maps admite el código <iframe> de su cuadro de diálogo Compartir → Insertar un mapa. Instagram admite la URL de una publicación pública. Audio acepta un enlace directo a .mp3, .ogg o .wav, un enlace de SoundCloud o Spotify, o un fragmento de inserción completo.

Además de esas, iFrame propio acepta cualquier código de inserción de terceros que use una etiqueta <iframe>, y HTML propio acepta absolutamente cualquier cosa: texto, una tabla, su propio widget.

La vista previa se actualiza mientras pega, de modo que ve el resultado final antes de guardar. No hay ningún paso de 'generar' aparte que se le pueda olvidar.

Producto a producto, no para toda la tienda

Cada producto puede llevar una fuente distinta, o ninguna. Una guitarra lleva su muestra de audio, una mesa artesanal lleva el mapa del taller, una bicicleta lleva su vídeo de montaje, y los otros cuatrocientos productos no llevan nada. Un único interruptor por producto decide si se muestra o no.

Tres posiciones, elegidas una sola vez

Usted decide, para toda la tienda, dónde se sitúa el bloque: debajo de las imágenes del producto, encima de las pestañas del producto o en su propia pestaña 'Media'.

Si tiene dudas, elija la pestaña. Esa opción utiliza el hook nativo de pestañas de producto de PrestaShop en lugar de buscar un hueco en el marcado de su tema, así que funciona con cualquier tema.

Adaptable desde el primer momento

Las inserciones se ajustan a la pantalla. Todo lo que el módulo muestra va envuelto en una caja adaptable de 16:9 que se redimensiona con la página. Envuelva su propio código de inserción en <div class="embed-container"> para obtener ese mismo comportamiento en cualquier cosa que pegue usted mismo. La hoja de estilos incluye además las clases auxiliares embed-container-square y embed-container-tall, que puede añadir a mano cuando una caja de 16:9 no sea la forma adecuada, como suele ocurrir con una publicación de Instagram.

Nunca toca un archivo del tema, y ese es justamente el objetivo

La versión 1.x funcionaba copiando y renombrando el product.tpl de su tema. Es de esas soluciones que aguantan perfectamente hasta que usted actualiza el tema, y entonces dejan de funcionar en silencio. O peor: desinstalar el módulo sobrescribía el archivo de su tema con una copia de seguridad obsoleta.

La versión 2 no hace nada de eso. Se engancha a displayProductExtraContent y displayFooterProduct — ambos estándar — y utiliza un pequeño código de posicionamiento para las dos ubicaciones que no son la pestaña. No hay ninguna copia de archivos, ningún renombrado y ninguna sobrescritura en todo el módulo. Los temas personalizados, los temas hijos y las futuras actualizaciones del tema quedan intactos.

La versión 2.0.1 arregló las dos posiciones en el tema de PrestaShop 9

Conviene decirlo con claridad si usted usa Hummingbird, el tema por defecto de PrestaShop 9.

El código de posicionamiento solo reconocía los selectores del tema Classic. En Hummingbird no existe ninguno de ellos, así que 'debajo de las imágenes' y 'encima de las pestañas' no hacían nada: el bloque se quedaba donde lo había mostrado el hook del pie de página. La opción de 'pestaña propia' no se veía afectada, porque nunca dependió de selectores.

La 2.0.1 añadió los selectores propios de Hummingbird (#product_accordion y .product__images) junto a los de Classic, de modo que las tres posiciones se comportan ya como se describe en ambos temas.

Una reescritura más limpia por debajo

La versión 2 corrigió además varias cosas que llevaban años mal:

Guardar cualquier producto, incluso desde una pestaña sin ninguna relación, creaba una fila multimedia vacía. Las entidades HTML se codificaban dos veces, lo que anulaba la propia limpieza del módulo antes de almacenar el contenido. El esquema de la base de datos mantenía una columna por tipo de medio, y la actualización lo compacta en cuatro (active, media_type, media_input, media_html) y migra los datos automáticamente.

El módulo también dejó de incluir sus propias copias de Bootstrap, jQuery y URI.js: el back office de PrestaShop 1.7+ ya las proporciona, y distribuir duplicados solo invitaba a los conflictos.

Getty Images desapareció como fuente con nombre propio porque Getty retiró su widget de inserción gratuito. Las entradas existentes de Getty migran a iFrame propio, que es lo que siempre fueron por debajo.

Compatibilidad

PrestaShop 1.7 a 9, PHP 7.1 o superior, en ocho idiomas: alemán, español, francés, inglés, italiano, neerlandés, polaco y turco. El back office del módulo se muestra traducido al español.

Sin overrides, sin modificar el tema. Cinco hooks estándar y una pequeña tabla de base de datos. ¿Sigue en PrestaShop 1.5 o 1.6? Use la versión 1.3.x del módulo: la 2.0 y posteriores son solo para 1.7+.

Preguntas frecuentes

¿Puede cada producto mostrar algo distinto?

Sí, ese es todo el planteamiento. Cada producto tiene su propio panel multimedia, dentro de la pestaña Módulos de ese producto, con su fuente, su enlace y su interruptor de encendido y apagado. Los productos que usted no toque no mostrarán nada.

¿Dónde aparece exactamente el contenido?

Donde usted elija para toda la tienda: debajo de las imágenes del producto, encima de las pestañas del producto o en su propia pestaña Media. Si tiene dudas, elija la pestaña Media: usa un hook nativo de PrestaShop y por eso funciona con cualquier tema, incluso con los muy personalizados.

Uso Hummingbird en PrestaShop 9 y el bloque no se mueve.

Actualice a la 2.0.1. Antes de esa versión, el código de posicionamiento solo conocía los selectores de Classic, así que en Hummingbird las dos posiciones que no son la pestaña no hacían nada. La 2.0.1 añadió los selectores de Hummingbird y las tres posiciones ya funcionan.

¿Qué tengo que pegar para Google Maps?

El código <iframe> de inserción completo del cuadro de diálogo Compartir → Insertar un mapa de Google Maps, no el enlace simple para compartir. Una URL a secas no se puede insertar.

Mi iframe pegado se previsualiza como una caja en blanco.

Algunos sitios se niegan a mostrarse dentro del iframe de otra página mediante sus propias cabeceras X-Frame-Options o CSP. Eso lo decide el sitio que usted está insertando, no este módulo. Pruebe con HTML propio, o con un enlace directo cuando exista.

¿Necesita jQuery o Bootstrap?

Ya no incluye ninguno de los dos. La versión 1.x distribuía sus propias copias de Bootstrap, jQuery y URI.js; PrestaShop 1.7+ ya ofrece lo que el back office necesita, así que se eliminaron.

¿Sobrevivirá a una actualización del tema?

Sí. El módulo funciona íntegramente mediante hooks estándar de PrestaShop y nunca copia, renombra ni sobrescribe un archivo del tema. La versión 1.x sí copiaba su product.tpl, y ese es exactamente el comportamiento que eliminó la versión 2.

Mi publicación de Instagram no se muestra.

Compruebe que la publicación sea pública. El renderizado lo hace el propio código de inserción de Instagram, así que un visitante con una extensión que bloquee recursos de terceros no la verá.

¿Qué ocurre con mi contenido actual al actualizar desde la 1.3.x?

Migra automáticamente, sin que usted tenga que hacer nada. El único cambio es Getty Images, que pasa a iFrame propio porque Getty retiró el widget de inserción gratuito del que dependía.