Trouble navigating through data structure

[haroldao]

Versions

• @11ty/eleventy: v1.0.0
• eleventy-plugin-prismic: v0.2.1
• node: v14.17.0

Reproduction

Hello,

Fetching data is OK

My problem is when I want to display the content, nothing is shown I tried a lot of things but nothing works except when I add the json filter

So... I tried to use 11ty serverless but same thing, another issue Here's the issue in the terminal :

Btw... When I comment these bits the issue disappeared

Additional Details

Live repo : https://github.com/haroldao/11ty-prismic-boilerplate/tree/main
Staging branch : https://github.com/haroldao/11ty-prismic-boilerplate/tree/dev-temp (branch you have to take a look at)

Steps to reproduce

What is expected?

What is actually happening?

[haroldao]

Update:
The issue with Eleventy serverless is now fixed

... but I still unable to see any data. And also the toolbar is not working.
If I want to have a toolbar I have to add <script async defer src="https://static.cdn.prismic.io/prismic.js?new=true&repo=XXXXXXXXXX"></script>
before

[lihbr]

Hey there, looks like you have some issues navigating the data layer provided by the plugin, here's some info that may help you:

Considering only your default_page document type, your Prismic data layer looks like this:

interface prismic {
	default_page: {
		__all: PrismicDocument[];
		fr: PrismicDocument[];
		en: PrismicDocument[];
	};
}

These appear in your JSON dump here:

So to access the English document for example you're looking at something like this:

{{ asText prismic.default_page.en[0].data.page_title }}

If default_page is a singleton within Prismic: I highly recommend configuring the singletons array in your plugin config: https://github.com/prismicio-community/eleventy-plugin-prismic/blob/master/DOCUMENTATION.md#interface, then you'll be able to space the [0] manipulation.

If not: you're able to paginate documents and alias them as explained in the documentation: https://github.com/prismicio-community/eleventy-plugin-prismic/blob/master/DOCUMENTATION.md#with-the-i18n-option-experimental

Regarding the toolbar, it indeed only works in preview context as the edit button wouldn't be available anyway due to Eleventy being a static site generator. You can add the script manually but I'm not sure I'd advocate for it.

Let me know if you still encounter issues!

ps: I formatted your original post to improve its readability

[haroldao]

Thank you so much. Btw... do you know how to handle i18n for example for the index page ?

[haroldao]

I want to do something like that but of course it's not possible

[haroldao]

I succeeded for the posts but now I want to have a index.html under en-us and fr-fr and not in the root

[lihbr]

Sure! page is a special 11ty data (https://www.11ty.dev/docs/data-eleventy-supplied/#page-variable) so that's not what you want to use here.

If your index page is default_page (assuming it's also a singleton) in Prismic, then you're looking at something like this:

---
pagination:
  data: prismic.default_page.___all
  size: 1
  alias: default_page
    addAllPagesToCollections: true
permalink:
  build: "/{{default_page.lang}}/"
  preview: "/preview/:lang/"
---

[haroldao]

I'm also wondering what linkResolver is for ? becauese we have to provide each time the links on each file :/

[haroldao]

Yeah it's a singleton. Thank you so much 🙌🏽

[lihbr]

The link resolver is used for internal links within your application. Let's say you were to link from your home page to a blog post; you'd use either the link paired shortcode (recommended) or asLink shortcode to create such link. Those shortcodes relies internally on the link resolver you provided :)

[haroldao]

Thank you. It's more clear for me now.😉🙌🏽.

Last question 😅:

I chose Prismic because of "reusable components"... and I'm wondering how to dynamically "inject" a snippet/component/include into another file ? (The static way is to use {% include "name-of-the-file" %})

I think what I said is not clear... so I'll give you an example :

Let's say in the future I create a new slice and I want to use this new slice/component/include in my homepage without having to open my text editor etc... How can I do so?

[haroldao]

Same thing on the singleton... I saw that we are able to add slices but in the json in don't see them... so I don't know how to access to the data :/

[lihbr]

Okay, that's a bit more advanced but basically, you're looking at creating what we call a "SliceZone" of some sort. There are plenty of ways to achieve that but here's one that is really simple (it assumes your document data is available at document):

{% for slice in document.data.body %}

{% if slice.slice_type == "hero-slice" %}
  {% render "_includes/slices/hero-slice", slice: slice %}
{% elsif slice.slice_type == "contact-slice" %}
  {% render "_includes/slices/contact-slice", slice: slice %}
{% else %}
  not handled slice
{% endif %}

{% endfor %}

p.s. I'm not familiar with Liquid templating but looking that their doc it looks like that's what you after to render a template with some variable: https://shopify.github.io/liquid/tags/template/#render-parameters

Same thing on the singleton... I saw that we are able to add slices but in the json in don't see them... so I don't know how to access to the data :/

I'm not really sure I get what you mean here ^^' But basically here's the process you're looking after that can ease your work/troubleshooting process:

1. Get the current working document of a page available through a given variable (e.g. in the above we assigned it to default_page)
2. Log it to discover its data structure, eventually log deeper parts of it to better understand what you're dealing with. Logging default_page.data will give you every field available in your document, your slices are likely at default_page.data.body, you can update your log to that to explore further the data structure. Alternatively, you can also use the API browser: https://trafik-plus.prismic.io/api/v2
3. Once you know what you're dealing with you can craft a strategy to template it correctly using the template language logic.

If you're new to slices and slice zones, I recommend you to have a read at this page to better understand what they are prior to diving headfirst in the code (as the experience might be a bit rough ^^'): https://prismic.io/docs/core-concepts/slices

[haroldao]

Thank you that's what I thought : a for loop 😀🙌🏽🎉