Question

根据文档https://developer.bigcommerce.com/stencil-docs/development-quickstart/rendering-html-with-ajax，我可以基于组件文件（例如products / product-view）创建自定义模板

包含用于呈现这些组件的主要内容的基础页面是什么？

我尝试渲染的组件未使用{{ > component/products/quicker-page }}从任何html页面调用。这似乎意味着它不会被包含在./manifest.json中，并且是调用getPage API时stencil-cli中显示错误的根本原因。

window.stencilUtils.api.getPage('/product-1/', { 
  "template": "products/quicker-view" 
}, 
(err, content) => { 
  console.log(content); 
});

错误

TypeError: Uncaught error: Cannot read property 'components/products/quicker-view' of undefined
at TemplateAssembler.assemble (C:\Users\bigcommerce\AppData\Roaming\nvm\v8.12.0\node_modules\@bigcommerce\stencil-cli\server\plugins\renderer\renderer.module.js:466:26)
at getTemplatePaths (C:\Users\bigcommerce\AppData\Roaming\nvm\v8.12.0\node_modules\@bigcommerce\stencil-cli\lib\template-assembler.js:28:20)
at Async.each.err (C:\Users\bigcommerce\AppData\Roaming\nvm\v8.12.0\node_modules\@bigcommerce\stencil-cli\lib\template-assembler.js:93:20)
at C:\Users\bigcommerce\AppData\Roaming\nvm\v8.12.0\node_modules\@bigcommerce\stencil-cli\node_modules\async\dist\async.js:473:16
at iteratorCallback (C:\Users\bigcommerce\AppData\Roaming\nvm\v8.12.0\node_modules\@bigcommerce\stencil-cli\node_modules\async\dist\async.js:1064:13)
at C:\Users\bigcommerce\AppData\Roaming\nvm\v8.12.0\node_modules\@bigcommerce\stencil-cli\node_modules\async\dist\async.js:969:16
at ReadFileContext.Fs.readFile (C:\Users\bigcommerce\AppData\Roaming\nvm\v8.12.0\node_modules\@bigcommerce\stencil-cli\lib\template-assembler.js:114:24)
at ReadFileContext.callback (C:\Users\bigcommerce\AppData\Roaming\nvm\v8.12.0\node_modules\@bigcommerce\stencil-cli\node_modules\graceful-fs\graceful-fs.js:90:16)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:420:13)

Answer 1

我正在编辑与模板不同的主题。

在异常来自的stencil-cli中添加了一些日志记录（在这些文件的编辑之间必须重新启动stencil）

C:\Users\username\AppData\Roaming\nvm\v8.12.0\node_modules\@bigcommerce\stencil-cli\server\plugins\renderer\renderer.module.js

internals.themeAssembler = {
    getTemplates: (path, processor, callback) => {
        // begin add
        console.log(internals.getThemeTemplatesPath(), path);
        // end add
        TemplateAssembler.assemble(internals.getThemeTemplatesPath(), path, (err, templates) => {
            // begin add
            if (!templates) {
                console.log('templates is empty')
            }
            // end add
            if (templates[path]) {
                // Check if the string includes frontmatter configuration and remove it
                var match = templates[path].match(/---\r?\n[\S\s]*\r?\n---\r?\n([\S\s]*)$/);

                if (_.isObject(match) && match[1]) {
                    templates[path] = match[1];
                }
            }

            callback(null, processor(templates));
        });
    },
    getTranslations: (callback) => {
        LangAssembler.assemble((err, translations) => {
            callback(null, _.mapValues(translations, locales => JSON.parse(locales)));
        });
    },
};

参考自定义产品模板

1 个答案: