@o2vend/theme-cli 1.0.32 → 1.0.34

package/lib/lib/dev-server.js

@@ -106,23 +106,31 @@ class DevServer {
     
     // Process CSS files through Liquid to support theme variables
     // This handles CSS files that contain Liquid syntax like {{ settings.color_primary }}
-    this.app.get('/assets/:filename.css', async (req, res, next) => {
+    // Supports both root assets and subdirectories: /assets/file.css and /assets/css/file.css
+    this.app.get('/assets/*.css', async (req, res, next) => {
       try {
-        // Get filename from params
-        const filename = req.params.filename + '.css';
-        const cssPath = path.join(this.themePath, 'assets', filename);
+        // Extract the relative path from /assets/ (remove leading /assets/)
+        const relativePath = req.path.replace(/^\/assets\//, '');
+        const cssPath = path.join(this.themePath, 'assets', relativePath);
+        
+        // Normalize path to prevent directory traversal
+        const normalizedPath = path.normalize(cssPath);
+        const assetsDir = path.normalize(path.join(this.themePath, 'assets'));
+        if (!normalizedPath.startsWith(assetsDir)) {
+          return res.status(403).send('Invalid path');
+        }
         
-        if (!fs.existsSync(cssPath)) {
+        if (!fs.existsSync(normalizedPath)) {
           return next();
         }
         
-        const cssContent = fs.readFileSync(cssPath, 'utf8');
+        const cssContent = fs.readFileSync(normalizedPath, 'utf8');
         
         // Check if CSS contains Liquid variable syntax ({{ }})
         // Only process if it contains actual Liquid variables, not just comments
         if (cssContent.includes('{{') && cssContent.includes('settings.')) {
           try {
-            // Load settings from theme config
+            // Load settings from theme config (already extracts 'current' section)
             const settings = this.loadThemeSettings();
             
             // Process through Liquid
@@ -132,14 +140,14 @@ class DevServer {
             res.setHeader('Cache-Control', 'no-cache');
             return res.send(processedCss);
           } catch (liquidError) {
-            console.error(`[CSS] Liquid processing error for ${filename}:`, liquidError.message);
+            console.error(`[CSS] Liquid processing error for ${relativePath}:`, liquidError.message);
             // Fall through to serve static file
           }
         }
         
         // Serve static file if no Liquid processing needed or if processing failed
         res.setHeader('Content-Type', 'text/css; charset=utf-8');
-        res.sendFile(cssPath);
+        res.sendFile(normalizedPath);
       } catch (error) {
         console.error(`[CSS] Error processing ${req.path}:`, error.message);
         next();
@@ -444,6 +452,7 @@ class DevServer {
         
         const html = await renderWithLayout(this.liquid, 'templates/index', context, this.themePath);
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -453,7 +462,73 @@ class DevServer {
     // Products listing page
     this.app.get('/products', async (req, res, next) => {
       try {
-        const context = await this.buildContext(req, 'products');
+        // Check for category filter in query parameters (handle both 'category' and 'Category')
+        const categoryFilter = req.query.category || req.query.Category;
+        
+        let context = await this.buildContext(req, 'products');
+        
+        // If category filter is present, filter products by category
+        if (categoryFilter) {
+          console.log(`[PRODUCTS PAGE] Filtering by category: ${categoryFilter}`);
+          
+          // Find category by name or handle (case-insensitive)
+          const category = context.categories?.find(c => 
+            (c.name && c.name.toLowerCase() === categoryFilter.toLowerCase()) ||
+            (c.handle && c.handle.toLowerCase() === categoryFilter.toLowerCase())
+          );
+          
+          if (category) {
+            console.log(`[PRODUCTS PAGE] Found category: ${category.name} (ID: ${category.id})`);
+            
+            // Filter products by categoryId and enrich them
+            const filteredProducts = context.products
+              .filter(p => 
+                p.categoryId === category.id || 
+                String(p.categoryId).toLowerCase() === String(category.id).toLowerCase()
+              )
+              .map(p => this.enrichProductData(p)); // Enrich each product
+            
+            // CRITICAL: Set both context.products and context.collection.products to the SAME enriched array
+            // This ensures they always reference the same objects (like widgets do)
+            context.products = filteredProducts;
+            context.collection = context.collection || {};
+            context.collection.products = context.products; // Same reference as context.products
+            context.collection.title = category.name || 'Products';
+            context.collection.handle = category.handle || categoryFilter;
+            context.collection.description = category.description;
+            context.collection.totalProducts = filteredProducts.length;
+            
+            console.log(`[PRODUCTS PAGE] Filtered products: ${filteredProducts.length} products in category`);
+            console.log(`[PRODUCTS PAGE] ✅ collection.products === context.products: ${context.collection.products === context.products}`);
+            
+            console.log(`[PRODUCTS PAGE] ✅ Category filtered: ${filteredProducts.length} enriched products in collection`);
+          } else {
+            console.warn(`[PRODUCTS PAGE] Category not found: ${categoryFilter}, showing all products`);
+          }
+        }
+        
+        // Ensure all products have proper data: URL, name/title, price, images
+        // Only enrich if not already enriched (check if first product has url field)
+        if (context.products && context.products.length > 0 && !context.products[0].url && !context.products[0].link) {
+          console.log(`[PRODUCTS PAGE] Products need enrichment - enriching now...`);
+          context.products = this.enrichProductsData(context.products);
+        } else if (context.products && context.products.length > 0) {
+          // Products already enriched
+          console.log(`[PRODUCTS PAGE] Products already enriched, first product has URL: ${context.products[0].url || context.products[0].link}`);
+        }
+        
+        // Debug: Log sample product data to verify enrichment
+        if (context.products.length > 0) {
+          const sample = context.products[0];
+          console.log(`[PRODUCTS PAGE] Sample product data:`, {
+            title: sample.title || sample.name,
+            url: sample.url || sample.link,
+            price: sample.price || sample.sellingPrice,
+            stock: sample.stock,
+            inStock: sample.inStock,
+            hasImage: !!(sample.imageUrl || sample.thumbnailImage1)
+          });
+        }
         
         // DEBUG: Log context data for /products page
         console.log(`[PRODUCTS PAGE] Context summary:`);
@@ -468,9 +543,34 @@ class DevServer {
         if (!context.products || context.products.length === 0) {
           console.warn('[PRODUCTS PAGE] ⚠️  No products in context, attempting to reload...');
           try {
-            const productsResponse = await this.apiClient.getProducts({ limit: 50, offset: 0 });
+            const queryParams = {};
+            if (categoryFilter) {
+              // Find category and filter by categoryId
+              const category = context.categories?.find(c => 
+                (c.name && c.name.toLowerCase() === categoryFilter.toLowerCase()) ||
+                (c.handle && c.handle.toLowerCase() === categoryFilter.toLowerCase())
+              );
+              if (category) {
+                queryParams.categoryId = category.id;
+              }
+            }
+            const productsResponse = await this.apiClient.getProducts({ limit: 50, offset: 0, ...queryParams });
             context.products = productsResponse.products || productsResponse.data?.products || [];
+            
+            // Ensure URLs and all product data are set
+            context.products = this.enrichProductsData(context.products);
+            
             console.log(`[PRODUCTS PAGE] ✅ Reloaded ${context.products.length} products`);
+            if (context.products.length > 0) {
+              const sample = context.products[0];
+              console.log(`[PRODUCTS PAGE] Sample reloaded product:`, {
+                title: sample.title || sample.name,
+                url: sample.url || sample.link,
+                price: sample.price || sample.sellingPrice,
+                stock: sample.stock,
+                inStock: sample.inStock
+              });
+            }
           } catch (error) {
             console.error('[PRODUCTS PAGE] ❌ Failed to load products:', error.message);
           }
@@ -479,10 +579,14 @@ class DevServer {
           if (context.products.length > 0) {
             const sampleProduct = context.products[0];
             const hasStock = 'stock' in sampleProduct || 'quantity' in sampleProduct;
+            const hasImage = sampleProduct.thumbnailImage1 || sampleProduct.imageUrl || (sampleProduct.images && sampleProduct.images.length > 0);
+            const hasUrl = sampleProduct.url || sampleProduct.link;
             // Use nullish coalescing to show 0 values correctly
             const stockValue = sampleProduct.stock ?? sampleProduct.quantity ?? 'N/A';
-            console.log(`[PRODUCTS PAGE DEBUG] Sample product - Title: ${sampleProduct.title || sampleProduct.name}, Has stock: ${hasStock}, Stock: ${stockValue}`);
-            console.log(`[PRODUCTS PAGE DEBUG] Product stock details: stock=${sampleProduct.stock}, quantity=${sampleProduct.quantity}, inStock=${sampleProduct.inStock}`);
+            console.log(`[PRODUCTS PAGE DEBUG] Sample product - Title: ${sampleProduct.title || sampleProduct.name}`);
+            console.log(`[PRODUCTS PAGE DEBUG]   - Has stock: ${hasStock}, Stock: ${stockValue}`);
+            console.log(`[PRODUCTS PAGE DEBUG]   - Has image: ${hasImage}, Has URL: ${hasUrl}`);
+            console.log(`[PRODUCTS PAGE DEBUG]   - URL: ${sampleProduct.url || sampleProduct.link || 'missing'}`);
             
             // Check a few more products to see stock distribution
             const stockCounts = context.products.slice(0, 5).map(p => p.stock ?? 0);
@@ -524,16 +628,78 @@ class DevServer {
         }
         
         // Ensure collection.products is set for products template
+        // CRITICAL: Always sync collection.products with context.products AFTER enrichment
+        // This ensures collection.products always has the same enriched objects as context.products
         if (context.products && context.products.length > 0) {
+          // Always reassign collection.products to match context.products (they should be the same)
           context.collection = context.collection || {};
-          context.collection.products = context.products;
-          context.collection.title = 'All Products';
-          context.collection.handle = 'all';
-          context.collection.totalProducts = context.products.length;
+          context.collection.products = context.products; // Use the same enriched array
+          
+          // Update collection metadata if not set
+          if (!context.collection.title) {
+            context.collection.title = categoryFilter ? `${categoryFilter} Products` : 'All Products';
+          }
+          if (!context.collection.handle) {
+            context.collection.handle = categoryFilter || 'all';
+          }
+          if (!context.collection.totalProducts) {
+            context.collection.totalProducts = context.products.length;
+          }
+          
+          // Debug: Verify collection.products has same reference as context.products
+          const sameReference = context.collection.products === context.products;
+          console.log(`[PRODUCTS PAGE] collection.products sync: same reference=${sameReference}, length=${context.collection.products?.length || 0}`);
+          
+          // Debug: Log sample product from collection to verify enrichment
+          if (context.collection.products && context.collection.products.length > 0) {
+            const sample = context.collection.products[0];
+            console.log(`[PRODUCTS PAGE] ✅ Sample collection product before render:`, {
+              id: sample.id,
+              title: sample.title || sample.name,
+              url: sample.url || sample.link || 'MISSING',
+              price: sample.price || sample.sellingPrice || 'MISSING',
+              prices: sample.prices ? { price: sample.prices.price, mrp: sample.prices.mrp } : 'MISSING',
+              stock: sample.stock !== undefined ? sample.stock : 'MISSING',
+              stockQuantity: sample.stockQuantity !== undefined ? sample.stockQuantity : 'MISSING',
+              inStock: sample.inStock !== undefined ? sample.inStock : 'MISSING',
+              available: sample.available !== undefined ? sample.available : 'MISSING',
+              hasImage: !!(sample.imageUrl || sample.thumbnailImage1),
+              imageUrl: sample.imageUrl || sample.thumbnailImage1?.url || 'MISSING',
+              hasThumbnailImage1: !!sample.thumbnailImage1,
+              hasImagesArray: !!(sample.images && sample.images.length > 0)
+            });
+          } else {
+            console.warn(`[PRODUCTS PAGE] ⚠️  collection.products is empty or undefined!`);
+            console.warn(`[PRODUCTS PAGE] context.products.length: ${context.products?.length || 0}`);
+            console.warn(`[PRODUCTS PAGE] context.collection:`, context.collection ? Object.keys(context.collection) : 'undefined');
+          }
+        } else {
+          console.warn(`[PRODUCTS PAGE] ⚠️  No products in context!`);
+        }
+        
+        // Debug: Log final context before rendering
+        console.log(`[PRODUCTS PAGE] Final context before rendering:`);
+        console.log(`  - Products count: ${context.products?.length || 0}`);
+        if (context.products && context.products.length > 0) {
+          const firstProduct = context.products[0];
+          console.log(`  - First product:`, {
+            id: firstProduct.id,
+            title: firstProduct.title || firstProduct.name,
+            url: firstProduct.url || firstProduct.link,
+            price: firstProduct.price || firstProduct.sellingPrice,
+            stock: firstProduct.stock,
+            inStock: firstProduct.inStock,
+            hasImage: !!(firstProduct.imageUrl || firstProduct.thumbnailImage1),
+            imageUrl: firstProduct.imageUrl || firstProduct.thumbnailImage1?.url
+          });
+        }
+        if (context.collection) {
+          console.log(`  - Collection: ${context.collection.title || context.collection.name}, Products: ${context.collection.products?.length || 0}`);
         }
         
         const html = await renderWithLayout(this.liquid, 'templates/products', context, this.themePath);
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         // If products template doesn't exist, try collections template as fallback
@@ -542,6 +708,7 @@ class DevServer {
             const context = await this.buildContext(req, 'collection');
             const html = await renderWithLayout(this.liquid, 'templates/collection', context, this.themePath);
             res.setHeader('Content-Type', 'text/html; charset=utf-8');
+            res.setHeader('Cache-Control', 'no-cache');
             res.send(html);
           } catch (fallbackError) {
             next(error);
@@ -555,7 +722,46 @@ class DevServer {
     // Product detail page
     this.app.get('/products/:handle', async (req, res, next) => {
       try {
-        const context = await this.buildContext(req, 'product', { productHandle: req.params.handle });
+        const handle = req.params.handle;
+        console.log(`[PRODUCT PAGE] Looking up product with handle: ${handle}`);
+        
+        const context = await this.buildContext(req, 'product', { productHandle: handle });
+        
+        // Check if product was found
+        if (!context.product) {
+          console.warn(`[PRODUCT PAGE] Product not found with handle: ${handle}`);
+          // Try to find product by ID if handle looks like an ID
+          if (handle.match(/^\d+$/) || handle.startsWith('product-')) {
+            const productId = handle.replace(/^product-/, '');
+            console.log(`[PRODUCT PAGE] Trying to find product by ID: ${productId}`);
+            const allProducts = context.products || [];
+            const productById = allProducts.find(p => 
+              String(p.id) === productId || 
+              String(p.id) === handle ||
+              (p.handle && p.handle.includes(productId))
+            );
+            if (productById) {
+              context.product = productById;
+              console.log(`[PRODUCT PAGE] Found product by ID: ${productById.title || productById.name}`);
+            }
+          }
+          
+          // If still not found, return 404
+          if (!context.product) {
+            return res.status(404).send(`
+              <!DOCTYPE html>
+              <html>
+              <head><title>Product Not Found</title></head>
+              <body>
+                <h1>Product Not Found</h1>
+                <p>Product with handle "${handle}" was not found.</p>
+                <p><a href="/products">Back to Products</a></p>
+              </body>
+              </html>
+            `);
+          }
+        }
+        
         // Try multiple template names: product-detail, product, product-page
         let html;
         const templateOptions = ['templates/product-detail', 'templates/product', 'templates/product-page'];
@@ -573,8 +779,10 @@ class DevServer {
           throw new Error(`Product template not found. Tried: ${templateOptions.join(', ')}`);
         }
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
+        console.error(`[PRODUCT PAGE] Error rendering product page:`, error);
         next(error);
       }
     });
@@ -600,6 +808,7 @@ class DevServer {
           throw new Error(`Product template not found. Tried: ${templateOptions.join(', ')}`);
         }
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -626,6 +835,7 @@ class DevServer {
           throw new Error(`Product template not found. Tried: ${templateOptions.join(', ')}`);
         }
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -652,6 +862,7 @@ class DevServer {
           }
         }
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -670,10 +881,30 @@ class DevServer {
         if (category) {
           context.category = category;
           context.collection = category;
+          
+          // Filter products by this category and enrich them
+          const filteredProducts = (context.products || [])
+            .filter(p => 
+              p.categoryId === category.id || 
+              String(p.categoryId).toLowerCase() === String(category.id).toLowerCase()
+            )
+            .map(p => this.enrichProductData(p));
+          
+          context.collection.products = filteredProducts;
+          context.collection.totalProducts = filteredProducts.length;
+          context.products = filteredProducts; // Also set in products array for consistency
+          
+          console.log(`[COLLECTION PAGE] Category: ${category.name}, Products: ${filteredProducts.length}`);
+        } else {
+          // No category found, use all products with enrichment
+          context.products = this.enrichProductsData(context.products || []);
+          context.collection = context.collection || {};
+          context.collection.products = context.products;
         }
         
+        // Prioritize products template to show product list, not categories list
         let html;
-        const templateOptions = ['templates/categories', 'templates/category', 'templates/collection'];
+        const templateOptions = ['templates/products', 'templates/collection', 'templates/category', 'templates/categories'];
         for (const template of templateOptions) {
           try {
             html = await renderWithLayout(this.liquid, template, context, this.themePath);
@@ -688,6 +919,7 @@ class DevServer {
           throw new Error(`Category/Collection template not found. Tried: ${templateOptions.join(', ')}`);
         }
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -714,6 +946,7 @@ class DevServer {
           throw new Error(`Categories template not found. Tried: ${templateOptions.join(', ')}`);
         }
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -730,10 +963,30 @@ class DevServer {
         if (category) {
           context.category = category;
           context.collection = category;
+          
+          // Filter products by this category and enrich them
+          const filteredProducts = (context.products || [])
+            .filter(p => 
+              p.categoryId === category.id || 
+              String(p.categoryId).toLowerCase() === String(category.id).toLowerCase()
+            )
+            .map(p => this.enrichProductData(p));
+          
+          context.collection.products = filteredProducts;
+          context.collection.totalProducts = filteredProducts.length;
+          context.products = filteredProducts; // Also set in products array for consistency
+          
+          console.log(`[CATEGORY PAGE] Category: ${category.name}, Products: ${filteredProducts.length}`);
+        } else {
+          // No category found, use all products with enrichment
+          context.products = this.enrichProductsData(context.products || []);
+          context.collection = context.collection || {};
+          context.collection.products = context.products;
         }
         
+        // Prioritize products template to show product list, not categories list
         let html;
-        const templateOptions = ['templates/categories', 'templates/category', 'templates/collection'];
+        const templateOptions = ['templates/products', 'templates/collection', 'templates/category', 'templates/categories'];
         for (const template of templateOptions) {
           try {
             html = await renderWithLayout(this.liquid, template, context, this.themePath);
@@ -748,6 +1001,7 @@ class DevServer {
           throw new Error(`Category template not found. Tried: ${templateOptions.join(', ')}`);
         }
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -775,6 +1029,7 @@ class DevServer {
           html = this.createSimpleBrandsPage(context);
         }
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -813,6 +1068,7 @@ class DevServer {
           html = this.createSimpleBrandPage(context, brand);
         }
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -825,6 +1081,7 @@ class DevServer {
         const context = await this.buildContext(req, 'cart');
         const html = await renderWithLayout(this.liquid, 'templates/cart', context, this.themePath);
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -837,6 +1094,7 @@ class DevServer {
         const context = await this.buildContext(req, 'search', { query: req.query.q });
         const html = await renderWithLayout(this.liquid, 'templates/search', context, this.themePath);
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -890,12 +1148,14 @@ class DevServer {
         try {
           const html = await renderWithLayout(this.liquid, 'templates/page', context, this.themePath);
           res.setHeader('Content-Type', 'text/html; charset=utf-8');
+          res.setHeader('Cache-Control', 'no-cache');
           res.send(html);
         } catch (templateError) {
           // If no page template, render raw HTML content within layout
           console.log(`[PAGE] No page template found, rendering raw HTML for ${req.params.handle}`);
           const html = this.renderLandingPage(context);
           res.setHeader('Content-Type', 'text/html; charset=utf-8');
+          res.setHeader('Cache-Control', 'no-cache');
           res.send(html);
         }
       } catch (error) {
@@ -934,6 +1194,7 @@ class DevServer {
         
         const html = await renderWithLayout(this.liquid, 'templates/page', context, this.themePath);
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -950,6 +1211,7 @@ class DevServer {
         
         const html = this.generateDevDashboard({ templates, sections, widgets, snippets });
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -974,6 +1236,7 @@ class DevServer {
           backUrl: '/dev'
         });
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -1033,6 +1296,7 @@ class DevServer {
           backUrl: '/dev'
         });
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -1081,6 +1345,7 @@ class DevServer {
           backUrl: '/dev'
         });
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
@@ -1118,12 +1383,235 @@ class DevServer {
         const context = await this.buildContext(req, pageType);
         const html = await renderWithLayout(this.liquid, `templates/${templateName}`, context, this.themePath);
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache');
         res.send(html);
       } catch (error) {
         next(error);
       }
     });
 
+    // Catch-all route for category/collection handles at root level (e.g., /toys-and-games)
+    // This handles links from widgets that use category handles directly
+    this.app.get('/:handle', async (req, res, next) => {
+      try {
+        const handle = req.params.handle;
+        
+        // Skip if it's a known route path or static file extension
+        const knownPaths = ['assets', 'images', 'api', 'dev', 'favicon.ico', 'products', 'collections', 'categories', 'brands', 'cart', 'search', 'page', 'pages'];
+        const staticExtensions = ['.css', '.js', '.jpg', '.jpeg', '.png', '.gif', '.svg', '.webp', '.woff', '.woff2', '.ttf', '.eot', '.ico'];
+        const hasStaticExtension = staticExtensions.some(ext => handle.toLowerCase().endsWith(ext));
+        
+        if (knownPaths.includes(handle) || hasStaticExtension) {
+          return next();
+        }
+        
+        // Build context to get categories, brands, and products
+        const context = await this.buildContext(req, 'collection', { collectionHandle: handle });
+        
+        // Try to find category by handle (case-insensitive)
+        const category = context.categories?.find(c => 
+          (c.handle && c.handle.toLowerCase() === handle.toLowerCase()) ||
+          (c.name && c.name.toLowerCase().replace(/\s+/g, '-') === handle.toLowerCase())
+        );
+        
+        if (category) {
+          // Found a category - render products list (NOT categories list)
+          context.category = category;
+          context.collection = category;
+          
+          console.log(`[ROOT COLLECTION] Found category: ${category.name} (ID: ${category.id})`);
+          console.log(`[ROOT COLLECTION] Total products in context: ${context.products?.length || 0}`);
+          
+          // Filter products by this category and enrich them
+          const filteredProducts = (context.products || [])
+            .filter(p => {
+              const matches = p.categoryId === category.id || 
+                             String(p.categoryId).toLowerCase() === String(category.id).toLowerCase();
+              if (matches) {
+                console.log(`[ROOT COLLECTION] Product matches: ${p.title || p.name || p.id}, categoryId: ${p.categoryId}`);
+              }
+              return matches;
+            })
+            .map(p => this.enrichProductData(p)); // Enrich each product
+          
+          console.log(`[ROOT COLLECTION] Filtered products count: ${filteredProducts.length}`);
+          
+          // Log sample enriched products
+          if (filteredProducts.length > 0) {
+            filteredProducts.slice(0, 3).forEach((product, index) => {
+              console.log(`[ROOT COLLECTION] Product ${index} AFTER enrichment:`, {
+                id: product.id,
+                title: product.title || product.name,
+                url: product.url || product.link,
+                price: product.price || product.sellingPrice,
+                stock: product.stock,
+                inStock: product.inStock,
+                hasImage: !!(product.imageUrl || product.thumbnailImage1),
+                imageUrl: product.imageUrl || product.thumbnailImage1?.url
+              });
+            });
+          }
+          
+          // Set products in multiple places to ensure templates can access them
+          context.collection.products = filteredProducts;
+          context.collection.totalProducts = filteredProducts.length;
+          context.products = filteredProducts; // Also set in products array for consistency
+          
+          // Also set in collection object for template compatibility
+          if (!context.collection.products) {
+            context.collection.products = filteredProducts;
+          }
+          
+          console.log(`[ROOT COLLECTION] Final context setup:`);
+          console.log(`  - context.products.length: ${context.products?.length || 0}`);
+          console.log(`  - context.collection.products.length: ${context.collection.products?.length || 0}`);
+          console.log(`  - context.collection.totalProducts: ${context.collection.totalProducts || 0}`);
+          
+          if (filteredProducts.length > 0) {
+            const sample = filteredProducts[0];
+            console.log(`[ROOT COLLECTION] Sample enriched product:`, {
+              id: sample.id,
+              title: sample.title || sample.name,
+              url: sample.url || sample.link,
+              price: sample.price || sample.sellingPrice,
+              stock: sample.stock,
+              inStock: sample.inStock,
+              hasImage: !!(sample.imageUrl || sample.thumbnailImage1),
+              imageUrl: sample.imageUrl || sample.thumbnailImage1?.url,
+              allKeys: Object.keys(sample).slice(0, 20)
+            });
+          } else {
+            console.warn(`[ROOT COLLECTION] ⚠️  No products found for category ${category.name}!`);
+            console.warn(`[ROOT COLLECTION] Available products in context: ${context.products?.length || 0}`);
+            if (context.products && context.products.length > 0) {
+              console.warn(`[ROOT COLLECTION] Sample product categoryIds:`, context.products.slice(0, 3).map(p => ({
+                id: p.id,
+                title: p.title || p.name,
+                categoryId: p.categoryId
+              })));
+            }
+          }
+          
+          // Debug: Log final context before rendering
+          console.log(`[ROOT COLLECTION] Final context before rendering:`);
+          console.log(`  - Products count: ${context.products?.length || 0}`);
+          if (context.products && context.products.length > 0) {
+            const firstProduct = context.products[0];
+            console.log(`  - First product:`, {
+              id: firstProduct.id,
+              title: firstProduct.title || firstProduct.name,
+              url: firstProduct.url || firstProduct.link,
+              price: firstProduct.price || firstProduct.sellingPrice,
+              stock: firstProduct.stock,
+              inStock: firstProduct.inStock,
+              hasImage: !!(firstProduct.imageUrl || firstProduct.thumbnailImage1)
+            });
+          }
+          
+          // Try to render products template first (to show product list, not categories list)
+          let html;
+          const templateOptions = ['templates/products', 'templates/collection', 'templates/category', 'templates/categories'];
+          for (const template of templateOptions) {
+            try {
+              html = await renderWithLayout(this.liquid, template, context, this.themePath);
+              break;
+            } catch (error) {
+              if (!error.message?.includes('Template not found')) {
+                throw error;
+              }
+            }
+          }
+          
+          if (html) {
+            res.setHeader('Content-Type', 'text/html; charset=utf-8');
+            res.setHeader('Cache-Control', 'no-cache');
+            return res.send(html);
+          }
+        }
+        
+        // Not a category - try to find brand by handle
+        const brand = context.brands?.find(b => 
+          (b.handle && b.handle.toLowerCase() === handle.toLowerCase()) ||
+          (b.name && b.name.toLowerCase().replace(/\s+/g, '-') === handle.toLowerCase())
+        );
+        
+        if (brand) {
+          // Found a brand - render products list
+          context.brand = brand;
+          
+          // Filter products by this brand and enrich them
+          const filteredProducts = (context.products || [])
+            .filter(p => 
+              p.brandId === brand.id || 
+              String(p.brandId).toLowerCase() === String(brand.id).toLowerCase() ||
+              (p.brand && p.brand.toLowerCase() === brand.name.toLowerCase())
+            )
+            .map(p => this.enrichProductData(p));
+          
+          context.brand.products = filteredProducts;
+          context.products = filteredProducts;
+          
+          console.log(`[ROOT BRAND] Brand: ${brand.name}, Products: ${filteredProducts.length}`);
+          
+          // Try to render products template
+          let html;
+          const templateOptions = ['templates/products', 'templates/brand', 'templates/collection', 'templates/brands'];
+          for (const template of templateOptions) {
+            try {
+              html = await renderWithLayout(this.liquid, template, context, this.themePath);
+              break;
+            } catch (error) {
+              if (!error.message?.includes('Template not found')) {
+                throw error;
+              }
+            }
+          }
+          
+          if (html) {
+            res.setHeader('Content-Type', 'text/html; charset=utf-8');
+            res.setHeader('Cache-Control', 'no-cache');
+            return res.send(html);
+          }
+        }
+        
+        // Not a category - check if it's a product handle
+        const product = context.products?.find(p => 
+          (p.handle && p.handle.toLowerCase() === handle.toLowerCase()) ||
+          (p.slug && p.slug.toLowerCase() === handle.toLowerCase())
+        );
+        
+        if (product) {
+          // Found a product - render product detail page
+          const productContext = await this.buildContext(req, 'product', { productHandle: product.handle || product.slug || handle });
+          
+          let html;
+          const templateOptions = ['templates/product-detail', 'templates/product', 'templates/product-page'];
+          for (const template of templateOptions) {
+            try {
+              html = await renderWithLayout(this.liquid, template, productContext, this.themePath);
+              break;
+            } catch (error) {
+              if (!error.message?.includes('Template not found')) {
+                throw error;
+              }
+            }
+          }
+          
+          if (html) {
+            res.setHeader('Content-Type', 'text/html; charset=utf-8');
+            res.setHeader('Cache-Control', 'no-cache');
+            return res.send(html);
+          }
+        }
+        
+        // Not found - pass to next middleware (will eventually 404)
+        next();
+      } catch (error) {
+        // If there's an error, pass to next middleware
+        next(error);
+      }
+    });
+
     // Favicon handler
     this.app.get('/favicon.ico', (req, res) => {
       res.status(204).end(); // No Content
@@ -1267,10 +1755,13 @@ class DevServer {
 
     try {
       // Load settings from settings_data.json
+      // Extract 'current' section to match webstore behavior
       const settingsPath = path.join(this.themePath, 'config', 'settings_data.json');
       if (fs.existsSync(settingsPath)) {
         const settingsData = fs.readFileSync(settingsPath, 'utf8');
-        context.settings = JSON.parse(settingsData);
+        const parsedData = JSON.parse(settingsData);
+        // Extract 'current' section like loadThemeSettings() does
+        context.settings = parsedData.current || parsedData.presets?.default || {};
       }
     } catch (error) {
       console.warn('[CONTEXT] Failed to load settings:', error.message);
@@ -1350,6 +1841,31 @@ class DevServer {
           // Load products
           const productsResponse = await this.apiClient.getProducts({ limit: 50, offset: 0 });
           context.products = productsResponse.products || productsResponse.data?.products || [];
+          
+          // Enrich all products using the reusable enrichment function
+          // This ensures consistency with products used in widgets and pages
+          context.products = this.enrichProductsData(context.products);
+          
+          // Debug first few products to verify enrichment
+          if (context.products.length > 0) {
+            context.products.slice(0, 3).forEach((product, index) => {
+              console.log(`[CONTEXT] Product ${index + 1} after enrichment:`, {
+                id: product.id,
+                handle: product.handle || 'none',
+                url: product.url || product.link || 'MISSING',
+                title: product.title || product.name || 'MISSING',
+                price: product.price || product.sellingPrice || 'MISSING',
+                hasPrices: !!product.prices,
+                stock: product.stock !== undefined ? product.stock : 'MISSING',
+                stockQuantity: product.stockQuantity !== undefined ? product.stockQuantity : 'MISSING',
+                inStock: product.inStock !== undefined ? product.inStock : 'MISSING',
+                available: product.available !== undefined ? product.available : 'MISSING',
+                hasImage: !!(product.imageUrl || product.thumbnailImage1),
+                imageUrl: product.imageUrl || product.thumbnailImage1?.url || 'MISSING'
+              });
+            });
+          }
+          
           console.log(`[CONTEXT] Loaded ${context.products.length} products`);
           
           // DEBUG: Verify products have quantity/stock field
@@ -1376,6 +1892,18 @@ class DevServer {
           try {
             const categoriesResponse = await this.apiClient.getCategories({ limit: 50, offset: 0 });
             context.categories = categoriesResponse.categories || categoriesResponse.data?.categories || categoriesResponse || [];
+            
+            // Ensure all categories have proper URL fields for navigation
+            context.categories = context.categories.map(category => {
+              // Set URL to category handle (e.g., /accessories)
+              if (!category.url && !category.link) {
+                const handle = category.handle || category.name?.toLowerCase().replace(/\s+/g, '-') || category.id;
+                category.url = `/${handle}`;
+                category.link = `/${handle}`;
+              }
+              return category;
+            });
+            
             context.collections = context.categories; // Also set collections for compatibility
             console.log(`[CONTEXT] Loaded ${context.categories.length} categories`);
           } catch (error) {
@@ -1446,40 +1974,57 @@ class DevServer {
         if (pageType === 'product' && extra.productHandle) {
           // Load single product data
           try {
+            const searchHandle = extra.productHandle.toLowerCase().trim();
+            console.log(`[CONTEXT] Searching for product with handle: ${searchHandle}`);
+            
             // First try to find in already loaded products
-            let product = context.products?.find(p => 
-              (p.handle && p.handle.toLowerCase() === extra.productHandle.toLowerCase()) || 
-              (p.slug && p.slug.toLowerCase() === extra.productHandle.toLowerCase()) ||
-              (p.id && String(p.id).toLowerCase() === extra.productHandle.toLowerCase())
-            );
+            // Check multiple fields: handle, slug, id, and also check if handle contains the ID
+            let product = context.products?.find(p => {
+              const pHandle = (p.handle || '').toLowerCase().trim();
+              const pSlug = (p.slug || '').toLowerCase().trim();
+              const pId = String(p.id || '').toLowerCase().trim();
+              const pIdStr = String(p.id || '');
+              
+              return pHandle === searchHandle || 
+                     pSlug === searchHandle ||
+                     pId === searchHandle ||
+                     (searchHandle.startsWith('product-') && pId === searchHandle.replace('product-', '')) ||
+                     (pHandle && searchHandle.includes(pIdStr)) ||
+                     (pSlug && searchHandle.includes(pIdStr));
+            });
             
             // If not found, try loading more products
             if (!product) {
+              console.log(`[CONTEXT] Product not found in initial list, loading more products...`);
               const productsResponse = await this.apiClient.getProducts({ limit: 100 });
               const allProducts = productsResponse.products || productsResponse.data?.products || [];
-              product = allProducts.find(p => 
-                (p.handle && p.handle.toLowerCase() === extra.productHandle.toLowerCase()) || 
-                (p.slug && p.slug.toLowerCase() === extra.productHandle.toLowerCase()) ||
-                (p.id && String(p.id).toLowerCase() === extra.productHandle.toLowerCase())
-              );
+              product = allProducts.find(p => {
+                const pHandle = (p.handle || '').toLowerCase().trim();
+                const pSlug = (p.slug || '').toLowerCase().trim();
+                const pId = String(p.id || '').toLowerCase().trim();
+                const pIdStr = String(p.id || '');
+                
+                return pHandle === searchHandle || 
+                       pSlug === searchHandle ||
+                       pId === searchHandle ||
+                       (searchHandle.startsWith('product-') && pId === searchHandle.replace('product-', '')) ||
+                       (pHandle && searchHandle.includes(pIdStr)) ||
+                       (pSlug && searchHandle.includes(pIdStr));
+              });
             }
             
             if (product) {
               context.product = product;
-              console.log(`[CONTEXT] Found product: ${product.title || product.name} (handle: ${product.handle || product.slug})`);
+              console.log(`[CONTEXT] ✅ Found product: ${product.title || product.name} (handle: ${product.handle || product.slug || product.id})`);
             } else {
-              console.warn(`[CONTEXT] Product not found with handle/slug/id: ${extra.productHandle}`);
-              // Fallback to first product if handle not found
-              if (context.products && context.products.length > 0) {
-                context.product = context.products[0];
-                console.log(`[CONTEXT] Using fallback product: ${context.product.title || context.product.name}`);
-              }
+              console.warn(`[CONTEXT] ⚠️  Product not found with handle/slug/id: ${extra.productHandle}`);
+              console.warn(`[CONTEXT] Available product handles: ${(context.products || []).slice(0, 5).map(p => p.handle || p.slug || p.id).join(', ')}`);
+              // Don't use fallback - let the route handler deal with 404
             }
           } catch (error) {
-            console.warn('[CONTEXT] Failed to load product:', error.message);
-            if (context.products && context.products.length > 0) {
-              context.product = context.products[0];
-            }
+            console.error('[CONTEXT] ❌ Failed to load product:', error.message);
+            console.error('[CONTEXT] Error stack:', error.stack);
+            // Don't use fallback on error - let route handle it
           }
         }
       } catch (error) {
@@ -1589,18 +2134,35 @@ class DevServer {
         if (type.includes('product') || type === 'featuredproducts' || type === 'bestsellerproducts' || type === 'newproducts' || type === 'simpleproduct' || type === 'singleproduct') {
           const widgetProducts = this.getProductsForWidget(widget, products);
           
+          // Products are already enriched by getProductsForWidget, but ensure they're properly formatted
+          const enrichedProducts = this.enrichProductsData(widgetProducts);
+          
           // Set products at multiple levels for template compatibility
-          widget.data.products = widgetProducts;
-          widget.data.Products = widgetProducts;
-          widget.products = widgetProducts;
+          widget.data.products = enrichedProducts;
+          widget.data.Products = enrichedProducts;
+          widget.products = enrichedProducts;
           
           // Also set in content for some template variations
           widget.data.content = widget.data.content || {};
-          widget.data.content.products = widgetProducts;
-          widget.data.content.Products = widgetProducts;
+          widget.data.content.products = enrichedProducts;
+          widget.data.content.Products = enrichedProducts;
           
           enrichedCount++;
-          console.log(`[ENRICH] ${widget.type} (${widget.id}): Added ${widgetProducts.length} products`);
+          console.log(`[ENRICH] ${widget.type} (${widget.id}): Added ${enrichedProducts.length} enriched products`);
+          
+          // Debug: Log sample product data
+          if (enrichedProducts.length > 0) {
+            const sample = enrichedProducts[0];
+            console.log(`[ENRICH] Sample widget product:`, {
+              id: sample.id,
+              title: sample.title || sample.name,
+              url: sample.url || sample.link,
+              price: sample.price || sample.sellingPrice,
+              stock: sample.stock,
+              inStock: sample.inStock,
+              hasImage: !!(sample.imageUrl || sample.thumbnailImage1)
+            });
+          }
         }
         
         // Enrich CategoryList and CategoryListCarousel widgets with categories
@@ -1637,13 +2199,18 @@ class DevServer {
         
         // Enrich RecentlyViewed widgets with products (use first 6 products as mock recent views)
         if (type === 'recentlyviewed' || type === 'recently-viewed') {
-          const recentProducts = products.slice(0, 6);
+          const recentProducts = this.enrichProductsData(products.slice(0, 6));
           widget.data.products = recentProducts;
           widget.data.Products = recentProducts;
           widget.products = recentProducts;
           
+          // Also set in content
+          widget.data.content = widget.data.content || {};
+          widget.data.content.products = recentProducts;
+          widget.data.content.Products = recentProducts;
+          
           enrichedCount++;
-          console.log(`[ENRICH] ${widget.type} (${widget.id}): Added ${recentProducts.length} recently viewed products`);
+          console.log(`[ENRICH] ${widget.type} (${widget.id}): Added ${recentProducts.length} enriched recently viewed products`);
         }
       });
     });
@@ -1651,37 +2218,268 @@ class DevServer {
     console.log(`[CONTEXT] ✅ Enriched ${enrichedCount} widgets with data`);
   }
   
+  /**
+   * Enrich a single product with all required data (URL, name/title, price, images, stock)
+   * This ensures consistency between widgets and pages
+   * @param {Object} product - Product object to enrich
+   * @returns {Object} Enriched product (creates a copy to avoid mutation)
+   */
+  enrichProductData(product) {
+    // Create a copy to avoid mutating the original
+    const enriched = { ...product };
+    
+    // CRITICAL: Ensure productId exists - it's the most reliable identifier
+    if (!enriched.productId && enriched.id) {
+      // Try to extract numeric ID from string ID (e.g., "product-1" -> 1)
+      const numericMatch = String(enriched.id).match(/\d+/);
+      if (numericMatch) {
+        enriched.productId = parseInt(numericMatch[0], 10);
+      } else {
+        // Use the ID as-is if it's already numeric
+        enriched.productId = enriched.id;
+      }
+    } else if (!enriched.productId && !enriched.id) {
+      console.warn(`[ENRICH] ⚠️  Product missing both id and productId:`, {
+        keys: Object.keys(enriched).slice(0, 15),
+        title: enriched.title || enriched.name
+      });
+    }
+    
+    // DEBUG: Log incoming product to diagnose missing fields
+    if (!product.id && !product.handle && !product.slug && !product.productId) {
+      console.warn(`[ENRICH] ⚠️  Product missing all identifiers (id/handle/slug/productId):`, {
+        keys: Object.keys(product).slice(0, 15),
+        title: product.title || product.name
+      });
+    }
+    
+    // Ensure URL field exists - CRITICAL for product navigation
+    // Treat '#' as missing URL and regenerate it
+    const hasValidUrl = enriched.url && enriched.url !== '#' && enriched.url !== '';
+    const hasValidLink = enriched.link && enriched.link !== '#' && enriched.link !== '';
+    
+    if (!hasValidUrl && !hasValidLink) {
+      const handle = enriched.handle || enriched.slug || enriched.id;
+      if (handle && handle !== '#' && handle !== '') {
+        enriched.url = `/products/${handle}`;
+        enriched.link = `/products/${handle}`;
+      } else {
+        // Last resort: use numeric ID if available
+        const numericId = enriched.productId || enriched.id;
+        if (numericId) {
+          const fallbackHandle = `product-${numericId}`.toLowerCase();
+          enriched.url = `/products/${fallbackHandle}`;
+          enriched.link = `/products/${fallbackHandle}`;
+          enriched.handle = enriched.handle || fallbackHandle; // Also set handle if missing
+          enriched.slug = enriched.slug || fallbackHandle; // Also set slug if missing
+        } else {
+          enriched.url = '#';
+          enriched.link = '#';
+          console.warn(`[ENRICH] ⚠️  Product has no id/handle/slug/productId, URL set to '#'`, {
+            productKeys: Object.keys(enriched).slice(0, 10)
+          });
+        }
+      }
+    } else if (!hasValidUrl && hasValidLink) {
+      enriched.url = enriched.link;
+    } else if (hasValidUrl && !hasValidLink) {
+      enriched.link = enriched.url;
+    } else if (enriched.url === '#' || enriched.link === '#') {
+      // If one is valid but the other is '#', update the '#' one
+      if (enriched.url === '#') enriched.url = enriched.link;
+      if (enriched.link === '#') enriched.link = enriched.url;
+    }
+    
+    // Ensure handle/slug exist if missing (for template fallback logic)
+    // Also normalize them (remove '#' or empty strings)
+    if (!enriched.handle || enriched.handle === '#' || enriched.handle === '') {
+      if (enriched.slug && enriched.slug !== '#' && enriched.slug !== '') {
+        enriched.handle = enriched.slug;
+      } else if (enriched.id && enriched.id !== '#') {
+        enriched.handle = String(enriched.id).toLowerCase();
+      } else if (enriched.productId) {
+        enriched.handle = `product-${enriched.productId}`.toLowerCase();
+      } else if (!enriched.handle) {
+        // Generate from URL if it was set above
+        if (enriched.url && enriched.url !== '#') {
+          enriched.handle = enriched.url.replace(/^\/products\//, '').toLowerCase();
+        }
+      }
+    }
+    
+    if (!enriched.slug || enriched.slug === '#' || enriched.slug === '') {
+      if (enriched.handle && enriched.handle !== '#' && enriched.handle !== '') {
+        enriched.slug = enriched.handle;
+      } else if (enriched.id && enriched.id !== '#') {
+        enriched.slug = String(enriched.id).toLowerCase();
+      } else if (enriched.productId) {
+        enriched.slug = `product-${enriched.productId}`.toLowerCase();
+      } else if (!enriched.slug) {
+        // Generate from URL if it was set above
+        if (enriched.url && enriched.url !== '#') {
+          enriched.slug = enriched.url.replace(/^\/products\//, '').toLowerCase();
+        }
+      }
+    }
+    
+    // Ensure name/title exists - CRITICAL for product display
+    if (!enriched.name && !enriched.title) {
+      enriched.name = `Product ${enriched.id || 'Unknown'}`;
+      enriched.title = enriched.name;
+    } else if (!enriched.name) {
+      enriched.name = enriched.title || `Product ${enriched.id || 'Unknown'}`;
+    } else if (!enriched.title) {
+      enriched.title = enriched.name;
+    }
+    
+    // Ensure both variations and variants exist (product-card uses variations)
+    if (enriched.variants && !enriched.variations) {
+      enriched.variations = enriched.variants;
+    } else if (enriched.variations && !enriched.variants) {
+      enriched.variants = enriched.variations;
+    }
+    
+    // Ensure price exists - CRITICAL for product display
+    if (!enriched.price && !enriched.sellingPrice) {
+      // Try to get from variants/variations first
+      const variantsOrVariations = enriched.variants || enriched.variations;
+      if (variantsOrVariations && variantsOrVariations.length > 0) {
+        enriched.price = variantsOrVariations[0].price || variantsOrVariations[0].sellingPrice || 0;
+        enriched.sellingPrice = enriched.price;
+      } else {
+        enriched.price = 0;
+        enriched.sellingPrice = 0;
+      }
+    } else if (!enriched.price) {
+      enriched.price = enriched.sellingPrice;
+    } else if (!enriched.sellingPrice) {
+      enriched.sellingPrice = enriched.price;
+    }
+    
+    // Ensure prices object exists for product-card compatibility - CRITICAL
+    // Make sure price is NOT 0 unless it's actually 0 (check if undefined/null)
+    const finalPrice = (enriched.price !== undefined && enriched.price !== null) 
+      ? enriched.price 
+      : ((enriched.sellingPrice !== undefined && enriched.sellingPrice !== null) 
+          ? enriched.sellingPrice 
+          : 0);
+    
+    if (!enriched.prices) {
+      const mrpValue = enriched.compareAtPrice || enriched.comparePrice || enriched.mrp || 0;
+      enriched.prices = {
+        price: finalPrice,
+        mrp: mrpValue,
+        currency: enriched.currency || 'USD'
+      };
+    } else {
+      // Update prices object if it exists but is missing fields
+      if (enriched.prices.price === undefined || enriched.prices.price === null) {
+        enriched.prices.price = finalPrice;
+      }
+      if (enriched.prices.mrp === undefined || enriched.prices.mrp === null) {
+        enriched.prices.mrp = enriched.compareAtPrice || enriched.comparePrice || enriched.mrp || 0;
+      }
+      if (!enriched.prices.currency) {
+        enriched.prices.currency = enriched.currency || 'USD';
+      }
+    }
+    
+    // Ensure price/sellingPrice fields also exist (not just prices object)
+    if (enriched.price === undefined || enriched.price === null) {
+      enriched.price = finalPrice;
+    }
+    if (enriched.sellingPrice === undefined || enriched.sellingPrice === null) {
+      enriched.sellingPrice = finalPrice;
+    }
+    
+    // Ensure image exists - CRITICAL for product display
+    if (!enriched.imageUrl && !enriched.thumbnailImage1 && (!enriched.images || enriched.images.length === 0)) {
+      // Fallback to picsum placeholder
+      const imageId = enriched.id ? String(enriched.id).replace(/\D/g, '') || '1' : '1';
+      enriched.imageUrl = `https://picsum.photos/seed/${imageId}/800/800`;
+      enriched.thumbnailImage1 = {
+        url: enriched.imageUrl,
+        altText: enriched.title || enriched.name || 'Product image'
+      };
+    }
+    
+    // Ensure stock/availability data exists - CRITICAL to prevent incorrect "SOLD OUT" display
+    if (enriched.stock === undefined && enriched.stockQuantity === undefined) {
+      // Calculate from variants/variations if available
+      const variantsOrVariations = enriched.variants || enriched.variations;
+      if (variantsOrVariations && variantsOrVariations.length > 0) {
+        const totalStock = variantsOrVariations.reduce((sum, v) => sum + (v.stock || v.quantity || 0), 0);
+        enriched.stock = totalStock;
+        enriched.stockQuantity = totalStock;
+        enriched.inStock = totalStock > 0;
+        enriched.available = totalStock > 0;
+      } else {
+        // Default to in stock if no stock info (prevents false "SOLD OUT" display)
+        enriched.stock = 10;
+        enriched.stockQuantity = 10;
+        enriched.inStock = true;
+        enriched.available = true;
+      }
+    } else {
+      // Ensure inStock/available flags are set based on stock value
+      // CRITICAL: Use nullish coalescing to handle 0 values correctly
+      const stockValue = enriched.stock !== undefined ? enriched.stock : (enriched.stockQuantity !== undefined ? enriched.stockQuantity : 0);
+      enriched.inStock = stockValue > 0;
+      enriched.available = stockValue > 0;
+      
+      // Also ensure stockQuantity is set if only stock is set (and vice versa)
+      if (enriched.stock !== undefined && enriched.stockQuantity === undefined) {
+        enriched.stockQuantity = enriched.stock;
+      } else if (enriched.stockQuantity !== undefined && enriched.stock === undefined) {
+        enriched.stock = enriched.stockQuantity;
+      }
+    }
+    
+    return enriched;
+  }
+  
+  /**
+   * Enrich multiple products with all required data
+   * @param {Array} products - Array of products to enrich
+   * @returns {Array} Array of enriched products
+   */
+  enrichProductsData(products) {
+    if (!Array.isArray(products)) return [];
+    return products.map(product => this.enrichProductData(product));
+  }
+
   /**
    * Get products for a specific widget based on its settings
    */
   getProductsForWidget(widget, products) {
     // Get the limit from widget settings, default to 12
-    const limit = widget.settings?.limit || widget.data?.content?.Limit || 12;
+    const limit = widget.settings?.limit || widget.data?.content?.Limit || widget.settings?.numberOfProducts || widget.settings?.NumberOfProducts || 12;
     
     // Get products based on widget type
     const type = (widget.type || '').toLowerCase();
     
+    let widgetProducts = [];
+    
     if (type.includes('featured') || type === 'featuredproducts') {
       // Featured products - filter by featured tag or just take first N
       const featured = products.filter(p => p.tags?.includes('featured') || p.featured);
-      return featured.length > 0 ? featured.slice(0, limit) : products.slice(0, limit);
-    }
-    
-    if (type.includes('bestseller') || type === 'bestsellerproducts') {
+      widgetProducts = featured.length > 0 ? featured.slice(0, limit) : products.slice(0, limit);
+    } else if (type.includes('bestseller') || type === 'bestsellerproducts') {
       // Best seller products - sort by sales or just take random N
-      return products.slice(0, limit);
-    }
-    
-    if (type.includes('new') || type === 'newproducts') {
+      widgetProducts = products.slice(0, limit);
+    } else if (type.includes('new') || type === 'newproducts') {
       // New products - sort by created date
       const sorted = [...products].sort((a, b) => 
         new Date(b.createdAt || 0) - new Date(a.createdAt || 0)
       );
-      return sorted.slice(0, limit);
+      widgetProducts = sorted.slice(0, limit);
+    } else {
+      // Default: return first N products
+      widgetProducts = products.slice(0, limit);
     }
     
-    // Default: return first N products
-    return products.slice(0, limit);
+    // Enrich all products with required data before returning
+    return this.enrichProductsData(widgetProducts);
   }
 
   /**
@@ -2586,14 +3384,36 @@ class DevServer {
    */
   async stop() {
     return new Promise((resolve) => {
+      let resolved = false;
+      const safeResolve = () => {
+        if (!resolved) {
+          resolved = true;
+          console.log(chalk.yellow('\n👋 Server stopped'));
+          resolve();
+        }
+      };
+      
+      // Increase max listeners to prevent warning if multiple shutdown attempts
+      if (this.server && this.server.setMaxListeners) {
+        this.server.setMaxListeners(20);
+      }
+      
       // Stop file watcher
       if (this.fileWatcher && typeof this.fileWatcher.close === 'function') {
-        this.fileWatcher.close();
+        try {
+          this.fileWatcher.close();
+        } catch (error) {
+          // Ignore errors when closing watcher
+        }
       }
       
       // Close Socket.IO
       if (this.io && typeof this.io.close === 'function') {
-        this.io.close();
+        try {
+          this.io.close();
+        } catch (error) {
+          // Ignore errors when closing Socket.IO
+        }
       }
       
       // Stop mock API
@@ -2601,14 +3421,37 @@ class DevServer {
         this.mockApi.stop().catch(() => {});
       }
       
-      // Close HTTP server
+      // Close HTTP server - check if it's actually listening/running
       if (this.server) {
-        this.server.close(() => {
-          console.log(chalk.yellow('\n👋 Server stopped'));
-          resolve();
+        // Check if server is listening before trying to close
+        const isListening = this.server.listening || false;
+        
+        if (!isListening) {
+          // Server is already closed/not running
+          safeResolve();
+          return;
+        }
+        
+        // Remove all existing listeners to prevent memory leak warning
+        this.server.removeAllListeners('close');
+        
+        // Close the server - use callback instead of event listener to avoid duplicate calls
+        this.server.close((err) => {
+          if (err) {
+            // Ignore ERR_SERVER_NOT_RUNNING errors as they're harmless
+            if (err.code !== 'ERR_SERVER_NOT_RUNNING') {
+              console.error(chalk.red('Error closing server:'), err.message);
+            }
+          }
+          safeResolve();
         });
+        
+        // Fallback timeout in case close callback doesn't fire
+        setTimeout(() => {
+          safeResolve();
+        }, 2000);
       } else {
-        resolve();
+        safeResolve();
       }
     });
   }