Question

I am trying to list a load of products, and insert an image between the second last and the last item. At the moment I have this code on my index:

         <ul class="clearfix">
          {% for product in collections.drinks.products %}
          {% include 'snippet-product-item' with 'four' %}
          {% endfor %}
        </ul>

This in my product-item:

{% if snippet-product-item == '' %}{% assign snippet-product-item = 'four' %}{% endif %}

<li class="{{ snippet-product-item }}-per-row clearfix">
  <div class="coll-image-wrap{% unless product.available %} sold-out{% endunless %}"> 
    {% if product.available == false %}
    {% assign ratio = settings.product_img_w_to_h_ratio | times: 1.0 %}
    <a href="{{ product.url | within: collection }}">
      <img src="{{ product.featured_image.src | product_img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" />
    </a>
  </div><!-- .coll-image-wrap -->
</li>

So I'm guessing I need to put some code in my index block to work out how many items there are in the collection, and then for the last one add an extra image in before it. Can anyone help me figure out how that might be done please?

This is my useless attempt:

{% assign num = 0 %}     
{% for product in collections.drinks.products %}            
//Do something like this to work out number of items in collection
{% assign num = temp %}
// Then minus one and insert the image so it appears between second to last and last items
{% endfor %}
Était-ce utile?

La solution

I would try something like this:

{% for product in collections.drinks.products %}
   {% if forloop.last %}
        // Insert image...
   {% endif %}
   {% include 'snippet-product-item' with 'four' %}
{% endfor %}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top