@o2vend/theme-cli 1.0.35 → 1.0.36

package/lib/lib/dev-server.js

@@ -26,6 +26,7 @@ class DevServer {
     this.mode = options.mode || 'mock'; // 'mock' or 'real'
     this.mockApiPort = options.mockApiPort || 3001;
     this.openBrowser = options.open !== false;
+    this.debug = options.debug || process.env.O2VEND_DEBUG === 'true' || process.env.DEBUG === 'true';
     
     this.app = express();
     this.server = null;
@@ -423,7 +424,7 @@ class DevServer {
         // Log context data for debugging
         const widgetSections = Object.keys(context.widgets || {});
         const widgetCounts = widgetSections.map(s => `${s}:${context.widgets[s]?.length || 0}`).join(', ');
-        console.log(`[HOME] Products: ${context.products?.length || 0}, Widgets: [${widgetCounts}], Menus: ${context.menus?.length || 0}`);
+        console.log(`[HOME] Products: ${context.products?.length || 0}, Widgets: [${widgetCounts}], Menus: ${Object.keys(context.menus || {}).length}`);
         
         // Ensure products are available
         if (!context.products || context.products.length === 0) {
@@ -453,18 +454,15 @@ class DevServer {
             if (this.mode === 'real') {
               const opts = { headers: req.headers.cookie ? { Cookie: req.headers.cookie } : {} };
               context.widgets = await webstoreApi.fetchWidgetsBySections('home', webstoreApi.DEFAULT_SECTIONS, opts) || { hero: [], content: [], footer: [] };
-              console.log(`[HOME] Reloaded widgets: ${Object.keys(context.widgets).join(', ')} (real)`);
+              console.log(`[HOME] Reloaded widgets (real)`);
             } else if (this.widgetService) {
-              const widgets = await this.widgetService.getWidgetsBySections();
-              context.widgets = widgets || { hero: [], content: [], footer: [] };
-              console.log(`[HOME] Reloaded widgets: ${Object.keys(context.widgets).join(', ')}`);
+              context.widgets = await this.widgetService.fetchPageWidgets('home');
             } else {
-              console.error('[HOME] Widget service not available');
-              context.widgets = { hero: [], content: [], footer: [] };
+              context.widgets = { header: [], hero: [], content: [], footer: [] };
             }
           } catch (error) {
             console.error('[HOME] Failed to reload widgets:', error.message);
-            context.widgets = { hero: [], content: [], footer: [] };
+            context.widgets = { header: [], hero: [], content: [], footer: [] };
           }
         }
 
@@ -541,7 +539,7 @@ class DevServer {
             price: sample.price || sample.sellingPrice,
             stock: sample.stock,
             inStock: sample.inStock,
-            hasImage: !!(sample.imageUrl || sample.thumbnailImage1)
+            hasImage: !!(sample.imageUrl || sample.thumbnailImage)
           });
         }
         
@@ -550,7 +548,7 @@ class DevServer {
         console.log(`  - Products count: ${context.products?.length || 0}`);
         console.log(`  - Widgets sections: ${Object.keys(context.widgets || {}).join(', ') || 'none'}`);
         console.log(`  - Widgets counts: ${Object.keys(context.widgets || {}).map(s => `${s}:${context.widgets[s]?.length || 0}`).join(', ') || 'none'}`);
-        console.log(`  - Menus count: ${context.menus?.length || 0}`);
+        console.log(`  - Menus count: ${Object.keys(context.menus || {}).length}`);
         console.log(`  - Categories count: ${context.categories?.length || 0}`);
         console.log(`  - Brands count: ${context.brands?.length || 0}`);
         
@@ -597,7 +595,7 @@ 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 hasImage = sampleProduct.thumbnailImage || 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';
@@ -612,46 +610,25 @@ class DevServer {
           }
         }
         
-        // Ensure widgets are available (they should be from buildContext, but double-check)
         if (!context.widgets || Object.keys(context.widgets).length === 0) {
-          console.warn('[PRODUCTS PAGE] ⚠️  No widgets in context, attempting to reload...');
+          console.warn('[PRODUCTS PAGE] No widgets in context, attempting reload...');
           try {
             if (this.mode === 'real') {
               const opts = { headers: req.headers.cookie ? { Cookie: req.headers.cookie } : {} };
-              context.widgets = await webstoreApi.fetchWidgetsBySections('products', webstoreApi.DEFAULT_SECTIONS, opts) || { hero: [], content: [], footer: [], header: [] };
-              console.log(`[PRODUCTS PAGE] ✅ Reloaded widgets: ${Object.keys(context.widgets).join(', ')} (real)`);
+              context.widgets = await webstoreApi.fetchWidgetsBySections('products', webstoreApi.DEFAULT_SECTIONS, opts) || { header: [], hero: [], content: [], footer: [] };
             } else if (this.widgetService) {
-              const widgets = await this.widgetService.getWidgetsBySections();
-              context.widgets = widgets || { hero: [], content: [], footer: [], header: [] };
-              console.log(`[PRODUCTS PAGE] ✅ Reloaded widgets: ${Object.keys(context.widgets).join(', ')}`);
+              context.widgets = await this.widgetService.fetchPageWidgets('products');
             } else {
-              context.widgets = { hero: [], content: [], footer: [], header: [] };
+              context.widgets = { header: [], hero: [], content: [], footer: [] };
             }
           } catch (error) {
-            console.error('[PRODUCTS PAGE] ❌ Failed to reload widgets:', error.message);
-            context.widgets = { hero: [], content: [], footer: [], header: [] };
+            console.error('[PRODUCTS PAGE] Failed to reload widgets:', error.message);
+            context.widgets = { header: [], hero: [], content: [], footer: [] };
           }
         }
 
-        // Ensure menus are available
-        if (!context.menus || context.menus.length === 0) {
-          console.warn('[PRODUCTS PAGE] ⚠️  No menus in context, attempting to reload...');
-          try {
-            if (this.mode === 'real') {
-              context.menus = await webstoreApi.fetchMenus({ headers: req.headers.cookie ? { Cookie: req.headers.cookie } : {} });
-              context.menus = Array.isArray(context.menus) ? context.menus : [];
-              console.log(`[PRODUCTS PAGE] ✅ Reloaded ${context.menus.length} menus (real)`);
-            } else {
-              const axios = require('axios');
-              const menusResponse = await axios.get(`http://localhost:${this.mockApiPort}/webstoreapi/menus`);
-              const menusData = menusResponse.data;
-              context.menus = Array.isArray(menusData) ? menusData : (menusData.data?.menus || menusData.menus || []);
-              console.log(`[PRODUCTS PAGE] ✅ Reloaded ${context.menus.length} menus`);
-            }
-          } catch (error) {
-            console.error('[PRODUCTS PAGE] ❌ Failed to reload menus:', error.message);
-            context.menus = [];
-          }
+        if (!context.menus || Object.keys(context.menus).length === 0) {
+          console.warn('[PRODUCTS PAGE] No menus in context');
         }
         
         // Ensure collection.products is set for products template
@@ -690,9 +667,9 @@ class DevServer {
               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,
+              hasImage: !!(sample.imageUrl || sample.thumbnailImage),
+              imageUrl: sample.imageUrl || sample.thumbnailImage?.url || 'MISSING',
+              hasThumbnailImage: !!sample.thumbnailImage,
               hasImagesArray: !!(sample.images && sample.images.length > 0)
             });
           } else {
@@ -714,10 +691,10 @@ class DevServer {
             title: firstProduct.title || firstProduct.name,
             url: firstProduct.url || firstProduct.link,
             price: firstProduct.price || firstProduct.sellingPrice,
-            stock: firstProduct.stock,
+            stockQuantity: firstProduct.stockQuantity,
             inStock: firstProduct.inStock,
-            hasImage: !!(firstProduct.imageUrl || firstProduct.thumbnailImage1),
-            imageUrl: firstProduct.imageUrl || firstProduct.thumbnailImage1?.url
+            hasImage: !!(firstProduct.imageUrl || firstProduct.thumbnailImage),
+            imageUrl: firstProduct.imageUrl || firstProduct.thumbnailImage
           });
         }
         if (context.collection) {
@@ -869,31 +846,8 @@ class DevServer {
       }
     });
 
-    // Collections listing page (uses categories.liquid template per webstore)
-    this.app.get('/collections', async (req, res, next) => {
-      try {
-        const context = await this.buildContext(req, 'collections');
-        // Try categories.liquid first (as per webstore), then collections.liquid, then collection.liquid
-        let html;
-        try {
-          html = await renderWithLayout(this.liquid, 'templates/categories', context, this.themePath);
-        } catch (error) {
-          if (error.message && error.message.includes('Template not found')) {
-            try {
-              html = await renderWithLayout(this.liquid, 'templates/collections', context, this.themePath);
-            } catch (error2) {
-              html = await renderWithLayout(this.liquid, 'templates/collection', context, this.themePath);
-            }
-          } else {
-            throw error;
-          }
-        }
-        res.setHeader('Content-Type', 'text/html; charset=utf-8');
-        res.setHeader('Cache-Control', 'no-cache');
-        res.send(html);
-      } catch (error) {
-        next(error);
-      }
+    this.app.get('/collections', (req, res) => {
+      res.redirect(301, '/categories');
     });
 
     // Collection detail page - Try categories first, then collection
@@ -1209,6 +1163,55 @@ class DevServer {
       }
     });
 
+    this.app.get('/dev/context', async (req, res, next) => {
+      try {
+        const pageType = req.query.page || 'home';
+        const context = await this.buildContext(req, pageType);
+        const debugOutput = {
+          mode: this.mode,
+          pageType,
+          shopKeys: Object.keys(context.shop || {}),
+          shop: context.shop,
+          store: context.store,
+          menusKeys: Object.keys(context.menus || {}),
+          mainMenu: context.mainMenu ? { name: context.mainMenu.name, itemCount: context.mainMenu.items?.length } : null,
+          widgetSections: Object.fromEntries(
+            Object.entries(context.widgets || {}).map(([k, v]) =>
+              [k, Array.isArray(v) ? v.map(w => ({ type: w.type, id: w.id, template_path: w.template_path })) : v]
+            )
+          ),
+          productsCount: (context.products || []).length,
+          categoriesCount: (context.categories || []).length,
+          brandsCount: (context.brands || []).length,
+          cart: context.cart,
+          customer: context.customer,
+          request: context.request,
+          deliveryZone: context.deliveryZone,
+          analytics: context.analytics,
+          settingsKeys: Object.keys(context.settings || {}),
+          sampleProduct: (context.products || [])[0] ? {
+            id: context.products[0].id,
+            slug: context.products[0].slug,
+            url: context.products[0].url,
+            stockQuantity: context.products[0].stockQuantity,
+            inStock: context.products[0].inStock,
+            available: context.products[0].available,
+            prices: context.products[0].prices,
+            thumbnailImage: context.products[0].thumbnailImage
+          } : null,
+          sampleCategory: (context.categories || [])[0] ? {
+            id: context.categories[0].id,
+            slug: context.categories[0].slug,
+            handle: context.categories[0].handle,
+            thumbnailImage: context.categories[0].thumbnailImage
+          } : null
+        };
+        res.json(debugOutput);
+      } catch (error) {
+        next(error);
+      }
+    });
+
     // Development Dashboard - List all theme components
     this.app.get('/dev', async (req, res, next) => {
       try {
@@ -1447,8 +1450,8 @@ class DevServer {
                 price: product.price || product.sellingPrice,
                 stock: product.stock,
                 inStock: product.inStock,
-                hasImage: !!(product.imageUrl || product.thumbnailImage1),
-                imageUrl: product.imageUrl || product.thumbnailImage1?.url
+                hasImage: !!(product.imageUrl || product.thumbnailImage),
+                imageUrl: product.imageUrl || product.thumbnailImage?.url
               });
             });
           }
@@ -1477,8 +1480,8 @@ class DevServer {
               price: sample.price || sample.sellingPrice,
               stock: sample.stock,
               inStock: sample.inStock,
-              hasImage: !!(sample.imageUrl || sample.thumbnailImage1),
-              imageUrl: sample.imageUrl || sample.thumbnailImage1?.url,
+              hasImage: !!(sample.imageUrl || sample.thumbnailImage),
+              imageUrl: sample.imageUrl || sample.thumbnailImage?.url,
               allKeys: Object.keys(sample).slice(0, 20)
             });
           } else {
@@ -1503,9 +1506,9 @@ class DevServer {
               title: firstProduct.title || firstProduct.name,
               url: firstProduct.url || firstProduct.link,
               price: firstProduct.price || firstProduct.sellingPrice,
-              stock: firstProduct.stock,
+              stockQuantity: firstProduct.stockQuantity,
               inStock: firstProduct.inStock,
-              hasImage: !!(firstProduct.imageUrl || firstProduct.thumbnailImage1)
+              hasImage: !!(firstProduct.imageUrl || firstProduct.thumbnailImage)
             });
           }
           
@@ -1601,10 +1604,31 @@ class DevServer {
           }
         }
         
-        // Not found - pass to next middleware (will eventually 404)
-        next();
+        // Not a category, brand, or product -- try as a CMS page
+        {
+          const pageContext = await this.buildContext(req, 'page', { pageHandle: handle });
+          pageContext.page = { title: handle.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase()), handle: handle };
+          let html;
+          const pageTemplates = ['templates/page', 'templates/pages'];
+          for (const template of pageTemplates) {
+            try {
+              html = await renderWithLayout(this.liquid, template, pageContext, 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 - 404
+        res.status(404).send(`<!DOCTYPE html><html><head><title>Page Not Found</title></head><body><h1>Page Not Found</h1><p>The page "${handle}" was not found.</p><p><a href="/">Back to Home</a></p></body></html>`);
       } catch (error) {
-        // If there's an error, pass to next middleware
+        console.error(`[CATCH-ALL] Error handling /${req.params?.handle}:`, error.message);
         next(error);
       }
     });
@@ -1688,13 +1712,10 @@ class DevServer {
    *    - If template expects 'quantity' instead of 'stock', consider adding both fields
    * 
    * 2. WIDGETS LOADING:
-   *    - Widgets are loaded via widgetService.getWidgetsBySections()
+   *    - Widgets are loaded via widgetService.fetchPageWidgets(pageId)
    *    - Widgets are organized by section (header, hero, content, footer)
-   *    - Widgets should be available for ALL page types (home, products, collection, etc.)
-   *    - If widgets are missing, check:
-   *      a) widgetService is initialized (should be created in setupServices)
-   *      b) Mock API is returning widgets correctly
-   *      c) Widget service is properly organizing widgets by section
+   *    - Widgets are filtered by pageId to match production behavior
+   *    - pageId is derived from pageType: home->home, product->product, collection->category, etc.
    * 
    * 3. MENUS LOADING:
    *    - Menus are loaded from /webstoreapi/menus endpoint
