@o2vend/theme-cli 1.0.32 → 1.0.34

package/lib/lib/liquid-engine.js

@@ -280,13 +280,25 @@ function registerCustomTags(liquid, themePath) {
   };
 
   // Override the include tag to handle widget and snippet paths
+  // CRITICAL: Include tag must parse hash arguments like 'product: product' to match production behavior
   liquid.registerTag('include', {
     parse: function(tagToken, remainTokens) {
-      // Parse arguments - handle both 'snippets/pagination' and 'snippets/pagination', pagination formats
+      // Parse arguments - handle 'snippets/product-card', product: product format
       const args = tagToken.args.trim();
-      // Extract file path (first argument before comma if present)
-      const fileMatch = args.match(/^['"]([^'"]+)['"]/);
-      this.file = fileMatch ? fileMatch[1] : args.split(',')[0].trim().replace(/^['"]|['"]$/g, '');
+      
+      // Split by comma to separate file path from hash parameters
+      const commaIndex = args.indexOf(',');
+      if (commaIndex > 0) {
+        this.fileArg = args.substring(0, commaIndex).trim();
+        this.hashArgs = args.substring(commaIndex + 1).trim();
+      } else {
+        this.fileArg = args;
+        this.hashArgs = '';
+      }
+      
+      // Extract file path - remove quotes if present
+      const fileMatch = this.fileArg.match(/^['"]([^'"]+)['"]/);
+      this.file = fileMatch ? fileMatch[1] : this.fileArg.replace(/^['"]|['"]$/g, '');
     },
     render: async function(scope, hash) {
       let filePath = this.file;
@@ -298,7 +310,7 @@ function registerCustomTags(liquid, themePath) {
       // Clean up file path
       filePath = filePath.trim().replace(/^['"]|['"]$/g, '');
       
-      // Get full context for snippets/widgets
+      // Get full context for snippets/widgets - merge parent scope (for shop, settings, etc.)
       const scopeContexts = Array.isArray(scope?.contexts) ? scope.contexts : [];
       const primaryScope = scopeContexts.length > 0
         ? scopeContexts[0]
@@ -309,12 +321,37 @@ function registerCustomTags(liquid, themePath) {
         ? { ...currentRenderingContext, ...primaryScope }
         : primaryScope;
       
+      // CRITICAL: Parse hash arguments if provided (e.g., "product: product")
+      // Hash params override parent scope values, matching LiquidJS include behavior
+      const includeContext = { ...fullContext };
+      if (this.hashArgs) {
+        const hashPairs = this.hashArgs.split(',').map(pair => pair.trim());
+        for (const pair of hashPairs) {
+          const colonIndex = pair.indexOf(':');
+          if (colonIndex > 0) {
+            const key = pair.substring(0, colonIndex).trim();
+            const valueVar = pair.substring(colonIndex + 1).trim();
+            if (key && valueVar) {
+              // Use scope.get() to resolve the value variable (handles loop variables correctly!)
+              try {
+                const value = await scope.get(valueVar.split('.'));
+                if (value !== undefined && value !== null) {
+                  includeContext[key] = value;
+                }
+              } catch (error) {
+                // Silently skip unresolved hash params
+              }
+            }
+          }
+        }
+      }
+      
       // Handle widget paths
       if (filePath.startsWith('widgets/')) {
         const widgetName = filePath.replace(/^widgets\//, '').replace(/\.liquid$/, '');
         const widgetPath = path.join(themePath, 'widgets', `${widgetName}.liquid`);
         if (fs.existsSync(widgetPath)) {
-          return await liquid.parseAndRender(fs.readFileSync(widgetPath, 'utf8'), fullContext);
+          return await liquid.parseAndRender(fs.readFileSync(widgetPath, 'utf8'), includeContext);
         }
       }
       
@@ -323,7 +360,7 @@ function registerCustomTags(liquid, themePath) {
         const snippetName = filePath.replace(/^snippets\//, '').replace(/\.liquid$/, '');
         const snippetPath = path.join(themePath, 'snippets', `${snippetName}.liquid`);
         if (fs.existsSync(snippetPath)) {
-          return await liquid.parseAndRender(fs.readFileSync(snippetPath, 'utf8'), fullContext);
+          return await liquid.parseAndRender(fs.readFileSync(snippetPath, 'utf8'), includeContext);
         } else {
           console.warn(`[INCLUDE] Snippet not found: ${snippetPath}`);
         }
@@ -332,19 +369,19 @@ function registerCustomTags(liquid, themePath) {
       // Try to resolve file in snippets directory (default location)
       const snippetPath = path.join(themePath, 'snippets', `${filePath}.liquid`);
       if (fs.existsSync(snippetPath)) {
-        return await liquid.parseAndRender(fs.readFileSync(snippetPath, 'utf8'), fullContext);
+        return await liquid.parseAndRender(fs.readFileSync(snippetPath, 'utf8'), includeContext);
       }
       
       // Try direct path
       const resolvedPath = path.join(themePath, filePath);
       if (fs.existsSync(resolvedPath)) {
-        return await liquid.parseAndRender(fs.readFileSync(resolvedPath, 'utf8'), fullContext);
+        return await liquid.parseAndRender(fs.readFileSync(resolvedPath, 'utf8'), includeContext);
       }
       
       // Try with .liquid extension
       const resolvedPathWithExt = `${resolvedPath}.liquid`;
       if (fs.existsSync(resolvedPathWithExt)) {
-        return await liquid.parseAndRender(fs.readFileSync(resolvedPathWithExt, 'utf8'), fullContext);
+        return await liquid.parseAndRender(fs.readFileSync(resolvedPathWithExt, 'utf8'), includeContext);
       }
       
       console.warn(`[INCLUDE] File not found: ${filePath} (tried: ${snippetPath}, ${resolvedPath}, ${resolvedPathWithExt})`);
@@ -686,9 +723,44 @@ async function renderWithLayout(liquid, templatePath, context, themePath) {
         categories: context.categories?.length || 0,
         brands: context.brands?.length || 0,
         menus: context.menus?.length || 0,
-        cart: context.cart?.itemCount || 0
+        cart: context.cart?.itemCount || 0,
+        collection: context.collection ? {
+          title: context.collection.title || context.collection.name,
+          products: context.collection.products?.length || 0
+        } : null
       };
       console.log(`[RENDER] ${templatePath} - Context:`, JSON.stringify(contextSummary));
+      
+      // Detailed product logging
+      if (context.products && context.products.length > 0) {
+        const sampleProduct = context.products[0];
+        console.log(`[RENDER] ${templatePath} - Sample product data:`, {
+          id: sampleProduct.id,
+          title: sampleProduct.title || sampleProduct.name,
+          url: sampleProduct.url || sampleProduct.link,
+          price: sampleProduct.price || sampleProduct.sellingPrice,
+          stock: sampleProduct.stock,
+          inStock: sampleProduct.inStock,
+          hasImage: !!(sampleProduct.imageUrl || sampleProduct.thumbnailImage1),
+          imageUrl: sampleProduct.imageUrl || sampleProduct.thumbnailImage1?.url,
+          categoryId: sampleProduct.categoryId
+        });
+      } else {
+        console.warn(`[RENDER] ${templatePath} - ⚠️  No products in context!`);
+      }
+      
+      // Check collection products
+      if (context.collection && context.collection.products) {
+        console.log(`[RENDER] ${templatePath} - Collection products: ${context.collection.products.length}`);
+        if (context.collection.products.length > 0) {
+          const sample = context.collection.products[0];
+          console.log(`[RENDER] ${templatePath} - Sample collection product:`, {
+            id: sample.id,
+            title: sample.title || sample.name,
+            url: sample.url || sample.link
+          });
+        }
+      }
     
     let templateContent = fs.readFileSync(fullTemplatePath, 'utf-8');
     

package/lib/lib/mock-data.js

@@ -65,6 +65,25 @@ function generateMockProducts(count = 20) {
   console.log(`[MOCK DATA] Generating ${count} mock products with variations and stock...`);
   const products = [];
   
+  // Category mapping - map category names to category IDs (matching generateMockCategories order)
+  const categoryMap = {
+    'Electronics': 'category-1',
+    'Clothing': 'category-2',
+    'Accessories': 'category-3',
+    'Home & Garden': 'category-4',
+    'Home': 'category-4', // Alias for Home & Garden
+    'Sports & Fitness': 'category-5',
+    'Sports': 'category-5', // Alias for Sports & Fitness
+    'Books & Media': 'category-6',
+    'Toys & Games': 'category-7',
+    'Beauty & Health': 'category-8',
+    'Automotive': 'category-9',
+    'Food & Beverages': 'category-10',
+    'Furniture': 'category-4', // Map Furniture to Home & Garden
+    'Office': 'category-6', // Map Office to Books & Media (or could be separate)
+    'Footwear': 'category-2' // Map Footwear to Clothing
+  };
+  
   // Product data with images from picsum.photos (reliable placeholder service)
   const productData = [
     { name: 'Wireless Headphones', category: 'Electronics', imageId: 1 },
@@ -115,7 +134,13 @@ function generateMockProducts(count = 20) {
     const productId = `product-${i + 1}`;
     const basePrice = Math.floor(Math.random() * 50000) + 1000; // $10 to $500 (in cents)
     const comparePrice = basePrice * 1.5;
-    const productName = productNames[i % productNames.length];
+    const productTemplate = productData[i % productData.length];
+    const productName = productTemplate.name;
+    const productCategory = productTemplate.category;
+    const productImageId = productTemplate.imageId;
+    
+    // Get categoryId from category name using categoryMap
+    const categoryId = categoryMap[productCategory] || 'category-1'; // Default to Electronics if not found
     
     // Determine stock quantity - mix of low stock, high stock, and out of stock
     const stockType = i % 5;
@@ -278,18 +303,19 @@ function generateMockProducts(count = 20) {
       stock: totalStock,
       stockQuantity: totalStock, // Alternative property for stock
       sku: `SKU-${i + 1}`,
-      categoryId: `category-${(i % 10) + 1}`,
+      categoryId: categoryId, // Use mapped categoryId based on product category
+      category: productCategory, // Also include category name for reference
       brandId: `brand-${(i % 8) + 1}`,
       // Primary thumbnail for product cards
       thumbnailImage1: {
-        url: `https://picsum.photos/seed/${productData[i % productData.length].imageId}/800/800`,
+        url: `https://picsum.photos/seed/${productImageId}/800/800`,
         altText: productName
       },
-      imageUrl: `https://picsum.photos/seed/${productData[i % productData.length].imageId}/800/800`,
+      imageUrl: `https://picsum.photos/seed/${productImageId}/800/800`,
       images: [
         {
           id: `img-${i + 1}-1`,
-          url: `https://picsum.photos/seed/${productData[i % productData.length].imageId}/800/800`,
+          url: `https://picsum.photos/seed/${productImageId}/800/800`,
           alt: productName,
           altText: productName,
           width: 800,
@@ -297,7 +323,7 @@ function generateMockProducts(count = 20) {
         },
         {
           id: `img-${i + 1}-2`,
-          url: `https://picsum.photos/seed/${productData[i % productData.length].imageId + 100}/800/800`,
+          url: `https://picsum.photos/seed/${productImageId + 100}/800/800`,
           alt: `${productName} - View 2`,
           altText: `${productName} - View 2`,
           width: 800,
@@ -305,7 +331,7 @@ function generateMockProducts(count = 20) {
         },
         {
           id: `img-${i + 1}-3`,
-          url: `https://picsum.photos/seed/${productData[i % productData.length].imageId + 200}/800/800`,
+          url: `https://picsum.photos/seed/${productImageId + 200}/800/800`,
           alt: `${productName} - View 3`,
           altText: `${productName} - View 3`,
           width: 800,
@@ -342,10 +368,22 @@ function generateMockProducts(count = 20) {
   const productsWithVariations = products.filter(p => (p.variants?.length || 0) > 1).length;
   const productsWithOptions = products.filter(p => (p.options?.length || 0) > 0).length;
   const outOfStock = products.filter(p => !p.inStock || (p.stock || 0) === 0).length;
+  
+  // Log category distribution
+  const categoryDistribution = {};
+  products.forEach(p => {
+    const cat = p.categoryId || 'unknown';
+    categoryDistribution[cat] = (categoryDistribution[cat] || 0) + 1;
+  });
+  const categorySummary = Object.entries(categoryDistribution)
+    .map(([cat, count]) => `${cat}: ${count}`)
+    .join(', ');
+  
   console.log(`[MOCK DATA] ✅ Generated ${products.length} products:`);
   console.log(`  - With variations: ${productsWithVariations}`);
   console.log(`  - With options: ${productsWithOptions}`);
   console.log(`  - Out of stock: ${outOfStock}`);
+  console.log(`  - Category distribution: ${categorySummary}`);
   
   return products;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@o2vend/theme-cli",
-  "version": "1.0.32",
+  "version": "1.0.34",
   "description": "O2VEND Theme Development CLI - Standalone tool for local theme development",
   "bin": {
     "o2vend": "./bin/o2vend"