Connecting Hype and Contentful

[scharj]

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

Adding a Contentful CMS for websites created 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?

[MaxZieb (Loves Hype)]

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

How to make a whole editable website with Hype

Was weekend shopping. Now I revisited the code and here is a example that works with a lookup map. I think this is better and allows you to map CSS-Classes for Text and Images to JSON-Keys. Also this way the image replacement works on a much lower core level without ever loading the original image. Also it doesn’t require an initScene function. BTW one could also just embed the JSON (via PHP) into the Hype-HTML-Page and the the preoading (loading scene) would not be necessary. This is perfect…

Maybe also consider this… for only loading JSON

Skip/Delete Scenes using Javascript

Here is another example Sends more values and gets more returns and displays them Even send a random number and returns it to show a round trip of data caches last response in customData Download: AjaxData_forum_14446_switching.zip Hint: You could actually also make the request on Scene load and then only use the cache data to forward at the end of a scene instead of making the call at the end… either way you hopefully get the picture. You could trigger animations based on data see https:…

And Hype DataFill might also come in handy

Hype DataFill (reactive dataset to class mapping)

[image] Simple project to get text previews using data set values. If the browser supports Mutation Observer the dataset keys stay reactive. There is certainly better ways to implement reactivity with a object based two-way data storage like in React or Vue instead of distributed datasets, but it is a demo on getting feedback direct in the IDE and using the additional HTML-attributes panel provided by Hype. Usage: After registering the dataset keys with HypeDataFill.mapDatasetToClass for examp…

Not a finished solutions but some venues to explore…

[jonathan (Jonathan Deutsch)]

I cannot make it work

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!

[scharj]

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

[h_classen (Hans-Gerd Claßen)]

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

[jonathan (Jonathan Deutsch)]

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.

[scharj]

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)

[MaxZieb (Loves Hype)]

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.

[jonathan (Jonathan Deutsch)]

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.

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

[scharj]

@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!