@@ -1709,8 +1730,10 @@ class DevServer {
    * @returns {Promise<Object>} Template context
    */
   async buildContext(req, pageType, extra = {}) {
+    const hostname = `${this.host}:${this.port}`;
     const context = {
       shop: {},
+      store: {},
       tenant: {},
       page: {
         type: pageType,
@@ -1720,29 +1743,40 @@ class DevServer {
       collections: [],
       categories: [],
       brands: [],
-      cart: { 
+      cart: {
         id: 'mock-cart-1',
-        items: [], 
-        total: 0, 
-        itemCount: 0,
-        currency: 'USD',
-        subtotal: 0,
-        tax: 0,
-        shipping: 0
-      },
-      // Mock authenticated customer for dev mode (allows add-to-cart without login)
-      customer: {
-        id: 'mock-customer-1',
-        isAuthenticated: true,
-        firstName: 'Test',
-        lastName: 'User',
-        email: 'test@example.com',
-        phone: '+1234567890',
-        name: 'Test User'
+        items: [],
+        total: 0,
+        subTotal: 0,
+        taxAmount: 0,
+        shippingAmount: 0,
+        itemCount: 0
       },
+      customer: null,
       widgets: {},
       settings: {},
-      menus: [],
+      menus: {},
+      mainMenu: null,
+      request: {
+        path: req.path,
+        url: req.url,
+        host: hostname
+      },
+      deliveryZone: {
+        enabled: false,
+        mode: 0,
+        current: null,
+        zipcodeSearchEnabled: false,
+        defaultZipcode: null,
+        showModal: false
+      },
+      analytics: {
+        enabled: false,
+        baseUrl: null,
+        siteId: null,
+        visitorId: null
+      },
+      content_for_header: '',
       ...extra
     };
 
@@ -1770,63 +1804,54 @@ class DevServer {
       // Use mock API (API client points to mock API via proxy)
       try {
         const storeInfo = await this.apiClient.getStoreInfo(true);
-        context.shop = storeInfo || {
-          name: 'My Store',
-          description: 'O2VEND Store',
-          domain: 'localhost:3000',
-          email: 'store@example.com'
+        const si = storeInfo || {};
+        const storeSettings = si.settings || {};
+        context.shop = {
+          name: si.name || 'My Store',
+          domain: si.domain || hostname,
+          currency: storeSettings.currency || 'USD',
+          currencySymbol: storeSettings.currencySymbol || '$',
+          timezone: storeSettings.timezone || si.timezone || 'America/New_York',
+          language: storeSettings.language || si.language || 'en',
+          logo: si.logoUrl || storeSettings.logo || '/assets/logo.png',
+          favicon: si.favouriteIconUrl || storeSettings.favicon || '/favicon.ico',
+          id: si.id || 1,
+          identifier: si.identifier || 'store',
+          companyName: si.companyName || si.name || 'My Store',
+          companyAddress: si.companyAddress || '',
+          companyPhoneNumber: si.companyPhoneNumber || si.phone || '',
+          companyEmail: si.companyEmail || si.email || '',
+          settings: storeSettings
+        };
+        context.store = {
+          id: context.shop.id,
+          identifier: context.shop.identifier,
+          name: context.shop.name,
+          settings: storeSettings,
+          companyName: context.shop.companyName,
+          companyAddress: context.shop.companyAddress,
+          companyPhoneNumber: context.shop.companyPhoneNumber,
+          companyEmail: context.shop.companyEmail
+        };
+        context.tenant = {
+          id: si.id || 1,
+          name: context.shop.name,
+          settings: storeSettings
         };
         
-        // Get widgets for sections from mock API
-        // NOTE: Widgets should be loaded for ALL page types (home, products, collection, etc.)
-        // The widget service filters widgets by section, so all sections should be available
+        // Load widgets filtered by page type (matches production behavior)
+        const pageIdMap = { home: 'home', product: 'product', collection: 'category', category: 'category', products: 'products', categories: 'categories', brand: 'brand', checkout: 'checkout', page: 'home' };
+        const widgetPageId = pageIdMap[pageType] || 'home';
         if (this.widgetService) {
           try {
-            console.log(`[CONTEXT] Loading widgets for page type: ${pageType}`);
-            const widgets = await this.widgetService.getWidgetsBySections();
-            context.widgets = widgets || {
-              hero: [],
-              products: [],
-              footer: [],
-              content: [],
-              header: []
-            };
-            // Log widget counts by section
-            const widgetCounts = Object.keys(context.widgets).map(section => 
-              `${section}: ${context.widgets[section]?.length || 0}`
-            ).join(', ');
-            console.log(`[CONTEXT] ✅ Widgets loaded: ${widgetCounts}`);
-            
-            // DEBUG: Log detailed widget information
-            Object.keys(context.widgets).forEach(section => {
-              if (context.widgets[section] && context.widgets[section].length > 0) {
-                console.log(`[CONTEXT DEBUG] Section '${section}' has ${context.widgets[section].length} widget(s):`);
-                context.widgets[section].slice(0, 3).forEach((w, idx) => {
-                  console.log(`  - Widget ${idx + 1}: ${w.type || 'Unknown'} (ID: ${w.id || 'no-id'})`);
-                });
-              }
-            });
+            console.log(`[CONTEXT] Loading widgets for page type: ${pageType} (pageId: ${widgetPageId})`);
+            context.widgets = await this.widgetService.fetchPageWidgets(widgetPageId);
           } catch (error) {
-            console.error('[CONTEXT] ❌ Failed to load widgets:', error.message);
-            console.error('[CONTEXT] Error stack:', error.stack);
-            context.widgets = {
-              hero: [],
-              products: [],
-              footer: [],
-              content: [],
-              header: []
-            };
+            console.error('[CONTEXT] Failed to load widgets:', error.message);
+            context.widgets = { header: [], hero: [], content: [], footer: [] };
           }
         } else {
-          console.warn('[CONTEXT] ⚠️  Widget service not available, using empty widgets');
-          console.warn('[CONTEXT] This may happen if widgetService was not initialized properly');
-          context.widgets = {
-            hero: [],
-            products: [],
-            footer: [],
-            content: [],
-            header: []
-          };
+          context.widgets = { header: [], hero: [], content: [], footer: [] };
         }
         
         // Always load products, categories, brands, menus, and cart for navigation and widgets
@@ -1853,32 +1878,17 @@ class DevServer {
                 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'
+                hasImage: !!(product.imageUrl || product.thumbnailImage),
+                imageUrl: product.imageUrl || product.thumbnailImage?.url || 'MISSING'
               });
             });
           }
           
           console.log(`[CONTEXT] Loaded ${context.products.length} products`);
           
-          // DEBUG: Verify products have quantity/stock field
           if (context.products.length > 0) {
-            const firstProduct = context.products[0];
-            const hasStock = 'stock' in firstProduct || 'quantity' in firstProduct;
-            // Use nullish coalescing to show 0 values correctly (0 || 'N/A' would show N/A incorrectly)
-            const stockValue = firstProduct.stock ?? firstProduct.quantity ?? 'N/A';
-            console.log(`[CONTEXT DEBUG] First product sample - Has stock field: ${hasStock}, Stock value: ${stockValue}`);
-            console.log(`[CONTEXT DEBUG] First product keys: ${Object.keys(firstProduct).join(', ')}`);
-            console.log(`[CONTEXT DEBUG] First product stock details: stock=${firstProduct.stock}, quantity=${firstProduct.quantity}, inStock=${firstProduct.inStock}`);
-            
-            // Check if variants have stock
-            if (firstProduct.variants && firstProduct.variants.length > 0) {
-              const firstVariant = firstProduct.variants[0];
-              const variantHasStock = 'stock' in firstVariant || 'quantity' in firstVariant;
-              const variantStockValue = firstVariant.stock ?? firstVariant.quantity ?? 'N/A';
-              console.log(`[CONTEXT DEBUG] First variant sample - Has stock field: ${variantHasStock}, Stock value: ${variantStockValue}`);
-              console.log(`[CONTEXT DEBUG] First variant stock details: stock=${firstVariant.stock}, quantity=${firstVariant.quantity}, inStock=${firstVariant.inStock}, available=${firstVariant.available}`);
-            }
+            const fp = context.products[0];
+            console.log(`[CONTEXT] First product: id=${fp.id}, slug=${fp.slug}, stockQuantity=${fp.stockQuantity}, inStock=${fp.inStock}`);
           }
           
           // Load categories for navigation
@@ -1886,13 +1896,12 @@ class DevServer {
             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}`;
+              if (!category.slug) {
+                category.slug = category.handle || category.name?.toLowerCase().replace(/\s+/g, '-') || String(category.id);
+              }
+              if (!category.handle) {
+                category.handle = category.slug;
               }
               return category;
             });
@@ -1915,39 +1924,41 @@ class DevServer {
             context.brands = [];
           }
           
-          // Load menus (via webstoreapi) - use axios from apiClient
-          // NOTE: Menus are loaded for navigation in header/footer sections
-          // They should be available in context for all page types
           try {
             const axios = require('axios');
-            console.log(`[CONTEXT] Loading menus from http://localhost:${this.mockApiPort}/webstoreapi/menus`);
             const menusResponse = await axios.get(`http://localhost:${this.mockApiPort}/webstoreapi/menus`);
-            const menusData = menusResponse.data;
-            context.menus = Array.isArray(menusData) ? menusData : (menusData.data?.menus || menusData.menus || []);
-            console.log(`[CONTEXT] ✅ Loaded ${context.menus.length} menus`);
-            
-            // DEBUG: Log menu details
-            if (context.menus.length > 0) {
-              context.menus.forEach((menu, idx) => {
-                const itemCount = menu.items?.length || 0;
-                console.log(`[CONTEXT DEBUG] Menu ${idx + 1}: ${menu.name || menu.id || 'unnamed'} (${itemCount} items)`);
-              });
-            } else {
-              console.warn('[CONTEXT DEBUG] ⚠️  No menus loaded - menus array is empty');
+            const rawMenus = menusResponse.data;
+            const allMenus = Array.isArray(rawMenus) ? rawMenus : (rawMenus.data?.menus || rawMenus.menus || []);
+
+            const menusData = {};
+            allMenus.forEach(menu => {
+              if (menu && menu.name) {
+                const normalizedName = menu.name.toLowerCase()
+                  .replace(/\s+menu$/i, '')
+                  .replace(/\s+/g, '_')
+                  .replace(/[^a-z0-9_]/g, '');
+                menusData[normalizedName] = menu;
+              }
+            });
+            menusData.all = allMenus;
+            context.menus = menusData;
+
+            const mainMenuData = allMenus.find(menu => menu && menu.type === 'Main Menu');
+            if (mainMenuData) {
+              if (mainMenuData.items && Array.isArray(mainMenuData.items)) {
+                mainMenuData.items.sort((a, b) => (a?.displayOrder || 0) - (b?.displayOrder || 0));
+              }
+              context.mainMenu = mainMenuData;
+            } else if (allMenus.length > 0) {
+              context.mainMenu = allMenus[0];
             }
-          } catch (error) {
-            console.error('[CONTEXT] ❌ Failed to load menus:', error.message);
-            console.error('[CONTEXT] Error details:', error.response?.status, error.response?.data);
-            context.menus = [];
-          }
 
-          // Set mainMenu for mega-menu fallback (header when no HeaderMenu widget)
-          let mainMenu = null;
-          if (context.menus && context.menus.length > 0) {
-            const main = context.menus.find((m) => (m.type || '').toLowerCase().trim() === 'main menu');
-            mainMenu = main || context.menus[0];
+            console.log(`[CONTEXT] Loaded ${allMenus.length} menus`);
+          } catch (error) {
+            console.error('[CONTEXT] Failed to load menus:', error.message);
+            context.menus = {};
+            context.mainMenu = null;
           }
-          context.mainMenu = mainMenu;
           
           // Load cart data
           try {
@@ -2030,18 +2041,27 @@ class DevServer {
         }
       } catch (error) {
         console.warn('[CONTEXT] Failed to load from mock API:', error.message);
-        // Fallback to default values
         context.shop = {
           name: 'My Store',
-          description: 'O2VEND Store',
-          domain: 'localhost:3000',
-          email: 'store@example.com'
+          domain: hostname,
+          currency: 'USD',
+          timezone: 'America/New_York',
+          language: 'en',
+          logo: '/assets/logo.png',
+          favicon: '/favicon.ico',
+          id: 1,
+          identifier: 'store',
+          companyName: 'My Store',
+          companyAddress: '',
+          companyPhoneNumber: '',
+          companyEmail: '',
+          settings: {}
         };
         context.widgets = {
           hero: [],
-          products: [],
+          content: [],
           footer: [],
-          content: []
+          header: []
         };
       }
     } else if (this.mode === 'real') {
@@ -2063,21 +2083,35 @@ class DevServer {
         context.shop = {
           name: storeName,
           domain: baseHost,
-          description: 'O2VEND Store',
-          email: storeSettings.companyEmail || 'store@example.com',
-          logo,
-          favicon,
           currency: storeSettings.currency || themeSettings.currency || 'USD',
+          currencySymbol: storeSettings.currencySymbol || '$',
+          timezone: storeSettings.timezone || 'America/New_York',
           language: storeSettings.language || themeSettings.language || 'en',
-          locale: themeSettings.locale || 'en-US',
-          settings: {
-            currency: storeSettings.currency || themeSettings.currency || 'USD',
-            currencySymbol: storeSettings.currencySymbol || storeSettings.currency_symbol || themeSettings.currency_symbol || themeSettings.currencySymbol || '$',
-            logo,
-            favicon
-          }
+          logo,
+          favicon,
+          id: storeInfo?.id || process.env.O2VEND_TENANT_ID || 1,
+          identifier: storeInfo?.identifier || 'store',
+          companyName: storeSettings.companyName || storeName,
+          companyAddress: storeSettings.companyAddress || '',
+          companyPhoneNumber: storeSettings.companyPhoneNumber || '',
+          companyEmail: storeSettings.companyEmail || '',
+          settings: storeSettings
+        };
+        context.store = {
+          id: context.shop.id,
+          identifier: context.shop.identifier,
+          name: context.shop.name,
+          settings: storeSettings,
+          companyName: context.shop.companyName,
+          companyAddress: context.shop.companyAddress,
+          companyPhoneNumber: context.shop.companyPhoneNumber,
+          companyEmail: context.shop.companyEmail
+        };
+        context.tenant = {
+          id: process.env.O2VEND_TENANT_ID || 1,
+          name: storeName,
+          settings: storeSettings
         };
-        context.tenant = { id: process.env.O2VEND_TENANT_ID || 'real' };
 
         if (process.env.O2VEND_LAYOUT_FULL === '1' || process.env.O2VEND_LAYOUT_FULL === 'true') {
           context.settings = context.settings || {};
@@ -2111,12 +2145,10 @@ class DevServer {
           const catRes = await webstoreApi.fetchCategories({ limit: 50, offset: 0 }, opts);
           const raw = catRes?.categories || catRes?.data?.categories || catRes || [];
           context.categories = raw.map((c) => {
-            const h = (c.handle || (c.name || '').toLowerCase().replace(/\s+/g, '-') || c.id || '').toString().replace(/^\s+|\s+$/g, '') || null;
+            const h = (c.handle || (c.name || '').toLowerCase().replace(/\s+/g, '-') || c.id || '').toString().trim() || null;
             if (h) {
               c.handle = c.handle || h;
               c.slug = c.slug || h;
-              c.url = `/${h}`;
-              c.link = `/${h}`;
             }
             return c;
           });
@@ -2134,23 +2166,36 @@ class DevServer {
         }
 
         try {
-          context.menus = await webstoreApi.fetchMenus(opts);
-          context.menus = Array.isArray(context.menus) ? context.menus : [];
-          let mainMenu = null;
-          if (context.menus.length > 0) {
-            const main = context.menus.find((m) => (m.type || '').toLowerCase().trim() === 'main menu');
-            const candidate = main || context.menus[0];
-            if (candidate && candidate.id) {
-              try {
-                mainMenu = await webstoreApi.fetchMenuById(candidate.id, opts);
-              } catch (e) {
-                /* ignore */
+          const allMenus = await webstoreApi.fetchMenus(opts);
+          const menusList = Array.isArray(allMenus) ? allMenus : [];
+          const menusData = {};
+          menusList.forEach(menu => {
+            if (menu && menu.name) {
+              const normalizedName = menu.name.toLowerCase()
+                .replace(/\s+menu$/i, '')
+                .replace(/\s+/g, '_')
+                .replace(/[^a-z0-9_]/g, '');
+              menusData[normalizedName] = menu;
+            }
+          });
+          menusData.all = menusList;
+          context.menus = menusData;
+
+          const mainMenuData = menusList.find(m => m && m.type === 'Main Menu');
+          const candidate = mainMenuData || menusList[0];
+          if (candidate && candidate.id) {
+            try {
+              const fullMenu = await webstoreApi.fetchMenuById(candidate.id, opts);
+              if (fullMenu && fullMenu.items && Array.isArray(fullMenu.items)) {
+                fullMenu.items.sort((a, b) => (a?.displayOrder || 0) - (b?.displayOrder || 0));
               }
+              context.mainMenu = fullMenu || candidate;
+            } catch (e) {
+              context.mainMenu = candidate;
             }
           }
-          context.mainMenu = mainMenu;
         } catch (e) {
-          context.menus = [];
+          context.menus = {};
           context.mainMenu = null;
         }
 
@@ -2335,199 +2380,81 @@ class DevServer {
    * @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
-      });
+      enriched.productId = numericMatch ? parseInt(numericMatch[0], 10) : enriched.id;
     }
-    
-    // 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
-    // Always use /products/{handle} so links target dev server (never external URLs)
-    const handle = enriched.handle || enriched.slug || enriched.id;
+
+    const handle = enriched.handle || enriched.slug || String(enriched.id || enriched.productId || '');
     const effectiveHandle = (handle && String(handle).trim() && String(handle) !== '#')
-      ? String(handle).trim().toLowerCase()
-      : (enriched.productId ? `product-${enriched.productId}`.toLowerCase() : null);
+      ? String(handle).trim().toLowerCase() : null;
+
     if (effectiveHandle) {
-      enriched.url = `/products/${effectiveHandle}`;
-      enriched.link = `/products/${effectiveHandle}`;
-      if (!enriched.handle || enriched.handle === '#' || enriched.handle === '') enriched.handle = effectiveHandle;
-      if (!enriched.slug || enriched.slug === '#' || enriched.slug === '') enriched.slug = effectiveHandle;
-    } 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)
-      });
+      enriched.url = effectiveHandle;
+      enriched.link = effectiveHandle;
+      if (!enriched.handle) enriched.handle = effectiveHandle;
+      if (!enriched.slug) enriched.slug = effectiveHandle;
     }
 
-    // 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'}`;
+      enriched.name = enriched.title;
     } 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;
+
+    if (enriched.variants && !enriched.variations) enriched.variations = enriched.variants;
+    else if (enriched.variations && !enriched.variants) enriched.variants = enriched.variations;
+
+    if (enriched.price == null && enriched.sellingPrice == null) {
+      const v = enriched.variants || enriched.variations;
+      enriched.price = (v && v.length > 0) ? (v[0].price || 0) : 0;
     }
-    
-    // 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.price == null) enriched.price = 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'
+        price: enriched.price,
+        mrp: enriched.compareAtPrice || enriched.comparePrice || 0
       };
-    } 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
+
+    if (!enriched.imageUrl && !enriched.thumbnailImage && (!enriched.images || enriched.images.length === 0)) {
       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'
-      };
+      enriched.thumbnailImage = enriched.imageUrl;
     }
