Init product loading.

woocommerce · Nov 8, 2024 · a4e937a · a4e937a
1 parent 9f51ef7
commit a4e937a
Showing 1 changed file with 58 additions and 1 deletion.
diff --git a/docs/index.html b/docs/index.html
@@ -2,6 +2,7 @@
 <head>
     <title>Demo ServerlessWoo store</title>
     <script src="js/tailwind.min.js"></script>
+    <script src="js/serverless-api.js"></script>
 </head>
 
 <body>
@@ -13,7 +14,7 @@
                     🚧 This site is currently under development 🚧
                 </p>
                 <p class="text-center text-purple-900">
-                    This is a demo store for ServerlessWoo. Both this demo, as well as the ServerlessWoo core are under active development, and are far from production ready. You can follow the development by watching the GH repo <a href="https://github.com/woocommerce/serverless" class="text-purple-700 hover:text-purple-900">ServerlessWoo Github Repo</a>.
+                    This is a demo store for ServerlessWoo. Both this demo, as well as the ServerlessWoo core are under active development, and are far from production ready. You can follow the development by watching/starring <a href="https://github.com/woocommerce/serverless" class="text-purple-700 hover:text-purple-900">ServerlessWoo Github Repo</a>.
                 </p>
             </div>
         </div>
@@ -34,6 +35,62 @@ <h1 class="text-white font-bold">ServerlessWoo Store</h1>
             </div>
         </div>
     </nav>
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div id="products-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            <!-- Products will be loaded here -->
+        </div>
+    </main>
 </header>
 </body>
 </html>
+
+<script>
+    // Function to create a product card
+    function createProductCard(product) {
+        return `
+            <div class="bg-white rounded-lg shadow-md p-6">
+                <h2 class="text-xl font-semibold text-gray-900 mb-2">${product.name}</h2>
+                ${product.images && product.images[0] ?
+                    `<img src="${product.images[0].src}" alt="${product.name}" class="w-full h-48 object-cover mb-4">` :
+                    '<div class="w-full h-48 bg-gray-200 mb-4"></div>'
+                }
+                <p class="text-gray-600 mb-4">${product.short_description || ''}</p>
+                <div class="flex justify-between items-center">
+                    <span class="text-lg font-bold text-purple-900">$${parseFloat(product.price).toFixed(2)}</span>
+                    <button
+                        onclick="addToCart(${product.id})"
+                        class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700">
+                        Add to Cart
+                    </button>
+                </div>
+            </div>
+        `;
+    }
+
+    // Function to add item to cart
+    async function addToCart(productId) {
+        try {
+            await window.wooAPI.addToCart(productId);
+            alert('Product added to cart!');
+        } catch (error) {
+            console.error('Error adding to cart:', error);
+            alert('Failed to add product to cart');
+        }
+    }
+
+    // Load products when page loads
+    async function loadProducts() {
+        try {
+            const products = await window.wooAPI.getProducts();
+            const productsGrid = document.getElementById('products-grid');
+            productsGrid.innerHTML = products.map(product => createProductCard(product)).join('');
+        } catch (error) {
+            console.error('Error loading products:', error);
+            document.getElementById('products-grid').innerHTML =
+                '<p class="col-span-full text-center text-red-600">Failed to load products</p>';
+        }
+    }
+
+    // Initialize products on page load
+    document.addEventListener('DOMContentLoaded', loadProducts);
+</script>