@zohofinance/commerce 2.0.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohofinance/commerce",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "ts-dist/index.js",
   "bin": {
     "zcommerce": "ts-dist/index.js"

package/ts-dist/commands/serve-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"serve-theme.d.ts","sourceRoot":"","sources":["../../src/commands/serve-theme.ts"],"names":[],"mappings":"AA4DA,iBAAe,UAAU,CACvB,UAAU,CAAC,EAAE,MAAM,EACnB,SAAS,CAAC,EAAE,OAAO,EACnB,aAAa,CAAC,EAAE,OAAO,EACvB,OAAO,UAAO,EACd,QAAQ,CAAC,EAAE,MAAM,iBA28ClB;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"serve-theme.d.ts","sourceRoot":"","sources":["../../src/commands/serve-theme.ts"],"names":[],"mappings":"AA4DA,iBAAe,UAAU,CACvB,UAAU,CAAC,EAAE,MAAM,EACnB,SAAS,CAAC,EAAE,OAAO,EACnB,aAAa,CAAC,EAAE,OAAO,EACvB,OAAO,UAAO,EACd,QAAQ,CAAC,EAAE,MAAM,iBA2oDlB;AAED,eAAe,UAAU,CAAC"}

package/ts-dist/commands/serve-theme.js

@@ -749,7 +749,7 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
     // Runtime fields added by the CLI on section/block root objects — must NOT be written to disk.
     // NOTE: display_name inside settings values (e.g. {display_name:"Full Width",value:"full"}) is
     // legitimate theme data — we only strip it at the section/block root level, not inside settings.
-    const COMPONENT_RUNTIME_FIELDS = new Set(['id', 'display_name', 'settingid', 'zcommerce_attributes', 'block_key']);
+    const COMPONENT_RUNTIME_FIELDS = new Set(['id', 'display_name', 'settingid', 'zcommerce_attributes', 'block_key', 'available_sections', 'available_blocks']);
     // Clean a single section or block object: strip runtime fields from root, recurse into blocks,
     // but leave settings values entirely untouched (they may contain legitimate display_name/handle).
     function cleanComponentForDisk(obj) {
@@ -774,11 +774,11 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
         }
         return out;
     }
-    // Clean the full page/group JSON: only touches the sections map, leaves order/name/type intact.
     function cleanFullJsonForDisk(json) {
         const sections = json.sections;
-        if (!sections || typeof sections !== 'object' || Array.isArray(sections))
+        if (!sections || typeof sections !== 'object' || Array.isArray(sections)) {
             return json;
+        }
         const cleanedSections = {};
         for (const [sk, sv] of Object.entries(sections)) {
             cleanedSections[sk] = sv && typeof sv === 'object' && !Array.isArray(sv)
@@ -991,6 +991,48 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
             next(error);
         }
     });