-    
-    // 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;
+
+    this.enrichProductStockStatus(enriched);
+
+    return enriched;
+  }
+
+  /**
+   * Compute inStock and available flags matching production enrichProductStockStatus().
+   */
+  enrichProductStockStatus(product) {
+    const stockQuantity = product.stockQuantity || 0;
+    const stockTrackingIsEnabled = product.stockTrackingIsEnabled || false;
+    const isAllowToOrder = product.isAllowToOrder || false;
+
+    product.inStock = !stockTrackingIsEnabled || stockQuantity > 0;
+    product.available = !stockTrackingIsEnabled || stockQuantity > 0 || isAllowToOrder;
+
+    if (product.stockQuantity == null) {
+      const variants = product.variants || product.variations;
+      if (variants && variants.length > 0) {
+        product.stockQuantity = variants.reduce((sum, v) => sum + (v.stockQuantity || 0), 0);
+        product.inStock = !stockTrackingIsEnabled || product.stockQuantity > 0;
+        product.available = !stockTrackingIsEnabled || product.stockQuantity > 0 || isAllowToOrder;
       }
     }
-    
-    return enriched;
+
+    return product;
   }
 
   /**
@@ -2546,35 +2473,39 @@ class DevServer {
     if (n.Name != null && n.name == null) n.name = n.Name;
     if (n.Title != null && n.title == null) n.title = n.Title;
     if (n.Attributes != null && n.attributes == null) n.attributes = n.Attributes;
-    const t1 = n.ThumbnailImage1 || n.thumbnailImage1;
+
+    const t1 = n.ThumbnailImage1 || n.thumbnailImage || n.thumbnailImage;
     if (t1 != null) {
       const u = typeof t1 === 'string' ? t1 : (t1.url || t1.Url || t1.imageUrl || t1.ImageUrl);
       if (u) {
-        const a = typeof t1 === 'string' ? (n.name || n.title) : (t1.altText || t1.AltText || n.name || n.title);
-        n.thumbnailImage1 = { url: u, altText: a };
-        if (!n.thumbnailImage) n.thumbnailImage = n.thumbnailImage1;
-      } else if (!n.thumbnailImage1) n.thumbnailImage1 = t1;
+        n.thumbnailImage = u;
+        if (!n.imageUrl) n.imageUrl = u;
+      }
     }
+
     let imgs = n.images || n.Images;
     if (Array.isArray(imgs) && imgs.length > 0) {
       n.images = imgs.map((img) => {
         if (typeof img === 'string') return { url: img, altText: n.name || n.title };
         const u = img.url || img.Url || img.imageUrl || img.ImageUrl;
         const a = img.altText || img.AltText || n.name || n.title;
-        return u ? { url: u, altText: a } : (typeof img === 'object' ? { url: img, altText: a } : { url: String(img), altText: a });
+        return { url: u || '', altText: a };
       });
-    } else if (imgs) {
-      n.images = Array.isArray(imgs) ? imgs : [imgs];
     } else {
       const single = n.imageUrl || n.ImageUrl;
       if (single) n.images = [{ url: single, altText: n.name || n.title }];
     }
+
     const handle = (n.handle || n.slug || n.id || '').toString().trim();
-    const h = handle && handle !== '#' ? handle.toLowerCase() : (n.productId ? `product-${n.productId}` : null);
+    const h = handle && handle !== '#' ? handle.toLowerCase() : (n.productId ? String(n.productId) : null);
     if (h) {
-      n.url = `/products/${h}`;
-      n.link = `/products/${h}`;
+      n.url = h;
+      n.link = h;
+      if (!n.handle) n.handle = h;
+      if (!n.slug) n.slug = h;
     }
+
+    this.enrichProductStockStatus(n);
     return n;
   }
 
@@ -2680,7 +2611,7 @@ class DevServer {
     const products = context.collection?.products || [];
     const productCards = products.map(p => `
       <div style="background: #fff; border-radius: 8px; padding: 1rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
-        <a href="/products/${p.handle || p.id}">
+        <a href="/${p.slug || p.handle || p.id}">
           <img src="${p.images?.[0] || p.imageUrl || 'https://picsum.photos/seed/' + p.id + '/300/300'}" 
                alt="${p.title || p.name}" style="width: 100%; height: 200px; object-fit: cover; border-radius: 4px;">
           <h4 style="margin: 0.5rem 0;">${p.title || p.name}</h4>