šŸ¤” SOLVED: Editable static content within collection page

Hi dear Webflowers community!

First off, it seems my problem is similar to this one from three years ago, so maybe there are new ways to tackle it: Unique content on Collection pages - #2 by callmevlad

The basic solution would be to somehow embed a dynamic page into a static or the other way around, I guess.

This is my problem:
I landed a new job for a customer who wants to have some kind of catalogue/shop functionality (with collection-like repeating patterns). Easy.

But:
He also wants each product page to be partly unique in itā€™s presentation. Like different features, texts, etc. that are definitely none-repetitive.

Imagine this concept per product-page:

  • Product explanation in individual text, images, maybe slider, maybe video, maybe whatever
  • Standard product information (from collection)

So basically either
a) I need to somehow implement individual content into an otherwise collection-page
b) or do the opposite by somehow adding a collection page to a static page

Any idea how to do that? I thought about b) with some iframe-like insert of a collection page? But iframes are so lame, is there anything else to look at?

Please, HELP!

regards,
Tobi

What about using collection lists as layout elements on a static page to embed data from the collection to the page? and then filter away the list items that is not relevant.

Thatā€™s what I thought too. But does the filter work like that? And I would have to copy this into each of the static pages, and it canā€™t be a symbol, obviously.

Itā€™s not perfect but worth a tryā€¦

You could set up a ā€œname > equals > [product name]ā€ filter. Not perfect, but has worked for me before.

1 Like

Hereā€™s the best solution for this, just in case anybody wants to accomplish the same. Iā€™m not a developer, I used the base code from this project by @cyberdave. Thanks man!

I created the general page as a collection template page. In the collection, I created a text field that contains the URL or slug of the content that needs to be variable.

Next, I created a div with the ID content-div. And then in the custom code area before the tag I put this:

<script>
function loadcontent(div,cid) {
  $('#' + div).load('https://domain.com/directory/' + cid); }
</script>

<script type="text/javascript">
  loadcontent('content-div','SLUG');
</script>

The SLUG of course is the variable defined within the collection, that I entered into the script using the + Add Field button in the custom code section.

2 Likes

Hi, Can you share a bit more about this solution? Iā€™m struggling to replicate it on my site.

then in the custom code area before the tag I put thisā€¦

This refers to the code before the body tag in the collections template page, right?

the content that needs to be variable

It looks like that example puts this content on its own, static page. In that case, does that script take the entire body of the static page and place it into the content-div?

Hi, Can you share a bit more about this solution? Iā€™m struggling to replicate it on my site.

then in the custom code area before the tag I put thisā€¦

This refers to the code before the body tag in the collections template page, right?

Yes, correct.

the content that needs to be variable

It looks like that example puts this content on its own, static page. In that case, does that script take the entire body of the static page and place it into the content-div?

Yes, also correct.

What exactly are you struggling with? Let me know if you need further help.

1 Like

Thanks for the offer. I actually just neglected quotes around the dynamic SLUG field :man_facepalming:

Everything works now, thanks for the awesome fix to this!

Hi @Tobi_Huber, Iā€™ve gotten this to work and itā€™s great, does exactly what I was hoping for. Unfortunately, the static content that Iā€™m pulling into my collection page only shows up after I hard refresh the page. Have you run into this problem and do you know why it might be?

Thanks in advance for any help!

1 Like

Hi! This script seems great and Iā€™m trying to replicate it on a page. But I canā€™t get it to work at all. I think I must have the linking messed up or something.

Iā€™m still only test publishing the site under the .webflow.io domain, does that pose any problems?

Should the variable holding the static page be just the page name or the full link to the page?

What should I change in this section?

Should the domain be my .webflow.io domain up to the directory where the static page is placed?

Does the div targeted to hold the content need to be formatted in any way?

Iā€™m grateful for any help I can get. Thanks!

Update on my previous question, accidentally solved it!

The script does works great as written, I totally missed that you have to replace the ā€œSLUGā€ by pressing the ā€œ+ Add fieldā€ button in the custom code frame and from there picking the collection text variable. Not just writing the variable name in code.

Thanks!

Hi - Iā€™m being really dumb and not getting this - but really want to understand - could someone break this down for me in some real easy steps i.e.

1 - Create Collection with desired fields
2 - Add custom Slug field ie. ā€˜Customā€™
3 - Createā€¦
etc

Sorry - and thanks in advance

Hi, I have the same questions regarding the instructions here. Hereā€™s what Iā€™ve done:

I set up a collection with the slug field, I set up a collection page with the content-div container and ID of ā€œcontent-divā€. I created a static page with the slug of ā€œtest-contentā€. I put the script in the customer code field and configured the add field to reference the slug field.

Published the pages on the default webflow.io URL.
I get nothing showing up in the content div when I load the page.

In the script, I tried it as is, and then I tried editing the URL of the domain, and also playing with using both just the slug ā€œtest-contentā€ and the full URL path in the cms field. But canā€™t seem to get it working.

What am I missing?

Honestlyā€¦ itā€™s so long agoā€¦ Iā€™d have to dig in again to make a comprehensive tutorial/video.

Do you recall if I should be editing the URL in the script to replace ā€œhttps://domain.com/directory/ā€ ? And do I use just the slug ā€œtest-contentā€, or the full URL path in the cms field?

function loadcontent(div,cid) { $(ā€™#ā€™ + div).load(ā€˜https://domain.com/directory/ā€™ + cid); }

no, not right of the top of my head

Did you ever solve this? Iā€™m trying to work this out, but getting the same problem as you! Thanks!