0

我正在为客户制作 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>

因此，此代码应该显示 Featured 类别中每个项目的图像，并且该图像应该是指向该项目页面的链接。但我很难过。有人知道我做错了什么吗？

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

完成循环后，featuredProductDisplay 的值应放入名为 featuresContainer 的 div 中。

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

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

4

2 回答 2

0

让我给你一个提示。停止像你一样使用 Javascript。在您的情况下，您正在渲染一个集合，因此您 100% 处于 Liquid 世界中，并且您无需将 Liquid 混合到您的 Javascript 中。

当您完成渲染 Liquid、HTML 和 DOM 之后……集合就在屏幕上，呈现出来了。因此，连接您的 DOM 加载处理程序以修复任何需要修复的内容，添加您的事件处理程序等……但是您的模式在这里只是一团糟……没有简单的帮助。如果你选择像你一样混合，你最好成为这两个方面的专家......或者你会长期从事。

于 2012-12-21T01:43:58.310 回答
0

对于任何仍然需要帮助的人。我想出的答案是一个完全流动的答案。但这对我有用。只需将 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 %}
于 2014-03-19T23:04:25.957 回答