How to nest items in a loop inside a div tag

Joe_Morris
Shopify Partner
18 0 2

Hello newbie post so not sure if this is a concept issue, me being dumb or otherwise, i am building a theme with Responsive Grid System and i am struggling with how to add this to my product loop.

For the grid to layout properly each row needs a wrapping div with the class of section and group so that it can add the correct margins to the first, middle and last columns and it looks like this for a 3 column layout:

<div class="section group">
				<div class="col span_1_of_3">
				1 of 3
				</div>
				<div class="col span_1_of_3">
				1 of 3
				</div>
				<div class="col span_1_of_3">
				1 of 3
				</div>
			</div>

I am looking at other examples of product loops and cannot figure out how to get liquid to cycle every 3 items in the loop and nest them inside this div.

I have seen in another theme the following to add a div after every 3rd row like so:

{% if settings.products_per_row == "3" %}
{% cycle 'clear-product-loop': '', '', '<div style="clear:both;"></div>' %}
{% endif %}

But i want to nest the loop inside the div so the grid works correctly. Any ideas welcome, please use glove puppets and crayons as i have only been using this for a day so far.

0 Likes
Alex135
Astronaut
1889 1 461

Let's say that you want to have the below code as the resulting HTML.

<div class="section group">
    <div class="col span_1_of_3">
        Title of Product One
    </div>
    <div class="col span_1_of_3">
        Title of Product Two
    </div>
    <div class="col span_1_of_3">
        Title of Product Three
    </div>
</div>
<div class="section group">
    <div class="col span_1_of_3">
        Title of Product Four
    </div>
    <div class="col span_1_of_3">
        Title of Product Five
    </div>
    <div class="col span_1_of_3">
        Title of Product Six
    </div>
</div>
<div class="section group">
    <div class="col span_1_of_3">
        Title of Product Seven
    </div>
</div>

You can use the below Liquid code to generate that.

{% for product in collection.products %}
{% cycle 'section-group-start': '<div class="section group">', '', '' %}
<div class="col span_1_of_3">
  {{ product.title }}
</div>
{% if forloop.last %}</div>{% else %}
{% cycle 'section-group-end': '', '', '</div>' %}
{% endif %}
{% endfor %}

I hope this helps.

Joe_Morris
Shopify Partner
18 0 2

This worked, thanks exactly what i need. So it leads me to another question, where is this kind of thing documented?

I can see some basic information on  cycle but nothing about section-group-start etc. Is there a reference manual somewhere which covers this kind of thing off?

regards

 

Joe

0 Likes
Jason
Shopify Expert
10354 155 1990

It would be under liquid basics:
http://docs.shopify.com/themes/liquid-basics

Cycle specifically:
http://docs.shopify.com/themes/liquid-basics/logic#cycle

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
Joe_Morris
Shopify Partner
18 0 2

Thanks Jason, the section only seems to cover off a couple of examples it does not contain anything about the syntax for "section-group-start", section-group-end etc

Where would i go to read about these kinds of things?

Regards

Joe

0 Likes
Jason
Shopify Expert
10354 155 1990

"section-group-start" is just what Alexander chose to use as the cycle name. It can be anything you like and is an optional setting. 

If no name is supplied for the cycle group then it's assumed that multiple calls with the same parameters are one group.

Take a read through the link - it explains it nicely. The reason to use a named group cycle is noted too:

To use many cycles in one template, you must use named groups for predictable results.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
Joe_Morris
Shopify Partner
18 0 2

ok thanks, a light bulb might come on soon :)

0 Likes
bowtiekreative
New Member
2 0 0

Out of curiosity - wher ein your code shows that you want to loop every 3 divs?

0 Likes
Steve759
New Member
1 0 0

Thank you. Alex135, It worked for me. I used this for two divs inside one div, So I just removed one space after comma and added my own classes.

0 Likes
shahrukhr
New Member
1 0 0

hello,

i want to loop every 4 divs, is it possible ?

0 Likes