@o2vend/theme-cli 1.0.33 → 1.0.35

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/webstoreapi-fetcher.js

@@ -0,0 +1,322 @@
+/**
+ * WebstoreAPI Fetcher (Real Mode)
+ * Thin HTTP client for public /webstoreapi/* endpoints only.
+ * No webstore internals, business logic, or service abstractions.
+ */
+
+const axios = require('axios');
+
+const DEFAULT_SECTIONS = ['hero', 'products', 'footer', 'content', 'header'];
+const TIMEOUT = parseInt(process.env.O2VEND_API_TIMEOUT, 10) || 10000;
+const DEBUG = process.env.DEBUG_WEBSTOREAPI === 'true' || process.env.DEBUG_WEBSTOREAPI === '1';
+
+function logRequest(method, path, status, extra = {}) {
+  const msg = `[webstoreapi] ${method} ${path} ${status}`;
+  if (DEBUG || status >= 400) {
+    const parts = [msg];
+    if (extra.bodySnippet) parts.push(extra.bodySnippet);
+    if (extra.headers) parts.push(JSON.stringify(extra.headers));
+    console.log(parts.join(' '));
+  }
+}
+
+function truncate(v, max = 300) {
+  const s = typeof v === 'string' ? v : JSON.stringify(v);
+  return s.length <= max ? s : s.slice(0, max) + '...';
+}
+
+/**
+ * Derive webstoreapi base URL from O2VEND_API_BASE_URL.
+ * Strips /shopfront/api/v2 if present.
+ * @returns {string} e.g. https://sareesdemo.myo2vend.com/webstoreapi
+ */
+function getWebstoreapiBaseUrl() {
+  let base = process.env.O2VEND_API_BASE_URL || '';
+  base = base.replace(/\/$/, '');
+  base = base.replace(/\/shopfront\/api\/v2\/?$/i, '');
+  base = base.replace(/\/webstoreapi\/?$/i, '');
+  return base ? `${base}/webstoreapi` : '';
+}
+
+/**
+ * Derive shopfront API base URL from O2VEND_API_BASE_URL.
+ * Used only for GET /storeinfo (store logo, favicon, name).
+ * @returns {string} e.g. https://sareesdemo.myo2vend.com/shopfront/api/v2
+ */
+function getShopfrontBaseUrl() {
+  let base = process.env.O2VEND_API_BASE_URL || '';
+  base = base.replace(/\/$/, '');
+  base = base.replace(/\/webstoreapi\/?$/i, '');
+  if (/\/shopfront\/api\/v2\/?$/i.test(base)) return base.replace(/\/$/, '');
+  base = base.replace(/\/shopfront\/api\/v2\/?$/i, '');
+  return base ? `${base}/shopfront/api/v2` : '';
+}
+
+/**
+ * Fetch store info from shopfront API (GET /storeinfo).
+ * Used in real mode for shop.logo, shop.favicon, shop.name.
+ * Requires O2VEND_API_KEY. On failure, returns null.
+ * @returns {Promise<{ logoUrl?: string, favouriteIconUrl?: string, name?: string, settings?: object } | null>}
+ */
+async function fetchStoreInfo() {
+  const base = getShopfrontBaseUrl();
+  const apiKey = process.env.O2VEND_API_KEY;
+  if (!base || !apiKey) return null;
+  const client = axios.create({
+    baseURL: base,
+    timeout: TIMEOUT,
+    headers: {
+      'Content-Type': 'application/json',
+      'X-O2VEND-SHOPFRONT-API-KEY': apiKey,
+      'User-Agent': 'O2VEND-Theme-CLI/1.0'
+    }
+  });
+  try {
+    const res = await client.get('/storeinfo');
+    const data = res.data || {};
+    const logoUrl = data.logoUrl ?? data.logourl;
+    const favouriteIconUrl = data.favouriteIconUrl ?? data.favouriteiconurl;
+    const name = data.name ?? data.Name;
+    const settings = data.settings || data.Settings || {};
+    return {
+      logoUrl: logoUrl || null,
+      favouriteIconUrl: favouriteIconUrl || null,
+      name: name || null,
+      settings
+    };
+  } catch (e) {
+    if (DEBUG) console.log('[webstoreapi] GET /storeinfo failed:', e.response?.status || e.message);
+    return null;
+  }
+}
+
+/**
+ * Create axios instance for webstoreapi calls.
+ * @param {Object} [opts] - { headers: { Cookie } }
+ * @returns {{ baseUrl: string, get: Function, post: Function }}
+ */
+function createFetcher(opts = {}) {
+  const baseUrl = getWebstoreapiBaseUrl();
+  const client = axios.create({
+    baseURL: baseUrl,
+    timeout: TIMEOUT,
+    headers: {
+      'Content-Type': 'application/json',
+      'User-Agent': 'O2VEND-Theme-CLI/1.0',
+      ...(opts.headers || {})
+    }
+  });
+
+  client.interceptors.response.use(
+    (r) => {
+      const method = (r.config?.method || 'get').toUpperCase();
+      const path = r.config?.url || r.config?.baseURL || '';
+      logRequest(method, path, r.status);
+      return r;
+    },
+    (err) => {
+      const method = (err.config?.method || 'get').toUpperCase();
+      const path = err.config?.url || err.config?.baseURL || '';
+      const status = err.response?.status;
+      const data = err.response?.data;
+      const bodySnippet = data != null ? truncate(data) : err.message;
+      logRequest(method, path, status || 'ERR', { bodySnippet });
+      if (status >= 400 && typeof data === 'object' && data.message) {
+        console.log(`[webstoreapi] error message: ${data.message}`);
+      }
+      return Promise.reject(err);
+    }
+  );
+
+  return {
+    baseUrl,
+    get: (path, config = {}) => client.get(path, config).then((r) => r.data),
+    post: (path, body, config = {}) => client.post(path, body, config).then((r) => r.data)
+  };
+}
+
+/**
+ * Convert products query (POST-style) to query string for GET /webstoreapi/products.
+ * @param {Object} p - { limit, offset, filter, searchText, ... }
+ * @returns {string}
+ */
+function productsQueryToParams(p) {
+  const q = new URLSearchParams();
+  const limit = p.limit != null ? parseInt(p.limit, 10) : 20;
+  const page = p.page != null ? parseInt(p.page, 10) : (p.offset != null ? Math.floor(parseInt(p.offset, 10) / limit) + 1 : 1);
+  q.set('page', String(Math.max(1, page)));
+  q.set('limit', String(Math.max(1, limit)));
+  if (p.searchText) q.set('searchText', p.searchText);
+  const cat = p.categoryId || (p.filter && p.filter.category) || '';
+  const brand = p.brandId || (p.filter && p.filter.brand) || '';
+  q.set('filter[category]', String(cat));
+  q.set('filter[brand]', String(brand));
+  if (p.sort && typeof p.sort === 'object' && p.sort.field) {
+    q.set('sort[field]', p.sort.field);
+  }
+  return q.toString();
+}
+
+/**
+ * Convert categories query to query string for GET /webstoreapi/categories.
+ * @param {Object} p - { limit, offset }
+ * @returns {string}
+ */
+function categoriesQueryToParams(p) {
+  const q = new URLSearchParams();
+  if (p.limit != null) q.set('limit', String(p.limit));
+  if (p.offset != null) q.set('offset', String(p.offset));
+  return q.toString();
+}
+
+/**
+ * Fetch products. GET /webstoreapi/products?...
+ * @param {Object} params - { limit, offset, filter, searchText, ... }
+ * @param {Object} [opts] - { headers: { Cookie } }
+ * @returns {Promise<{ products?: Array, Products?: Array, totalCount?: number, TotalCount?: number }>}
+ */
+async function fetchProducts(params = {}, opts = {}) {
+  const { get } = createFetcher(opts);
+  const qs = productsQueryToParams(params);
+  const path = qs ? `/products?${qs}` : '/products';
+  return get(path);
+}
+
+/**
+ * Fetch product by ID. GET /webstoreapi/products/:productId
+ * @param {string} id
+ * @param {Object} [opts]
+ * @returns {Promise<Object>}
+ */
+async function fetchProductById(id, opts = {}) {
+  const { get } = createFetcher(opts);
+  return get(`/products/${encodeURIComponent(id)}`);
+}
+
+/**
+ * Fetch categories. GET /webstoreapi/categories?...
+ * @param {Object} params - { limit, offset }
+ * @param {Object} [opts]
+ * @returns {Promise<{ categories?: Array, data?: { categories?: Array } }>}
+ */
+async function fetchCategories(params = {}, opts = {}) {
+  const { get } = createFetcher(opts);
+  const qs = categoriesQueryToParams(params);
+  const path = qs ? `/categories?${qs}` : '/categories';
+  return get(path);
+}
+
+/**
+ * Fetch brands. POST /webstoreapi/brands with body.
+ * @param {Object} params - { limit, offset }
+ * @param {Object} [opts]
+ * @returns {Promise<{ brands?: Array, data?: { brands?: Array } }>}
+ */
+async function fetchBrands(params = {}, opts = {}) {
+  const { post } = createFetcher(opts);
+  return post('/brands', params || {});
+}
+
+/**
+ * Fetch menus. GET /webstoreapi/menus
+ * @param {Object} [opts]
+ * @returns {Promise<Array|{ data?: { menus?: Array }, menus?: Array }>}
+ */
+async function fetchMenus(opts = {}) {
+  const { get } = createFetcher(opts);
+  const data = await get('/menus');
+  if (Array.isArray(data)) return data;
+  return data?.data?.menus || data?.menus || [];
+}
+
+/**
+ * Fetch menu by ID. GET /webstoreapi/menus/:id
+ * @param {string} id
+ * @param {Object} [opts]
+ * @returns {Promise<Object>}
+ */
+async function fetchMenuById(id, opts = {}) {
+  const { get } = createFetcher(opts);
+  return get(`/menus/${encodeURIComponent(id)}`);
+}
+
+/**
+ * Fetch cart. GET /webstoreapi/carts (session-based; pass Cookie).
+ * @param {Object} [opts] - { headers: { Cookie: req.headers.cookie } }
+ * @returns {Promise<{ data?: Object }>}
+ */
+async function fetchCart(opts = {}) {
+  const { get } = createFetcher(opts);
+  return get('/carts');
+}
+
+/**
+ * Fetch widgets for a section. GET /webstoreapi/sections/widgets/:page/:section
+ * @param {string} page - e.g. 'home'
+ * @param {string} section - e.g. 'hero', 'products'
+ * @param {Object} [opts]
+ * @returns {Promise<{ widgets?: Array }>}
+ */
+async function fetchSectionsWidgets(page, section, opts = {}) {
+  const { get } = createFetcher(opts);
+  const data = await get(`/sections/widgets/${encodeURIComponent(page)}/${encodeURIComponent(section)}`);
+  const list = Array.isArray(data?.widgets) ? data.widgets : [];
+  return { widgets: list };
+}
+
+/**
+ * Fetch all sections widgets and merge into { hero: [], products: [], ... }.
+ * @param {string} [page] - e.g. 'home'
+ * @param {string[]} [sections]
+ * @param {Object} [opts]
+ * @returns {Promise<Object>}
+ */
+async function fetchWidgetsBySections(page = 'home', sections = DEFAULT_SECTIONS, opts = {}) {
+  const out = {};
+  for (const s of sections) {
+    out[s] = [];
+  }
+  for (const section of sections) {
+    try {
+      const { widgets } = await fetchSectionsWidgets(page, section, opts);
+      out[section] = Array.isArray(widgets) ? widgets : [];
+    } catch (e) {
+      out[section] = [];
+    }
+  }
+  return out;
+}
+
+/**
+ * Fetch CMS page. GET /webstoreapi/pages/:handle
+ * @param {string} handle
+ * @param {Object} [opts]
+ * @returns {Promise<Object|null>} null on 404
+ */
+async function fetchPage(handle, opts = {}) {
+  const { get } = createFetcher(opts);
+  try {
+    return await get(`/pages/${encodeURIComponent(handle)}`);
+  } catch (e) {
+    if (e.response?.status === 404) return null;
+    throw e;
+  }
+}
+
+module.exports = {
+  getWebstoreapiBaseUrl,
+  getShopfrontBaseUrl,
+  createFetcher,
+  fetchProducts,
+  fetchProductById,
+  fetchCategories,
+  fetchBrands,
+  fetchMenus,
+  fetchMenuById,
+  fetchCart,
+  fetchSectionsWidgets,
+  fetchWidgetsBySections,
+  fetchPage,
+  fetchStoreInfo,
+  DEFAULT_SECTIONS
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@o2vend/theme-cli",
-  "version": "1.0.33",
+  "version": "1.0.35",
   "description": "O2VEND Theme Development CLI - Standalone tool for local theme development",
   "bin": {
     "o2vend": "./bin/o2vend"
@@ -22,28 +22,28 @@
     "unpublish-and-republish": "node scripts/unpublish-and-republish.js"
   },
   "dependencies": {
+    "archiver": "^6.0.1",
+    "axios": "^1.6.0",
+    "boxen": "^7.1.1",
+    "chalk": "^4.1.2",
+    "chokidar": "^3.5.3",
     "commander": "^11.0.0",
+    "dotenv": "^16.3.1",
     "express": "^4.18.2",
+    "fs-extra": "^11.1.1",
+    "glob": "^10.3.10",
+    "http-proxy-middleware": "^2.0.6",
+    "inquirer": "^9.2.0",
     "liquidjs": "^10.7.0",
-    "axios": "^1.6.0",
+    "listr": "^0.14.3",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
+    "node-cache": "^5.1.2",
+    "open": "^8.4.2",
+    "ora": "^5.4.1",
     "slugify": "^1.6.6",
-    "chokidar": "^3.5.3",
     "socket.io": "^4.7.0",
-    "chalk": "^4.1.2",
-    "inquirer": "^9.2.0",
-    "ora": "^5.4.1",
-    "boxen": "^7.1.1",
-    "table": "^6.8.3",
-    "listr": "^0.14.3",
-    "dotenv": "^16.3.1",
-    "archiver": "^6.0.1",
-    "glob": "^10.3.10",
-    "fs-extra": "^11.1.1",
-    "node-cache": "^5.1.2",
-    "http-proxy-middleware": "^2.0.6",
-    "open": "^8.4.2"
+    "table": "^6.8.3"
   },
   "engines": {
     "node": ">=18.0.0"