+    // Re-renders the full page with in-memory settings override (no disk write).
+    // Used by the editor when theme settings change so the preview updates immediately.
+    app.post('/_editor/renderpage', async (req, res, next) => {
+        const engineInternal = engine.engine;
+        try {
+            const body = req.body;
+            const settingsData = body.settingsData;
+            const pageName = body.pageName || 'index';
+            const route = STOREFRONT_ROUTES.find((r) => r.pageTemplate === pageName)
+                || STOREFRONT_ROUTES.find((r) => r.expressPath === `/${pageName}`)
+                || STOREFRONT_ROUTES.find((r) => r.expressPath.split('/')[1]?.startsWith(pageName))
+                || STOREFRONT_ROUTES[0];
+            const apiPath = resolveApiPath(route, {});
+            const data = await fetchPageData(apiPath);
+            // Temporarily override runtimeGlobals.settings so the engine renders with
+            // the new values. Restored in the finally block regardless of outcome.
+            const savedSettings = runtimeGlobals.settings;
+            if (settingsData)
+                runtimeGlobals.settings = settingsData;
+            engineInternal.__editorMode = true;
+            engineInternal.__editorJsonType = 'template';
+            try {
+                const { html, error } = await engine.renderJSONTemplates({
+                    pathName: resolvePageTemplate(route.pageTemplate),
+                    data,
+                });
+                if (error) {
+                    res.status(500).json({ error: String(error) });
+                    return;
+                }
+                res.json({ html });
+            }
+            finally {
+                runtimeGlobals.settings = savedSettings;
+                engineInternal.__editorMode = false;
+            }
+        }
+        catch (error) {
+            engineInternal.__editorMode = false;
+            next(error);
+        }
+    });
     app.post('/_editor/rendersection', async (req, res, next) => {
         try {
             const body = req.body;
@@ -1127,39 +1169,106 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
     app.get('/_editor/availablesections', async (req, res, next) => {
         try {
             const needHtml = req.query.needHtml === 'true';
+            const jsonType = req.query.jsonType || 'template';
+            const pageName = req.query.pageName || 'index';
             const sectionsDir = path.join(cwd, 'sections');
             if (!fs.existsSync(sectionsDir)) {
                 res.json([]);
                 return;
             }
+            let templateName;
+            if (jsonType === 'header') {
+                templateName = 'header-group';
+            }
+            else if (jsonType === 'footer') {
+                templateName = 'footer-group';
+            }
+            else {
+                templateName = pageName === 'home' ? 'index' : pageName;
+            }
+            let currentTemplateJson = { sections: {}, order: [] };
+            try {
+                let jsonPath;
+                if (jsonType === 'header') {
+                    jsonPath = path.join(cwd, 'sections', 'header-group.json');
+                }
+                else if (jsonType === 'footer') {
+                    jsonPath = path.join(cwd, 'sections', 'footer-group.json');
+                }
+                else {
+                    jsonPath = path.join(cwd, 'pages', `${templateName}.json`);
+                }
+                if (fs.existsSync(jsonPath)) {
+                    currentTemplateJson = JSON.parse(fs.readFileSync(jsonPath, 'utf-8'));
+                }
+            }
+            catch { /* use defaults */ }
+            const currentSections = (currentTemplateJson.sections || {});
+            const currentOrder = (currentTemplateJson.order || []);
+            const availableSections = [];
             const files = fs.readdirSync(sectionsDir).filter((f) => f.endsWith('.liquid'));
-            const sections = files.map((file) => {
+            for (const file of files) {
                 const sectionType = file.replace('.liquid', '');
                 const content = fs.readFileSync(path.join(sectionsDir, file), 'utf-8');
                 const schemaMatch = content.match(/{%\s*schema\s*%}([\s\S]*?){%\s*endschema\s*%}/);
-                let name = sectionType;
-                let category;
-                if (schemaMatch) {
-                    try {
-                        const schema = JSON.parse(schemaMatch[1].trim());
-                        const resolved = resolveSchemaT({ name: schema.name || sectionType, settings: [], blocks: [] }, cwd);
-                        name = resolved.name || sectionType;
-                        category = schema.category;
+                if (!schemaMatch)
+                    continue;
+                let schema;
+                try {
+                    schema = JSON.parse(schemaMatch[1].trim());
+                }
+                catch {
+                    continue;
+                }
+                const templates = schema?.available_in?.templates;
+                if (!Array.isArray(templates) || !templates.includes(templateName)) {
+                    continue;
+                }
+                const presets = schema.presets;
+                if (!Array.isArray(presets) || presets.length === 0) {
+                    continue;
+                }
+                if (typeof schema.limit === 'number') {
+                    let count = 0;
+                    for (const key of currentOrder) {
+                        if (currentSections[key]?.type === sectionType)
+                            count++;
+                    }
+                    if (count >= schema.limit) {
+                        continue;
                     }
-                    catch { /* skip */ }
                 }
-                return { section_name: sectionType, name, category };
-            });
+                for (let p = 0; p < presets.length; p++) {
+                    const preset = presets[p];
+                    if (!preset)
+                        continue;
+                    const uuid = Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
+                    const sectionName = `${sectionType}-additional_section-${uuid}`;
+                    const resolved = resolveSchemaT({ name: preset.name || sectionType, settings: [], blocks: [] }, cwd);
+                    const displayName = resolved.name || preset.name || sectionType;
+                    availableSections.push({
+                        section_name: sectionName,
+                        display_name: displayName,
+                        name: displayName,
+                        preset_index: p,
+                        category: schema.category,
+                        _sectionType: sectionType,
+                    });
+                }
+            }
             if (!needHtml) {
-                res.json(sections);
+                res.json(availableSections.map(({ _sectionType: _, ...s }) => s));
                 return;
             }
-            // Render HTML for requested section names using default section data.
-            const sectionNames = req.query.sectionNames
+            const requestedNames = req.query.sectionNames
                 ? JSON.parse(req.query.sectionNames)
-                : sections.map((s) => s.section_name);
-            const renderedMap = await renderSectionsForResponse(sectionNames, {});
-            // Build CSS link tags from assets directory so previews render with theme styles.
+                : availableSections.map((s) => s.section_name);
+            const baseTypeFor = (name) => {
+                const idx = name.indexOf('-additional_section-');
+                return idx >= 0 ? name.substring(0, idx) : name;
+            };
+            const typesToRender = [...new Set(requestedNames.map(baseTypeFor))];
+            const renderedMap = await renderSectionsForResponse(typesToRender, {});
             const assetsDir = path.join(cwd, 'assets');
             const cssLinks = fs.existsSync(assetsDir)
                 ? fs.readdirSync(assetsDir)
@@ -1168,13 +1277,45 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
                     .join('')
                 : '';
             const cliOrigin = `http://localhost:${port}`;
-            const results = sectionNames.map((sectionType) => {
-                const entry = sections.find((s) => s.section_name === sectionType);
-                const sectionHtml = (renderedMap[sectionType] || '')
+            const displayNameForType = new Map();
+            for (const entry of availableSections) {
+                if (!displayNameForType.has(entry._sectionType)) {
+                    displayNameForType.set(entry._sectionType, entry.display_name);
+                }
+            }
+            const presetSettingsForType = new Map();
+            for (const entry of availableSections) {
+                if (!presetSettingsForType.has(entry._sectionType)) {
+                    presetSettingsForType.set(entry._sectionType, {});
+                }
+            }
+            for (const [sType] of presetSettingsForType) {
+                try {
+                    const content = fs.readFileSync(path.join(sectionsDir, `${sType}.liquid`), 'utf-8');
+                    const sm = content.match(/{%\s*schema\s*%}([\s\S]*?){%\s*endschema\s*%}/);
+                    if (sm) {
+                        const sc = JSON.parse(sm[1].trim());
+                        if (Array.isArray(sc.presets) && sc.presets[0]?.settings) {
+                            presetSettingsForType.set(sType, sc.presets[0].settings);
+                        }
+                    }
+                }
+                catch { /* skip */ }
+            }
+            const results = requestedNames.map((reqName) => {
+                const baseType = baseTypeFor(reqName);
+                const sectionHtml = (renderedMap[baseType] || '')
                     .replace(/(['"(])\/assets\//g, `$1${cliOrigin}/assets/`)
                     .replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, '');
                 const html = `<!DOCTYPE html><html><head><meta charset="utf-8">${cssLinks}</head><body>${sectionHtml}</body></html>`;
-                return { section_name: sectionType, display_name: entry?.name || sectionType, name: entry?.name || sectionType, category: entry?.category, html };
+                const displayName = displayNameForType.get(baseType) || baseType;
+                const sectionJson = {
+                    type: baseType,
+                    settings: presetSettingsForType.get(baseType) || {},
+                    blocks: {},
+                    block_order: [],
+                };
+                return { section_name: reqName, display_name: displayName, name: displayName, sectionJson, html };
             });
             res.json(results);
         }
@@ -1182,6 +1323,44 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
             next(error);
         }
     });
+    app.get('/_editor/themesettings', (req, res, next) => {
+        try {
+            const settingsDir = path.join(cwd, 'settings');
+            let settings_schema = [];
+            const schemaPath = path.join(settingsDir, 'schema.json');
+            if (fs.existsSync(schemaPath)) {
+                try {
+                    const raw = JSON.parse(fs.readFileSync(schemaPath, 'utf-8'));
+                    settings_schema = resolveSchemaT(raw, cwd);
+                }
+                catch { /* use empty */ }
+            }
+            let settings_data = { selected: {}, presets: {} };
+            const themePath = path.join(settingsDir, 'theme.json');
+            if (fs.existsSync(themePath)) {
+                try {
+                    settings_data = JSON.parse(fs.readFileSync(themePath, 'utf-8'));
+                    if (!settings_data.selected)
+                        settings_data.selected = {};
+                    const { selected, presets } = settings_data;
+                    if (selected && typeof selected.preset_name === 'string' && presets) {
+                        const preset = presets[selected.preset_name];
+                        if (preset && typeof preset === 'object') {
+                            settings_data = {
+                                ...settings_data,
+                                selected: { ...preset, preset_name: selected.preset_name },
+                            };
+                        }
+                    }
+                }
+                catch { /* use defaults */ }
+            }
+            res.json({ settings_schema, settings_data });
+        }
+        catch (error) {
+            next(error);
+        }
+    });
     // Persists the full editor JSON to disk (for structural changes: add/delete/reorder sections).
     app.post('/_editor/savejson', (req, res, next) => {
         try {
@@ -1238,7 +1417,8 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
         }
         res.set('Cache-Control', 'no-store').send('OK');
     });
-    app.use((err, _req, res) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    app.use((err, _req, res, _next) => {
         if (res.headersSent) {
             return;
         }

package/ts-dist/utils/editor-attributes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor-attributes.d.ts","sourceRoot":"","sources":["../../src/utils/editor-attributes.ts"],"names":[],"mappings":"AAAA,wBAAgB,yBAAyB,CACvC,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,WAAW,CAAC,EAAE,MAAM,GACnB,MAAM,CAUR;AAED,wBAAgB,6BAA6B,CAC3C,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,WAAW,CAAC,EAAE,MAAM,GACnB,MAAM,CAYR"}
+{"version":3,"file":"editor-attributes.d.ts","sourceRoot":"","sources":["../../src/utils/editor-attributes.ts"],"names":[],"mappings":"AAAA,wBAAgB,yBAAyB,CACvC,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,WAAW,CAAC,EAAE,MAAM,GACnB,MAAM,CASR;AAED,wBAAgB,6BAA6B,CAC3C,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,WAAW,CAAC,EAAE,MAAM,GACnB,MAAM,CAWR"}

package/ts-dist/utils/editor-attributes.js

@@ -2,10 +2,9 @@ export function buildSectionComponentAttr(sectionType, sectionKey, jsonType, dis
     return JSON.stringify({
         id: `section_${sectionKey}`,
         'data-zcommerce-section-id': '',
-        'data-zcommerce-component-name': sectionType,
+        'data-zcommerce-component-name': displayName || sectionType,
         'data-zcommerce-component-key': `section_${sectionKey}`,
         'data-zcommerce-json-type': jsonType,
-        'data-zcommerce-display-name': displayName || sectionType,
         settingid: `setting_section_${sectionType}`
     });
 }
@@ -14,10 +13,9 @@ export function buildBlockZcommerceAttributes(blockType, blockKey, sectionKey, j
     const attrJson = JSON.stringify({
         id,
         'data-zcommerce-section-id': `section_${sectionKey}`,
-        'data-zcommerce-component-name': blockType,
+        'data-zcommerce-component-name': displayName || blockType,
         'data-zcommerce-component-key': id,
         'data-zcommerce-json-type': jsonType,
-        'data-zcommerce-display-name': displayName || blockType,
         settingid: `setting_block_${blockType}`
     }).replace(/'/g, ''');
     return `data-zcommerce-component='${attrJson}'`;