-
|
I'm trying to have 11ty build pages from a headless CMS, That all works very well and was super easy to setup. But I'm running into problems actually looping over the data... Quick explanation: I get returned: a home page, and then several other pages. I created 1 ---
pagination:
data: valhalla.homepage
size: 1
alias: homepage
layout: base
permalink: "/"
---
<main id="main" class="mt-600">
<article id="container-center" class="length-optimal center box-block">
<div class="formatted center">
{%- set components = homepage.code.components -%}
{{ components }}
{% include "components/content-blocks/blocks.njk" %}
</div>
</article>
</main>Then, I created a ---
pagination:
data: valhalla.landers
size: 1
alias: lander
layout: base
permalink: "landers/{{ lander.code.identifier }}/"
---
<main id="main" class="mt-600">
<article id="container-center" class="length-optimal center box-block">
<div class="formatted center">
{%- set components = lander.code.components -%}
{% include "components/content-blocks/blocks.njk" %}
</div>
</article>
</main>My data file: const axios = require("axios");
const prodUrl = "https://some-super-fancy-production-endpoint-that-is-also-very-secret.com/api/something";
const devUrl = "http://localhost/api/get/landers";
const environment = process?.env?.ELEVENTY_ENV ?? "production";
const DEV_ENV = "development";
const isDev = environment === DEV_ENV;
const baseUrl = environment === DEV_ENV ? devUrl : prodUrl;
const siteId = process?.env?.SITE_ID;
if (!siteId) {
console.log(process.env);
throw new Error("SITE_ID env variable does not exist.");
}
async function getLandingPages() {
try {
const url = `${baseUrl}/${siteId}/`;
const response = await axios.get(url);
return {
homepage: formatHomepage(response.data.data),
landers: formatLandingPages(response.data.data),
};
} catch (err) {
throw new Error("API not responding, no data returned");
}
}
/**
* Return a flat object for each landing page to be build.
*
* @param {*} response
*/
function formatLandingPages(response) {
const landers = response.landers.map((lander) => {
return {
domain: response.name,
uploadcare_public_key: response?.uploadcare_public_key,
is_development: isDev,
facebook_domain_verification_id: response.facebook_domain_verification_id,
facebook_pixel_id: response.facebook_pixel_id,
google_ads_pixel_id: response.google_ads_pixel_id,
google_analytics_property_id: response.google_analytics_property_id,
microsoft_pixel_id: response.microsoft_pixel_id,
outbrain_pixel_id: response.outbrain_pixel_id,
snapchat_pixel_id: response.snapchat_pixel_id,
taboola_pixel_id: response.taboola_pixel_id,
tiktok_pixel_id: response.tiktok_pixel_id,
we_can_track_property_id: response.we_can_track_property_id,
code: lander,
};
});
return landers;
}
/**
* Return a flat object for the homepage.
*
* @param {*} response
*/
function formatHomepage(response) {
const home = {
domain: response.name,
uploadcare_public_key: response?.uploadcare_public_key,
is_development: isDev,
facebook_domain_verification_id: response.facebook_domain_verification_id,
facebook_pixel_id: response.facebook_pixel_id,
google_ads_pixel_id: response.google_ads_pixel_id,
google_analytics_property_id: response.google_analytics_property_id,
microsoft_pixel_id: response.microsoft_pixel_id,
outbrain_pixel_id: response.outbrain_pixel_id,
snapchat_pixel_id: response.snapchat_pixel_id,
taboola_pixel_id: response.taboola_pixel_id,
tiktok_pixel_id: response.tiktok_pixel_id,
we_can_track_property_id: response.we_can_track_property_id,
code: response.homepage,
};
return home;
}
// export for 11ty
module.exports = getLandingPages;Here's an example of the data I get back: {
homepage: {
domain: 'somecooldomain.com',
uploadcare_public_key: undefined,
is_development: true,
facebook_domain_verification_id: null,
facebook_pixel_id: null,
google_ads_pixel_id: null,
google_analytics_property_id: 'dsffds',
microsoft_pixel_id: null,
outbrain_pixel_id: null,
snapchat_pixel_id: null,
taboola_pixel_id: null,
tiktok_pixel_id: null,
we_can_track_property_id: 'dsfsd',
code: {
type: 'landing_page',
name: 'cool new lander without template',
logo_url: null,
advertorial_disclosure: 'some disclosure',
header_color: '#333333',
footer_color: '#333333',
dynamic_date: true,
show_date: true,
footer_disclosure: 'some disclosure text.',
identifier: 'f8433f9d-e904-4f38-9d8f-5dc26e5bdf4c',
components: [Array]
}
},
landers: [
{
domain: 'somecooldomain.com',
uploadcare_public_key: undefined,
is_development: true,
facebook_domain_verification_id: null,
facebook_pixel_id: null,
google_ads_pixel_id: null,
google_analytics_property_id: 'dsffds',
microsoft_pixel_id: null,
outbrain_pixel_id: null,
snapchat_pixel_id: null,
taboola_pixel_id: null,
tiktok_pixel_id: null,
we_can_track_property_id: 'dsfsd',
code: [Object]
},
{
domain: 'somecooldomain.com',
uploadcare_public_key: undefined,
is_development: true,
facebook_domain_verification_id: null,
facebook_pixel_id: null,
google_ads_pixel_id: null,
google_analytics_property_id: 'dsffds',
microsoft_pixel_id: null,
outbrain_pixel_id: null,
snapchat_pixel_id: null,
taboola_pixel_id: null,
tiktok_pixel_id: null,
we_can_track_property_id: 'dsfsd',
code: [Object]
},
{
domain: 'somecooldomain.com',
uploadcare_public_key: undefined,
is_development: true,
facebook_domain_verification_id: null,
facebook_pixel_id: null,
google_ads_pixel_id: null,
google_analytics_property_id: 'dsffds',
microsoft_pixel_id: null,
outbrain_pixel_id: null,
snapchat_pixel_id: null,
taboola_pixel_id: null,
tiktok_pixel_id: null,
we_can_track_property_id: 'dsfsd',
code: [Object]
}
]
}For some reason, 11ty already fails at the permalink step. It seems thhat every property set in the I thought that 11ty will loop through each individual object and thenn let me access each objects properties. Where am I going wrong here? 11ty logs: |
Beta Was this translation helpful? Give feedback.
Answered by
pdehaan
Jul 24, 2022
Replies: 1 comment 1 reply
-
|
I'd have to try recreating this locally, but I think what's happening is that your pagination for the homepage looks like this: ---
pagination:
data: valhalla.homepage
size: 1
alias: homepage
layout: base
permalink: "/"
---And the {
homepage: {
/* 1 */ domain: '[somecooldomain.com](http://somecooldomain.com/)',
/* 2 */ uploadcare_public_key: undefined,
/* 3 */ is_development: true,
/* 4 */ facebook_domain_verification_id: null,
/* 5 */ facebook_pixel_id: null,
/* 6 */ google_ads_pixel_id: null,
/* 7 */ google_analytics_property_id: 'dsffds',
/* 8 */ microsoft_pixel_id: null,
/* 9 */ outbrain_pixel_id: null,
/* 10 */ snapchat_pixel_id: null,
/* 11 */ taboola_pixel_id: null,
/* 12 */ tiktok_pixel_id: null,
/* 13 */ we_can_track_property_id: 'dsfsd',
/* 14 */ code: {…}
}… Probably easiest workaround is to return an array of homepages that always only has a single element. |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
That was it, thanks so much @pdehaan ! :) |
Beta Was this translation helpful? Give feedback.
Answer selected by
madsem
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'd have to try recreating this locally, but I think what's happening is that your pagination for the homepage looks like this:
--- pagination: data: valhalla.homepage size: 1 alias: homepage layout: base permalink: "/" ---And the
valhalla.homepageis presumably an object (instead of an array of objects), so it's trying to loop over each item/property in the object and creating a new page from that, and using the same/permalink for each page.