Si alguna vez has construido una página de invitaciones de boda, sabes que los novios siempre quieren algo más que una fecha y un formulario de confirmación. Quieren que sus invitados se sientan parte del evento desde antes de que empiece. Esta sección de lista de canciones colaborativa es exactamente eso: una forma simple, bonita y funcional de que cada invitado aporte su canción favorita y vote por las que más le gustan.
En este tutorial construimos la sección completa en Divi, usando Google Sheets como base de datos y Google Apps Script como backend — sin plugins, sin servicios externos de pago y con todo el control en tus manos.
¿Qué vamos a construir?
El resultado es una sección interactiva dentro de la página de invitaciones que permite a los invitados:
- Sugerir una canción con nombre y artista
- Ver la lista completa de canciones sugeridas por todos
- Votar por las que más les gustan con un corazón
- Ver el ranking en tiempo real ordenado por votos
Todo se guarda automáticamente en un Google Sheet que los novios pueden revisar cuando quieran y exportar como lista final para el DJ.
¿Cómo funciona la integración?
La arquitectura es la misma que hemos usado en otros tutoriales de esta serie: Google Apps Script actúa como API entre el frontend en Divi y Google Sheets como base de datos.
Cuando un invitado agrega una canción o vota, el JavaScript del frontend hace una llamada a la URL del Apps Script con los parámetros correspondientes. El script procesa la acción, actualiza el Sheet y devuelve una respuesta en JSON que el frontend usa para actualizar la lista en pantalla.
El Apps Script maneja tres acciones:
- list — devuelve todas las canciones ordenadas por votos
- add — agrega una nueva canción con validación de duplicados
- vote — suma un voto a una canción por su ID
Los votos se guardan también en el localStorage del navegador, para que el mismo dispositivo no pueda votar dos veces por la misma canción.
Estructura en el Google Sheet
El sistema usa una sola hoja llamada Canciones con cinco columnas que el script crea automáticamente la primera vez que se ejecuta:
- ID — identificador único generado con timestamp
- Canción — nombre de la canción
- Artista — nombre del artista o banda
- Votos — contador numérico que se actualiza con cada voto
- Fecha — fecha y hora en que se agregó la canción
El Sheet guarda las canciones en orden cronológico (como se fueron agregando). El orden por votos lo maneja el frontend al renderizar la lista. Si la novia quiere ver el ranking directamente en el Sheet, puede ordenar la columna D de mayor a menor con Datos > Ordenar rango sin afectar el funcionamiento del sistema.
¿Cómo lo implementamos en Divi?
La sección se divide en módulos nativos de Divi más dos módulos de Código. Los títulos, textos descriptivos y cualquier elemento decorativo los manejas desde el builder con total libertad de diseño. El CSS y el JavaScript van en lugares globales de la página para que funcionen correctamente con la estructura separada en módulos.
La implementación completa usa:
- Módulos de Texto o Encabezado para los títulos descriptivos
- Un módulo Código para el formulario de agregar canción
- Un módulo Código para la lista con los resultados
- El CSS en las opciones de tema o CSS personalizado de la página
- El JavaScript en un módulo código al final de la página
Detalles de la experiencia de usuario
Algunos comportamientos que hacen que la sección se sienta cuidada:
Cuando alguien agrega una canción, automáticamente entra al ranking con 1 voto (el propio del que la sugirió) y queda marcada como votada en su dispositivo. Si intenta agregar una canción que ya existe en la lista, el sistema la detecta sin importar mayúsculas o minúsculas y muestra un mensaje amigable. Los votos usan actualización optimista: la interfaz responde de inmediato sin esperar la confirmación del servidor, y solo revierte si falla la llamada al Apps Script.
La canción con más votos recibe una badge de «favorita» y un estilo visual diferenciado para que destaque en el ranking.
Accede al tutorial completo
Este es un tutorial exclusivo disponible para los miembros de los Tutoriales Exclusivos de la Academia OV DIVI. En él encuentras el paso a paso completo: desde la configuración del Google Sheet y la publicación del Apps Script hasta la implementación en Divi, con todos los fragmentos de código listos para copiar y pegar.
👉 Ver tutorial en la Academia OV DIVI
¿Tienes alguna pregunta sobre cómo implementarlo o quieres adaptarlo a otro tipo de proyecto? Déjame tu comentario abajo.
0 comentarios