header-logo
Primeros pasosAprende cómo puedes usar Wix para construir tu sitio web y potenciar tu negocio. Personaliza tu sitio o contrata a un profesional para crear o mejorar tu presencia online.
Crear tu sitioAprende a utilizar el Editor de Wix y a gestionar el contenido de tu sitio. Descubre cómo proteger la privacidad de tus visitantes y hacer que tu sitio sea accesible.
Cuenta y facturaciónRevisa la configuración de tu cuenta, gestiona tus suscripciones y planes Premium y comprende tus facturas.
Usar las apps móviles de WixUtiliza la aplicación Wix para gestionar tu negocio de manera eficiente, interactuar con tus visitantes y construir una comunidad.
Conectar un dominioComprende cómo comprar, conectar o transferir un dominio y cómo mantener seguros los datos de tu sitio.
Administrar tu negocioEncuentra las herramientas adecuadas para construir y hacer crecer tu negocio: acepta pagos, revisa las analíticas, contacta con los visitantes y mucho más.
Promocionar tu sitioAprende cómo promocionar tu sitio en los motores de búsqueda, enviar campañas de email y ejecutar anuncios pagados.
Wix Studio, Partners y EnterpriseAprovecha al máximo tu cuenta de Wix Studio, de Partner o de Enterprise para poder escalar tu negocio.
Obtener ayudaObtén más información sobre cómo resolver problemas de rendimiento y cuestiones técnicas en tu sitio. Mantente al tanto de las próximas funciones a través de nuestra hoja de ruta.
placeholder-preview-image
Wix LearnMejora tus habilidades con nuestros cursos y tutoriales.
Blog de WixObtén consejos para diseño web, marketing y mucho más.
Guía de SEOMejora el tráfico orgánico en buscadores.
Website developmentCrea un sitio con nuestra plataforma full-stack.
Contrata a un profesionalVincúlate con un especialista que te ayude a alcanzar tus objetivos
placeholder-preview-image
  1. Inicio
  2. Crear tu sitio
  3. Funciones avanzadas
  4. CMS
  5. Conectar el contenido de las colecciones del CMS a tu sitio
  6. Solicitud de CMS: ventanas interactivas dinámicas

Solicitud de CMS: ventanas interactivas dinámicas

Función solicitada|Estamos recolectando votos sobre este tema
En la actualidad, no es posible hacer dinámicas las ventanas interactivas conectándolas a las colecciones del CMS. Sin embargo, puedes conectar los elementos adjuntos de una ventana interactiva al contenido de la colección del CMS para que los elementos sean dinámicos (por ejemplo, texto, imágenes, botones).  
Siempre estamos trabajando para actualizar y mejorar nuestros productos, por lo que apreciamos mucho tus comentarios. 

Solución alternativa

Con Velo, puedes crear una ventana interactiva que se abra desde una página dinámica de ítem y muestre el mismo elemento que se muestra en la página desde la que se abrió la ventana interactiva.

Por ejemplo, si tienes páginas dinámicas de ítem que muestran los servicios que ofreces, puedes enlazar un botón de la página a una ventana interactiva. En la ventana interactiva, puedes conectar elementos como texto, imágenes y botones a un conjunto de datos que se conecta a la misma colección. Como resultado, cuando los visitantes hacen clic en el botón en tu página dinámica de ítem, se abre una ventana interactiva con más información sobre el mismo ítem que se muestra en la página. 
Antes de comenzar:
Asegúrate de que tu sitio tenga lo siguiente: 
  1. Ve al editor.
  2. Ve a la página dinámica de ítem correspondiente. 
  3. Habilita el modo desarrollador de Velo: 
    1. Haz clic en Modo desarrollador en la parte superior del editor. 
    2. Haz clic en  Activar. 
  4. Copia el fragmento de código a continuación y pégalo en la parte superior del código de tu página:
1import wixWindowFrontend from 'wix-window-frontend';
Captura de pantalla de cómo agregar un fragmento de código en la parte superior del código de una página dinámica de ítem.
  1. Copia el fragmento de código a continuación y pégalo después de: $w.onReady(function () {
1$w('#openLightbox').onClick(async () => { const item = await $w('#dynamicDataset').getCurrentItem(); const id = item._id; wixWindowFrontend.openLightbox("Dynamic Lightbox", id); })
Captura de pantalla de cómo pegar el segundo fragmento de código en el código de la página dinámica de ítem.
  1. En el código de muestra que pegaste, reemplaza los ID que se enumeran a continuación con los que usa tu sitio:
    • openLightbox: reemplaza con el ID del botón que abre la ventana interactiva. 
    • dynamic Dataset: reemplaza por el ID del conjunto de datos de la página dinámica de ítem. 
    • Dynamic Lightbox: reemplaza por el nombre de la ventana interactiva. 
Captura de pantalla que muestra los ID y el nombre de la ventana interactiva que deben reemplazarse en el código.
  1. En el editor, ve a la ventana interactiva. 
  2. Agrega un conjunto de datos y conéctalo a la misma colección que tu página dinámica de ítem:
    1. Haz clic en CMS  a la izquierda del editor.
    2. Haz clic en Agregar elementos. 
    3. Haz clic en Conjunto de datos.
    4. Haz clic en el menú desplegable Elige una colección y selecciona la misma colección que se conecta a tu página dinámica de ítem. 
    5. Haz clic en Crear. 
  3. Haz clic en el campo Items por carga en los ajustes del conjunto de datos y escribe el número 1.
  4. Conecta los elementos de la ventana interactiva (por ejemplo, texto, imágenes, botones) al conjunto de datos:
    1. Haz clic en el elemento correspondiente de la ventana interactiva. 
    2. Haz clic en el icono Conectar a CMS .
    3. Haz clic en los menús desplegables debajo de Conexiones y selecciona los campos de la colección o las acciones del conjunto de datos correspondientes. 
    4. Repite estos pasos para cada elemento de la ventana interactiva que desees conectar. 
  5. Copia el fragmento de código a continuación y pégalo en la parte superior del código de la ventana interactiva: 
1import wixWindowFrontend from 'wix-window-frontend'; import wixData from 'wix-data';
Captura de pantalla de cómo pegar el fragmento de código en la parte superior del código de la ventana interactiva.
  1. Copia el fragmento de código a continuación y pégalo después de: $w.onReady(function () {
1const getData = async () => { const id = await wixWindowFrontend.lightbox.getContext(); $w('#dataset1').setFilter(wixData.filter().eq('_id', id)); } getData();
Captura de pantalla de cómo agregar el fragmento de código anterior al código de la ventana interactiva.
  1. En el código de muestra que pegaste, reemplaza dataset1 con el ID del conjunto de datos de tu ventana interactiva. 
  2. Haz una vista previa del sitio para probar la funcionalidad. 
  3. Cuando lo tengas todo listo, publica el sitio. 
Nota: Toda la información, incluidas las funciones planificadas y la estimación del tiempo, son netamente informativas y están sujetas a cambio o cancelaciones en cualquier momento, a discreción de Wix.