Matrix loop (nesting?) issue using switch

Question

First let me say this: I'm new to Craft and Twig. So: my apologies for probably overlooking the obvious. I hope you can offer me some help... I've been trying for a couple of days to solve this puzzle. Nothing seems to work. ;-S

I'm trying to create a simple events calendar using Craft 3, Twig and Bootstrap 4. The calendar exist of two parts: 1. a section with 3 columns (col-4) that lists the events; and 2. a divider (col-12) that contains the month and year. I used the Matrix field in Craft to be able to be flexible in sorting events within a certain period of time.

The Issue: I expected to see the three columns to neatly sit beside each other horizontally (on the desktop version of the site). But this doesn't seem to work right now: because I use a for loop to enable switch, the for loop I need for outputting the event-items results in the same row of events being repeated a couple of times instead of just once.

What am I doing wrong?

I very much appreciate any thoughts.

Greetings from The Netherlands, sorry for my bad English,

Mars

{% block calendar %}

    {% for block in entry.calendarGroup.all() %}

        {% switch block.type %}

            {% case "events" %}

                <div class="row no-gutters">

                    {% for entries in entry.calendarGroup.type('events') %}

                        <div class="col-md-4 pt-1 pb-1 pb-md-0 pr-md-1">
                            <div class="box-calendar black text-white">
                                <div class="row no-gutters p-3">
                                    <div class="col-2 pl-lg-1 pt-1">
                                        <h5>{{ block.eventDate }}</h5>
                                    </div>

                                    <div class="col-10 pt-1 pr-2">
                                        <h5>{{ block.eventTitle }}</h5>
                                        <ul class="pt-1 mt-1 calendar-brood">
                                            <li class="uppercase">{{ block.eventType }}</li>
                                        </ul>

                                        <ul class="pt-3 mt-1 calendar-brood">
                                            <li>{{ block.eventTime }}</li>
                                            <li>{{ block.eventLocation }}</li>
                                        </ul>
                                        <div class="pt-3 mt-1 pb-3 calendar-brood">{{ block.eventDescription }}</div>
                                    </div>

                                </div> 
                            </div> 
                        </div>

                    {% endfor %}

                </div>

            {% case "months" %}

                <div class="row no-gutters">

                    <div class="col-12">
                        <div class="calendar-bar d-flex justify-content-between justify-content-md-center">
                            <p class="d-flex align-self-center agenda-item left w-25">{{ block.month }}</p>
                            <p class="d-flex align-self-center agenda-item right">{{ block.year }}</p>
                        </div>
                    </div>

                </div> <!-- End row -->

            {% endswitch %}
        {% endfor %}

    </div>

{% endblock %}

Answer 1

I'm not entirely clear what your Matrix blocks/fields are setup like, so it's a little hard to tell what's going on here.

But I'm going to take a stab at it.

Your outer loop is looping through all the blocks in the calendarGroup Matrix field.

Then you're using a switch to determine which piece of code to execute based on which one of the two block types each block is.

All that looks ok.

But here is I think where your problem lies:

{% for entries in entry.calendarGroup.type('events') %}


{% endfor %}

This loop is starting fresh and looping over all the Matrix blocks in the calendarGroup Matrix field, except this time it's only getting the blocks of the event block type.

Then, inside that loop you are using the {{ block.fieldName }} variables again. But block is set in your parent loop. And nowhere are you referencing entries from your inner loop.

So there is a mismatch in your logic. I think you can simply do away with the inner loop, it's it's going to out put all of the event blocks inside each event block in the outer loop. That, to me, seems like the issue.

Answer 2

Thank you, Jeremy, for helping out! I really appreciate it. I solved the issue today using the "Super Table"-plugin (matrix within a matrix).

{% extends "layout.html" %}

{% block calendar %}

{% for row in entry.eventCalendar.all() %}

<div class="row no-gutters">

{% for block in row.months.all() %}

  <div class="col-12">
   <div class="calendar-bar d-flex justify-content-between justify-content-md-center">
      <p class="d-flex align-self-center agenda-item left w-25">{{ block.month }}</p>
      <p class="d-flex align-self-center agenda-item right">{{ block.year }}</p>
   </div>
  </div>

{% endfor %}

</div> <!-- End row -->

<div class="row no-gutters">

{% for block in row.eventInfo.all() %}

     <div class="col-md-4 pt-1 pb-1 pb-md-0 pr-md-1">
      <div class="box-calendar black text-white">
        <div class="row no-gutters p-3">

          <div class="col-2 pl-lg-1 pt-1">
            <h5>{{ block.eventDate }}</h5>
          </div>

          <div class="col-10 pt-1 pr-2">
            <h5>{{ block.eventTitle }}</h5>
            <ul class="pt-1 mt-1 calendar-brood">
              <li class="uppercase">{{ block.eventType }}</li>
            </ul>

            <ul class="pt-3 mt-1 calendar-brood">
              <li>{{ block.eventTime }}</li>
              <li>{{ block.eventLocation }}</li>
            </ul>
            <div class="pt-3 mt-1 pb-3 calendar-brood">{{ block.eventDescription }}</div>
          </div>

      </div> 
    </div> 
  </div>
{% endfor %}

</div> <!-- End row -->

{% endfor %}

</div> <!-- End Calendar -->

{% endblock %}