/** * Google Sheets to HTML Loader * @param {string} sheetUrl - URL pública de la hoja CSV * @param {Object} config - Configuración de mapeo */ async function loadGoogleSheetToHTML(sheetUrl, config) { try { // 1. Obtener datos de la hoja const response = await fetch(sheetUrl); const csvData = await response.text(); // 2. Convertir CSV a JSON const jsonData = csvToJson(csvData); // 3. Procesar cada elemento de configuración config.mappings.forEach(mapping => { const element = document.querySelector(mapping.selector); if (!element) { console.warn(`Elemento no encontrado: ${mapping.selector}`); return; } // Encontrar el valor correcto en los datos const row = mapping.row || 0; const value = jsonData[row][mapping.column]; // Actualizar el elemento según su tipo updateElement(element, value, mapping); }); } catch (error) { console.error('Error al cargar datos:', error); } } // Función para convertir CSV a JSON function csvToJson(csv) { const lines = csv.split('\n'); const headers = lines[0].split(','); return lines.slice(1).map(line => { const values = line.split(','); return headers.reduce((obj, header, i) => { obj[header.trim()] = values[i] ? values[i].trim() : ''; return obj; }, {}); }); } // Función para actualizar elementos del DOM function updateElement(element, value, mapping) { if (!value) return; switch(mapping.type) { case 'image': element.src = value; if (mapping.alt) element.alt = mapping.alt; break; case 'link': element.href = value; if (mapping.text) element.textContent = mapping.text; break; case 'html': element.innerHTML = value; break; default: // texto simple element.textContent = value; } } // Ejemplo de configuración (modificar según necesidades) const sheetConfig = { sheetUrl: 'https://docs.google.com/spreadsheets/d/e/TU_ID/pub?output=csv', mappings: [ { selector: '#titulo-principal', column: 'A', // O nombre de columna si usas encabezados row: 0, type: 'html' }, { selector: '.imagen-destacada', column: 'B', row: 1, type: 'image', alt: 'Imagen destacada' }, { selector: '.enlace-cta', column: 'C', row: 2, type: 'link', text: 'Haz clic aquí' } ] }; // Inicializar cuando el DOM esté listo document.addEventListener('DOMContentLoaded', () => { loadGoogleSheetToHTML(sheetConfig.sheetUrl, sheetConfig); });

Añade aquí tu texto de cabecera

Scroll to Top