如何使用 JS String Interpolation 插入 Shopify 部分？ ('not a valid section type')

Question

我正在为某些博客的标签构建一个 'view' 模板。我正在使用 javascript 获取路径名，并尝试根据用户所在的标签插入英雄部分。如果我将博客名称和标签硬编码到部分字符串中，它就可以工作。但是，如果我尝试将变量插入其中，则会出现液体错误。

代码：

const pathName = window.location.pathname;
let blog_div = document.getElementById('blog-hero');
let blogName = pathName.split('/')[2];
let tagName = pathName.split('/')[4];

return blog_div.innerHTML = `{% section 'blog--hero-${blogName}-blog--${tagName}' %}`;

预期输出：屏幕上的部分加载

实际输出：屏幕上没有任何内容。 HTML 中的错误：“液体错误：标记 'section' 中的错误 - 'blog--hero-(blogName)-blog--(tagName)' 不是有效的部分类型”

Answer 1

最终使用部分呈现 API、per the docs。

但是 JSON.parse() 行不起作用。所以我不得不使用 onload、readyState 和 status 方法 per the MDN docs

新代码最终看起来像

const pathName = window.location.pathname;
let blog_div = document.getElementById('blog-hero');
let blogName = pathName.split('/')[2];
let tagName = pathName.split('/')[4];

let request = new XMLHttpRequest();
request.open('GET', `/?section_id=blog--hero-${blogName}-blog--${tagName}`)
request.onload = () => {
    if(request.readyState === request.DONE) {
        if (request.status === 200) {
            blog_div.innerHTML = request.responseText;
        }
    }
};

request.send(null);

如何使用 JS String Interpolation 插入 Shopify 部分？ ('not a valid section type')

How do I use JS String Interpolation to insert Shopify sections? ('not a valid section type')

javascript

liquid

shopify