Modern Store Interface - Copy this Html, Tailwind Component to your project
Fetch Google Sheets : const apiKey = 'AIzaSyBMoIDX2lOzmzKLH mxvj4sW3Z1kt2SqIM'; const spreadsheetId = '1tW vqejQ234NMwV4 PxkX0wBgnEfU7Fo5NoW4H7MTfc'; const range = 'ADM!A1:K'; let categories = {}; // Estructura principal para almacenar categorías y productos // Obtener elementos por ID const getEl = (id) => document.getElementById(id); // Función principal para obtener datos desde Google Sheets async function fetchData() { try { const url = `https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values/${range}?key=${apiKey}`; const response = await fetch(url); if (!response.ok) { throw new Error(`Error en la solicitud: ${response.status}`); } const { values } = await response.json(); if (values) { processSheetData(values); showCategories(); } else { displayErrorMessage('No se recibieron datos válidos.'); } } catch (error) { console.error('Error al obtener datos:', error); displayErrorMessage('Hubo un error al obtener los datos. Por favor, intenta nuevamente.'); } } // Procesar datos de Google Sheets function processSheetData(data) { data.slice(1).forEach(row => { const [category, nameCategory, imageCategory, subcategory, idSubcategory, imageSubcategory, idProduct, nameProduct, imageProduct, descriptionProduct, detailsProduct] = row; categories[category] ||= { name: nameCategory, image: imageCategory, subcategories: [] }; let subcat = categories[category].subcategories.find(sc => sc.id === idSubcategory) || categories[category].subcategories[categories[category].subcategories.push({ name: subcategory, id: idSubcategory, image: imageSubcategory, products: [] }) 1]; subcat.products.push({ id: idProduct, name: nameProduct, image: imageProduct, description: descriptionProduct, details: detailsProduct }); }); } // Mostrar categorías con contador de productos function showCategories() { const asideContainer = getEl('aside container'); if (!asideContainer) return console.error('Contenedor no encontrado'); asideContainer.innerHTML = ''; Object.keys(categories).forEach(categoryId => { const category = categories[categoryId]; const totalProducts = category.subcategories.reduce((sum, subcat) => sum + subcat.products.length, 0); asideContainer.innerHTML += ` <div class="category card"> <img src="${category.image}" alt="${category.name}" onclick="showSubcategories('${categoryId}')"> <div class="category name"> <span>${category.name}</span><br> <span class="product count">(${totalProducts})</span> </div> </div> `; }); } ##crea una tienda que muestre lo siguiente: Descripción de las columnas: categories: Indica la categoría principal a la que pertenece el producto (por ejemplo, "Acrobático" o "Iluminación"). name category: Es el nombre específico de la categoría principal. image category: Contiene un enlace a una imagen representativa de la categoría. subcategories: Define subcategorías dentro de la categoría principal (por ejemplo, "Redes Trampolín" o "Franjas, Pisos y Tapetes"). id subcategories: Un identificador único para cada subcategoría. image subcategory: Enlace a una imagen representativa de la subcategoría. id products: Identificador único para cada producto listado. name products: Nombre completo del producto. image products: Enlace a una imagen específica del producto. description products: Descripción corta del producto que incluye detalles principales, como materiales o características básicas. details products: Descripción detallada que proporciona información técnica o adicional sobre el producto, incluyendo especificaciones, medidas, uso recomendado, etc.
