Dynamic collection from parent tag

[wilpar]

new to eleventy, I'm trying to create a collection index page based on a tag defined in the parent (front matter)

For example, a City:

name: New York
tags: ['cities']
restaurant_tag: USNYNY
---

And a restaurant in NYC:

---
name: Awesome Reststaurant
tags: ['USNYNY', 'italian', 'etc']
---

How would I query a collection based on current city and current city's restaurant_tag - dynamically?
Thanks!

[pdehaan]

restaurant_tag isn't a tag (it's just random frontmatter data), so won't be automatically added to a collection. You'd need to do that manually by looping over the collections.all collection and filtering on that restaurant_tag frontmatter data. https://www.11ty.dev/docs/collections/

But, the good news is that since your "Awesome Restaurant" specifies a "USNYNY" tag, that should create a collections.USNYNY collection which you should be able to loop over.

[pdehaan]

I haven't tested it, but you might be able to do something like this, depending on your directory structure, directory data files, and stuff:

restaurant_tag is: {{ restaurant_tag }}.
{% for restaurant in collections[restaurant_tag] %}
...
{% endfor %}

If you're using LiquidJS, you might need to put that collections[restaurant_tag] in a temp variable before trying to use it in a {% for .. in %} loop.

[wilpar]

thanks, but I got a template error when I tried your suggestion.

Since I"m starting this from scratch I can change the tags any way that works best, and am completely open to suggestions.

The closest live example to what I'm trying to generate is the Grubhub site.

/state/{{cities}} - {{ collections.USNY }}
/cuisine - {{collections.cuisines}}
/state/city/cuisine - {{ haven't thought about this one yet }}

I'm using Netlify cms to build out the cities in the proper directory structure.

- name: "cities"
    label: "City"
    folder: "src/"
    create: true
    slug: "{{country_code}}/{{state_province}}/{{name}}"

Currently my city index is working, with a query for each state. Ideally I'd find a way to loop through each state, but it's already written so whatever.

{% if collections.USNY|length %}
      {% for city in collections.USNY %}
      <a href="{{ city.url }}" >
        {{ city.data.name }}
      </a>
      {% endfor %}
{% else %}
     Nothing in New York. The horror!
{% endif %}

Next up, city pages;

---
layout: layouts/cities.njk
name: New York
state_province: NY
country_code: NY
restaurant_tag: USNYNY
eleventyExcludeFromCollections: false
tags:
  - footerCities
  - USNY
---

{% for restaurant in collections.{{ restaurant_tag }}  %}      <- the dynamic part I'm working on now
  <a href="{{ restaurant.url }}">{{ restaurant.data.linkName }}</a>
{% endfor %}

Any thoughts? Appreciated!

[pdehaan]

This works for me:

---
title: New York
tags:
  - cities
restaurant_tag: USNYNY
layout: layouts/base.njk
---

<ul>
{% for restaurant in collections[restaurant_tag] %}
  <li><a href="{{ restaurant.url | url }}">{{ restaurant.data.title }}</a></li>
{% endfor %}
</ul>

Where I have a single restaurant tagged with:

---
title: Awesome Restaurant
tags:
  - USNYNY
  - italian
  - etc
layout: layouts/base.njk
---

Almost an Italian restaurant. Unless you're Italian.

And a simple /cities/ index page which loops over the collections.cities collection to display a list of available cities.

---
title: Cities
layout: layouts/base.njk
---

<h1>Cities</h1>

{% if collections.cities.length %}
  <ul>
    {% for city in collections.cities %}
    <li><a href="{{ city.url | url }}">{{ city.data.title }}</a></li>
    {% endfor %}
  </ul>
{% else %}
  <h2>No cities?</h2>
{% endif %}

But I've never used Netlify CMS, so I'm not sure how it's setting data or fields.

---

UPDATE: Pretty sloppy code, but I pushed my repo to GitHub; https://github.com/pdehaan/11ty-dynamic-collections