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
The basic solution would be to somehowembed 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.
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?
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.
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:
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.
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.
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?
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?
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.
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.
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?
