How to grab all items in a Shopify Collection

Question

I'm making a sidebar for a Shopify store for a client. It will will display all of the items from a specific collection. The collection is called featured, and my client will use the CMS to specify what items are to display here. It could display 1 item, 100, or however many are in the Featured collection.

I have some code that I thought would do this, but it displays nothing. Here's the code:

{% 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>

So this code SHOULD display images of every item in the Featured catagory, and the image should be a link to the item's page. But I am stumped. Anyone have any idea what I'm doing wrong?

So in theory, it runs the loop, and builds the HTML code into the "product[{{forloop.index0}}]" variable, which is then appended to the end of featuredProductDisplay.

Once you are finished with the loop, the value of featuredProductDisplay should be placed into the div called featuredContainer.

When I run it now, it puts nothing inside the div.

So somewhere, something is not working, and I can't seem to figure out what's missing.

Answer 1

Let me give you a hint. Stop using Javascript like you are. In your case, you're rendering a collection, so you're 100% in Liquid world, and you need not mix in Liquid to your Javascript.

When you're all done rendering Liquid and HTML and DOM... the collection lives on screen, rendered. So hook up your DOM loaded handler to fix whatever needs fixing, add your event handlers etc... but your pattern here is just a mess... there is no simple help for it. If you choose to mix like you are, you best be an expert at both... or you're in for a long long haul.

Answer 2

For anyone still needing help with this. The answer I came up with is a completely liquid answer. But this worked for me. Just replace collectionhandle with the handle of your collection.

     {% 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 %}