Connecting Hype and Contentful

Using JavaScript with Hype
1

Hey guys, I stumbled over this post on Medium on my research on using a CMS to change content in files exported with hype:

Though I have now exactly done what the article tells me, and after checking five times, I cannot make it work. Is there any reason for you guys why this tutorial should not be working as expected?

2

Not a full solution but maybe a start… haven't reviewed that in a while.

Maybe also consider this… for only loading JSON

And Hype DataFill might also come in handy

Not a finished solutions but some venues to explore…

3

It'd be useful to know if there was something more specific about it not working - if there was a step in the process that failed, an error message, content does not show up, etc.

That said I've never used Contentful so perhaps the author of the article would have more insight!

4

Hi Jonathan, Thanks a lot, in this case not working means the content does not show up.

5

console log the data you’re trying to receive.
if it does not log the data, you’ve got a problem in connecting to the database.
if there is the expected data you’ve made a mistake while trying to fill an element …

you may share you attempt :slight_smile:

1 Like
6

Along with what @h_classen mentioned, you may want to open the web developer console and inspect the DOM structure. It could be that the Hype document is in fact there, but for some reason not visible. A common cause we found with WordPress embeds was that Hype documents were using a Flexible Layout with the height setting checked to 100%, but this would collapse to 0 pixels since there was no minimum height on the div. The solution for that is to generally just not make the height flexible.

7

Hi @jonathan, actually, the hype document is there, I can see it - the only thing i cannot see, is the content that should be delivered by Contentful.

@h_classen I actually have one error appearing in the console saying

“TypeError: e.response.request._headers is undefined”
=> [contentful.browser.min.js:1:47955]

Obviously there is a problem with the library i included in the hype document?

I will attach my attempt to this post.
I’d be really grateful for your help. Thank you guys very much.

DynamicText.zip (202.2 KB)

8

Just remove the brackets…

	const currentRate = element.querySelector('.rate--current');
	
	const client = contentful.createClient({
  		space: 't93ttrkqgqgp',
  		accessToken: 'hUPUGHBlBl__IhbNhjgr2kH4DDmbz5fm9tS83Yuj1A4'
	});
	
	client.getEntry('3pPhGNYvK9tGUGmXyCgmgn')
	.then(function (entry) {
 		 currentRate.innerHTML = entry.fields.currentMortgageRate + '%'; });

PS: Try to fetch more data in one go instead of individual values to minimize request.

1 Like
9

Oh, my bad, I misunderstood. Sounds like @MaxZieb's post is the fix?

10

@MaxZieb Thank you so much. Of course, it hat to be brackets or a missing semicolon.
Thanks again @MaxZieb, @jonathan and @h_classen for your support!

1 Like