液体 - 从收集处理程序中加载所有产品不起作用
我正在尝试通过收藏夹中给定处理程序加载所有产品。
他们将单击一个框（每个框都是不同的集合），然后它应该为该系列加载所有产品。
我的问题是我的分配变量无法读取JavaScript的输入。 我正在抓住手柄并将其传递给液体。
我的代码是：
function loadProducts(collectionH) {
var html = '';
var handlerString = collectionH;
console.log('Loading products...');
{{collectionHandleNew}} = handlerString;
console.log({{collectionHandleNew}}); // log the handler
// Make sure the current product name is loaded
{% if collectionHandleNew -%}
{% if selectedCategory -%}
console.log('Collection handle is set: ' + {{collectionHandleNew}});
{%- for product in collections[collectionHandleNew].products -%}
console.log({{product.id}});
{%- endfor -%}
{% else -%}
console.log('Selected category not found');
{% endif -%}
{% else -%}
console.log('Collection handle is not available');
{% endif -%}
return html;
}
控制台正在显示： 查看图像
I am trying to load all products by the given handler from a collection.
They will click on a box (each box is a different collection), then it should load all products for that collection.
My issue is that my assigned variable cannot read the input from javascript.
I am doing onclick(id, name, handle) where i catch the handle and pass it to the liquid.
My code is:
function loadProducts(collectionH) {
var html = '';
var handlerString = collectionH;
console.log('Loading products...');
{{collectionHandleNew}} = handlerString;
console.log({{collectionHandleNew}}); // log the handler
// Make sure the current product name is loaded
{% if collectionHandleNew -%}
{% if selectedCategory -%}
console.log('Collection handle is set: ' + {{collectionHandleNew}});
{%- for product in collections[collectionHandleNew].products -%}
console.log({{product.id}});
{%- endfor -%}
{% else -%}
console.log('Selected category not found');
{% endif -%}
{% else -%}
console.log('Collection handle is not available');
{% endif -%}
return html;
}
The console is showing this:
view the image
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这里的技巧是记住 Liquid 和 Javascript 有两个完全不同的用途：
为什么这种区别很重要？因为这意味着我们可以使用 Liquid 来生成 Javascript，但反之则不然。这也意味着我们从 Liquid 传递到 Javascript 的任何变量都只会在文档生成时是当前的，并且不会受到页面呈现后发生的任何事情的影响！
如果您的代码需要动态获取集合，我建议创建一个函数，该函数采用集合句柄并使用您最喜欢的工具（
fetch、jQuery.getJSON、<代码>XMLHttpRequest、<代码>Axios等）。要从店面的集合中获取产品，您可以使用
/collections//products.json （例如，/collections/drawstring-bag-hoodies /products.json）。如果您喜欢，您还可以考虑研究storefront GraphQL API，而不是传统的 REST API。最后一点：每当您将 Liquid 中的变量转储到 Javascript 时，我强烈建议使用 <代码>| json Liquid 过滤器 以确保结果输出是 Javascript 合法的。 Liquid 变量转储可以通过多种方式破坏 Javascript，例如当变量意外为空时、当它包含
'或"时、当它包含换行符时等通过此过滤器运行 Liquid 变量，结果输出将包含在适当的括号或引号中，其中的所有特殊字符将被正确转义，空值将打印null。The trick here is to remember that Liquid and Javascript serve two completely different purposes:
Why is this distinction important? Because it means that we can use Liquid to generate Javascript, but the reverse is never true. It also means that any variables that we pass from Liquid to Javascript will only be current as of the time the document is generated and cannot be affected by anything that happens on the page once it's been rendered!
If your code needs to fetch a collection dynamically, I would recommend creating a function that takes a collection handle and loads the products entirely through Javascript using your favourite tool (
fetch,jQuery.getJSON,XMLHttpRequest,Axios, etc).To fetch products from a collection from the storefront, you can use
/collections/<some-collection-handle>/products.json(for example,/collections/drawstring-bag-hoodies/products.json). If you're feeling fancy, you might also consider looking into the storefront GraphQL API instead of the traditional REST API.One final note: Whenever you are dumping variables from Liquid into Javascript, I strongly recommend using the
| jsonLiquid filter to ensure that the resulting output is Javascript-legal. There are lots of ways a Liquid variable dump can break Javascript, such as when the variable is unexpectedly empty, when it contains'or", when it contains line breaks, etc. By running the Liquid variable through this filter, the resulting output will be wrapped in the appropriate brackets or quotes, all special characters within will be properly escaped, and empty values will printnull.