Streaming live at 10am (PST)

🤔 SOLVED: Editable static content within collection page


#1

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


#2

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.


#3

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…


#4

You could set up a “name > equals > [product name]” filter. Not perfect, but has worked for me before.


#6

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.