Display Stores by Region with relations

Question

I need display Stores by Region, by example:

• Alabama

  • Store X
  • Store Y

• Idaho

  • Store A
  • Store B

So:

• I create two channels Stores and Regions.
• In the channel Stores I create a entries field type called storesRegion and check Regions source.

So great! I can create new stores and select where the store is located.

I can display the Regions like this:

{% set relatedRegions = craft.entries.section('regions').relatedTo({
    sourceElement: stores,
    field: 'storesRegion'
}) %}

{% for region in relatedRegions %}
    {{ region }}
{% endfor %}

good but now I need display all the Stores from each Region

this is a good example of what I need: https://www.apple.com/retail/storelist/

this is something related with reverse relations?

Answer 1

You could loop all regions and select their corresponding stores

{# you can as well include eager loading here #}
{% for region in craft.entries.section('regions').storesRegion(':notempty:').all() %}
    {% set storesForRegion = craft.entries.section('stores').relatedTo({
        targetElement: region,
        field: 'storesRegion'
    }).all() %}
    {{ region.title }}
    {% for store in storesForRegion %}
        {{ store.title }}
    {% endfor %}
{% endfor %}

If you want to increase your performance you can use eager loading at this point and include with(['storesRegion']) to your region Query

Answer 2

Working Code:

{% for region in craft.entries.section('regions').all() %} {% set storesForRegion = craft.entries.section('stores').relatedTo({ targetElement: region, field: 'storesRegion' }).all() %} {% if storesForRegion|length %} {{ region.title }} {% for store in storesForRegion %} <a href="{{ store.url }}"> {{ store.title }} </a> {% endfor %} {% endif %} {% endfor %}