Streaming live at 10am (PST)

🤔 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

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.

1 Like

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