htmlbigcartel

Wrap every 4th product within a div

I need a bit of help. I'm building my own custom BigCartel theme and I run into the following issue: currently I'm listing all my products on the main product page (they aren't that many) and I'm trying to wrap every 4th product within a div. Basically I've got

<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>

and the final result that I want is 

<div class="wrap">
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
</div>
<div class="wrap">
  <div class="product"></div>
</div>

I'm not sure how am I supposed to do this using their templating language.

Solution

  • Using the template language, I think it could be done like this:

     <div class="wrap">

 {% for product in products.all %}
   <div class="product ">
     {{ product.name }} </div>
   {% if forloop.index % 4 == 0 %}
     </div>

     <div class="wrap">

   {% endif %}
 {% endfor %}

 </div>