Allow pagination over multiple data

[babouinette]

Hello everyone,

First let me say I really like using 11ty :) Thanks for your work.

Is your feature request related to a problem? Please describe.

I'm using sanity.io as CMS with the translations enabled, which means when I query for example for my products in _data/products.js, I get back an array of

[{"name": {"_type":"localeString","en":"product 1 english name","fr":"product 1 french name"}}, {"name": {"_type":"localeString","en":"product 2 english name","fr":"product 2 french name"}}]

In my /products/ folder, I have a products-pages.liquid that create the page for each product:

---
layout: product.liquid
locale: fr
pagination:
    data: products
    size: 1
    alias: product
permalink: "{{locale}}/products/{{product.slug.current}}/"
---

In the _includes/product.liquid template, I then can use :
{{product.name[locale]}}
to output either the english or french name (depending on the locale I give).

If I put :

• locale: en => it creates en/products/slug and uses the english name on the product page (one page for each product)
• locale: fr => it creates fr/products/slug and uses the french name on the product page (one page for each product)

Describe the solution you'd like

I would like to do something like :

---
layout: product.liquid
locales:
     - fr
     - en
pagination:
    data:
          - products
          - locales
    size: 1
    alias: 
          - product
          - locale
permalink: "{{locale}}/products/{{product.slug.current}}/"
---

And this would create both pages for each product :
en/products/slug and fr/products/slug while using the correct translation on each page when using {{product.name[locale]}} in the template.

Describe alternatives you've considered

I know I could probably create an /eng and /fr folders, and use a .json file in each folder (using directory data files) in which I put the locale.
But this means having one folder for each language, and copying the same products-pages.liquid file in each of them (with the data file, the locale wouldn't be in the front matter, so the file would be exactly the same, only the locale taken from the .json file would be different).

I think having the possibility to paginate over multiple data could be useful (maybe for other use cases also), but maybe there is already to do what I want without duplicating a bunch of files in a bunch of folders?

Is it already possible in 11ty? If not, do you think it could be a nice feature to have?

Thanks for reading all of this and have a good day :)

[araphiel]

Is it possible to fetch products by individual locale then spread/flattening them into the same array?

That way your data and page could look something like this:

[
    {
        "locale": "en",
        "slug": "product-english"
    },
    {
        "locale": "fr",
        "slug": "product-french"
    }
]

---
layout: product.liquid
pagination:
    data: products
    size: 1
    alias: product
permalink: "{{product.locale}}/products/{{product.slug}}/"
---

[babouinette]

Thank you for your suggestion. I didn't even think about doing it this way but it should be doable :)
I'll try it when I can and keep you posted.

[babouinette]

I tried it and it works perfectly. Now I can have as many language as I want without duplicating files. Thank you for your help :)

[jasonday]

I think this enhancement should be considered:, to have multiple data sources, or easily combine data sources into a single reference for front matter and templates.

[zachleat]

Putting this into the enhancement queue

This repository is now using lodash style issue management for enhancements. This means enhancement issues will now be closed instead of leaving them open.

View the enhancement backlog here. Don’t forget to upvote the top comment with 👍!

[georgezhang]

It might be a bit late. But this can be achieved by add global data in .eleventy.js as follows:

module.exports = function (eleventyConfig) {
eleventyConfig.addGlobalData("activities", () => {
return ideas.concat(projects).concat(recentActivities).concat([promotion]);
});
};