Question

我正在为客户制作Shopify商店的侧边栏。它将显示特定集合中的所有项目。该集合称为精选，我的客户将使用CMS指定要在此处显示的项目。它可以显示1个项目，100个，或者在精选集合中有多少个。

我有一些代码，我认为会这样做，但它什么也没显示。这是代码：

{% for product in collections.featureditems.products %}
{% if product.title == '<insert a title-id>' %}
<a href="{{product.url}}" onclick="return Showroom.showProduct('{{product.handle}}');"><img src="{{ product.featured_image | product_img_url: 'medium' }}"/></a>
{% endif %}
{% endfor %}

<script type="text/javascript">
    var featuredProductDisplay = "";
    var productCount = {{ collections.featureditems.products.size }};
    window.onload = function() {
      var product=new Array(productCount)
        {% for product in collections.featureditems.products %}
           product[{{forloop.index0}}]='<div class="featuredItem"><a href="{{product.url}}" onclick="return Showroom.showProduct("{{product.handle}}");\"><img src="{{ product.featured_image | product_img_url: "small" }}" /></a></div>';
       featuredProductDisplay = featuredProductDisplay + product[{{forloop.index0}}];
    {% endfor %}
    document.getElementById('featuredContainer').innerHTML = featuredProductDisplay;
}
</script>
<div class="leftSideBar">
    <h2>Featured</h2>
<div id="featuredContainer">

</div>
</div>

因此，此代码应该显示精选类别中每个项目的图像，图像应该是项目页面的链接。但我很难过。任何人都知道我做错了什么？

理论上，它运行循环，并将HTML代码构建到“product [{{forloop.index0}}]”变量中，然后将其附加到featuredProductDisplay的末尾。

完成循环后，应将featureProductDisplay的值放入名为featuredContainer的div中。

当我现在运行时，它不会在div中放置任何内容。

所以在某个地方，某些东西不起作用，我似乎无法弄清楚缺少什么。

Answer 1

让我给你一个提示。停止使用像你这样的Javascript。在你的情况下，你正在渲染一个集合，所以你在Liquid世界中是100％，你不需要将Liquid与你的Javascript混合。

当你完成渲染Liquid和HTML以及DOM之后......这个集合仍然存在于屏幕上，呈现出来。所以挂钩你的DOM加载处理程序来修复任何需要修复，添加你的事件处理程序等...但你的模式只是一个烂摊子...没有简单的帮助。如果你选择像你一样混合，你最好是两者的专家......或者你长期待在那里。

Answer 2

对于仍然需要帮助的人。我想出的答案是一个完全流畅的答案。但这对我有用。只需将collectionhandle替换为集合的句柄即可。

     {% assign collection = collections.collectionhandle %}
  {% assign products = collections.colectionhandle.products %}
  {% capture new_row %}
   <div class="product_row">
    {% endcapture %}
    {% for product in products limit: limit %}
             <a href="{{ product.url | within: collection }}" title="{{ product.featured_image.alt | escape }}">
       <img {% if settings.align_height %}style="height:{{ settings.collection_height }}px"{% endif %} src="{{ product.featured_image | product_img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" />
       </a> 
    {% endfor %}

如何获取Shopify集合中的所有项目

2 个答案: