Как использовать интерполяцию строк JS для вставки разделов Shopify? ("недопустимый тип раздела")

#javascript #shopify #liquid

Вопрос:

Я создаю шаблон «просмотр» для тегов определенных блогов. Я хватаю путь с помощью javascript и пытаюсь вставить раздел героя, основанный на том, на каком теге находится пользователь. Если я жестко закодирую имя блога и тег в строке раздела, это сработает. Но если я попытаюсь интерполировать переменные в него, я получу ошибку liquid.

Код:

 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: «Ошибка жидкости: Ошибка в теге «раздел» — «блог-герой-(имя блога) — блог — (имя тега) «недопустимый тип раздела»

1. Жидкость выполняется на сервере, JavaScript выполняется в браузере. Вы можете переходить только с сервера в браузер, а не наоборот. В зависимости от ваших настроек вам придется делать это по-другому

Ответ №1:

В итоге я использовал API рендеринга разделов, согласно документам.

Но строка JSON.parse() не сработала. Поэтому мне пришлось использовать методы onload, readyState и status в соответствии с документами MDN

Новый код в итоге выглядел так

 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);