How to nest items in a loop inside a div tag

Highlighted
Tourist
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
Astronaut
1925 0 352

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.

1 Like
Tourist
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
Shopify Expert
9418 9 1258

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

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

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Tourist
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
Shopify Expert
9418 9 1258

"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.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Tourist
18 0 2

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

0 Likes