`test-new-grid.html`

65 lines
<!DOCTYPE html>
<html>
<head>
    <title>Test New Grid Layout</title>
</head>
<body>
    <h1>Testing New Grid Layout</h1>
    <p>Open browser console to see product loading...</p>

    <script>
        const SUPABASE_URL = 'https://fypvpcxyfmmdhtklgbrt.supabase.co';
        const SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZ5cHZwY3h5Zm1tZGh0a2xnYnJ0Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTg4MTAxMjMsImV4cCI6MjA3NDM4NjEyM30.fzDf6VE7jyrqLIbebAwI1NHXi50pI0b_FgQVO-6QcAk';

        async function test() {
            console.log('🔍 Testing product loading...\n');

            const response = await fetch(
                `${SUPABASE_URL}/rest/v1/grasscloth_products?sku=ilike.GRS-%25&image_url=ilike.%25fypvpcxyfmmdhtklgbrt.supabase.co%25&order=sku.asc&limit=10`,
                {
                    headers: {
                        'apikey': SUPABASE_KEY,
                        'Authorization': `Bearer ${SUPABASE_KEY}`
                    }
                }
            );

            if (!response.ok) {
                console.log(`❌ Request failed: ${response.status} ${response.statusText}`);
                document.body.innerHTML += '<p style="color: red;">❌ Request failed</p>';
                return;
            }

            const products = await response.json();

            if (!Array.isArray(products) || products.length === 0) {
                console.log('❌ No products returned');
                document.body.innerHTML += '<p style="color: red;">❌ No products returned</p>';
                return;
            }

            console.log(`✅ Loaded ${products.length} products\n`);
            console.log('Sample products:');

            products.slice(0, 5).forEach(p => {
                console.log(`  ${p.sku}: ${p.name}`);
                console.log(`    Image: ${p.image_url}`);
            });

            // Test image loading
            const testImg = new Image();
            testImg.onload = () => {
                console.log('\n✅ Image test successful!');
                document.body.innerHTML += '<p style="color: green;">✅ Products and images are loading correctly!</p>';
            };
            testImg.onerror = () => {
                console.log('\n❌ Image test failed');
                document.body.innerHTML += '<p style="color: red;">❌ Image loading issue</p>';
            };
            testImg.src = products[0].image_url;
        }

        test();
    </script>
</body>
</html>