Wrap every 4th product within a div

Question

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.

@racecarjonathan I'm not sure how am I supposed to do this using their [templating language](https://help.bigcartel.com/developers/themes/) — Seb, Mar 17 '15 at 19:47
you might want to include that in your post next time...that's a big piece of information you left out...i just edited your post to include it for you — racecarjonathan, Mar 17 '15 at 19:50
@racecarjonathan thanks mate, it makes sense. Sorry about that! — Seb, Mar 17 '15 at 19:53
Why do you want to wrap the elements in extra containers? Is this for styling purposes only? My reason for asking is that you can style elements based on count with just CSS (using :nth selectors) without adding more markup. — Jayx, Mar 17 '15 at 19:54
@Jayx - thanks for your question. It's not for styling purposes, there's a bit of JS involved there. I tried using nth selectors, but it failed. — Seb, Mar 17 '15 at 20:34

Mohmad Taher · Answer 1 · 2015-03-23T09:33:17.317

3

Using jQuery :

var wraps = $('.wrap');
$('.products').each( function(e, i){
  wraps[Math.floor(i/4)].appendChild(e);
})

jQuery will return a list (HTMLCollection) for all products , iterating this list , you can wrap your item in div refering to the list index.

edited Mar 23 '15 at 09:33

answered Mar 17 '15 at 20:01

Mohmad Taher

41
3

Please, add some explanation to your answer. – vinitius Mar 17 '15 at 20:09
@mohmad-taher Thanks for your reply. However if I try using your method I get the following error 'Uncaught TypeError: Cannot read property 'appendChild' of undefined' – Seb Mar 17 '15 at 20:32
1

`var wraps = $('wrap');` should be `var wraps = $('.wrap');` – Bwaxxlo Mar 17 '15 at 21:55
@Seb sorry typo mistake , will be fixed – Mohmad Taher Mar 23 '15 at 09:33

score 2 · Answer 2 · answered Mar 17 '15 at 19:54

I tried to be a little clever. Assuming you have several of these .wrap elements.

var products = document.querySelectorAll('.products'), 
    wraps = document.querySelectorAll('wrap');
[].forEach.call(products, function(e, i){
  wraps[Math.floor(i/4)].appendChild(e);
})

score 2 · Accepted Answer · answered Mar 24 '15 at 01:48

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>

dangerneck · Answer 4 · 2016-12-21T02:56:16.210

I realize this question is a little old but I found the accepted answer doesn't work.

This is how I got it to work in the templating language (which is kinda? Liquid):

{% for product in products %}

  {% assign zeroindexmodfour = forloop.index0 | modulo: 4  %}
  {% assign indexmodfour = forloop.index | modulo: 4  %}

  {% if zeroindexmodfour == 0 %}
    <div class="wrap">
  {% endif %}

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

  {% if indexmodfour == 0 or forloop.last %}
    </div>
  {% endif %}

{% endfor %}

Wrap every 4th product within a div

4 Answers4