1

So I am trying to group entries by location and then group entries in this group by weekday. I have this aspect working with the following code:

{% set allClasses = craft.entries
  .section('tuitionClasses')
  .relatedTo({
  targetElement: entry,
  field: 'tuitionCourse'
})
  .all() %}

{% set allEntriesByLocation = allClasses|group(e => e.location.one.title) %}


<div class="md:flex md:flex-wrap max-w-7xl mx-auto"
">
<div class="md:w-1/4">
  <ul class="my-6">
    {% for location, entriesInLocation in allEntriesByLocation %}
      <li
        :class="{ 'bg-gray-50': tab === '{{ loop.index }}' }"
        class=" text-gray-700 mb-3"
      >
        <button
          class="focus:outline-none p-4 px-6"
          :class="{ 'text-pink-600': tab === '{{ loop.index }}' }"
          @click="tab = '{{ loop.index }}'"
        >
          <h2 class="text-2xl font-medium mb-0">{{ location }}</h2>
        </button>
      </li>
    {% endfor %}
  </ul>
</div>

<div class="md:flex-1 bg-gray-50 p-12">
  {% for location, entriesInLocation in allEntriesByLocation %}
    <div x-show="tab === '{{ loop.index }}'">
      {#<h2 class="text-gray-700 text-2xl font-medium">{{ location }}</h2>#}


      {% set locEntriesByWeekday = entriesInLocation|group(i => i.weekday) %}

      <div class="grid grid-cols-3 gap-6 grid-flow-col-dense">
        {% for weekday, entriesForWeekday in locEntriesByWeekday %}
          <div>
            <h3 class="text-pink-600 text-md font-medium mb-3">{{ weekday }}</h3>
            <ul>
              {% for class in entriesForWeekday %}
                <li class="flex items-center mb-3 ml-3">
                  {{ svg('@icons/bx/bx-time.svg', class="w-5 h-5 mr-1 flex-shrink-0 fill-current") }}
                  {{ class.classTime.one.title }}
                </li>
              {% endfor %}
            </ul>
          </div>
        {% endfor %}
      </div>

      <div class="pt-6 -mb-6">
        <button
          @click="html='loading...'; showLoading = true; showModal = !showModal;
              fetch('{{ entry.url }}', {
                method: 'GET',
                headers: {
                'X-Requested-With': 'XMLHttpRequest',
                },
              })
              .then(response => response.text())
                .then(text => {
                html = text
                showLoading = false;
              })"
          class="flex items-center justify-end text-left"
        >
          <div class="bg-gray-600 h-8 w-8 rounded-2 p-1 text-white flex-shrink-0 mr-2 // flex flex-col items-center justify-center">
            {{ svg('@icons/bx-solid/bxs-map.svg', class="p-px w-full h-full flex-shrink-0 fill-current") }}
          </div>
          <div>
            <span class="block font-medium text-base text-gray-700 leading-tight">
            {{ location.url() }}
            </span>
            <span class="block text-xs text-pink-600 leading-tight">
              Map and Directions
            </span>
          </div>
        </button>
      </div>
    </div>

However, where I am stuck is accessing the url for the locations. I have a button that should load the location page into a modal when clicked.

However, when I try {{ location.url() }} I get the following error.

Impossible to invoke a method ("url") on a string variable ("Hatch End").

So How can I get any other element details of the location via this approach? Or is there a different approach I need to take?

Thanks.

2

The group filter creates an associative array so the location Twig var in your loops is the array item key, which is a string.

I think you'll have to get the location object that's related to the entry you're currently working with in the loop in order to access its URL. Maybe try setting the location object to a variable by adding something like {% set locationObj = entriesInLocation[0].location.one() %} right after {% for location, entriesInLocation in allEntriesByLocation %}. Then, you should be able to access the location URL using {{ locationObj.url }}.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.