Is it possible to change a loop if mobile browser is detected?

Question

I have a loop to go through my products which go in batches because they need to show detail info every third entry. When the Website is viewed from a mobile device, Tablet or Mobile I want it to loop in Batches of 2 instead of 3.

All I get when I make an "if" statement is errors about the for loop not closing.

    {% if craft.request.isMobileBrowser %}
        {% for batch in craft.entries.section('afval')|batch(2) %}
    {% else %}
        {% for batch in craft.entries.section('afval')|batch(3) %}
    {% endif %}
    lots of content here...
    {% endfor %}

So how can I get the loop to go in 2 entries per batch instead of 3 when reached "col-sm"(bootstrap) or atleast when a mobile device is detected.

Answer 1

You should close your for-tag pair within the {% if ... %}.

So:

{% if craft.request.isMobileBrowser %}
    {% for batch in craft.entries.section('afval')|batch(2) %}
        ...
    {% endfor %}
{% else %}
    {% for batch in craft.entries.section('afval')|batch(3) %}
        ...
    {% endfor %}
{% endif %}

Or, even better:

{% set batch = craft.request.isMobileBrowser ? 2 : 3 %}

{% for batch in craft.entries.section('afval') | batch(batch) %}
    ...
{% endfor %}

Answer 2

I wouldn't use Craft's isMobileBrowser detection here. It's the viewport width you are actually interested in and not whether the visitors is viewing your site from a mobile, tablet or desktop device.

So what I'd do instead is to add a css class to the last item in each row and hide that item for the viewport widths in question with css.

{% for batch in craft.entries.section('afval')|batch(3) %}
    <div class="row">
        {% for item in batch %}
            {% set lastItemClass = loop.last ? 'col-xs-hidden' %}

            <div class="col-xs-6 col-md-4 {{ lastItemClass }}">
            </div>
        {% endfor %}
    </div>
{% endfor %}

.col-xs-hidden {display: none;}

@media (min-width: @screen-md-min) {
  .col-xs-hidden {display: block;}
}