Add static, unique, content to a single dynamic page

Ask the community
, , ,
1

Is there a way to add unique static content (like a short heading and text) to just one specific dynamic page without it showing up on all the other dynamic pages? Can this be done using the CMS or editor, or would I need to use custom code?

2

You’d need custom code, but it’s extremely simple

  • In the CMS, have a boolean field, e.g. showStatic
  • In the editor, add the static contents, preferably groups or within a strip for simplicity. Have it collapsed/hidden by default

Then in the dynamic page:

item = $w('#dynamicDataset').getCurrentItem()
if (item.showStatic) $w('#staticContent').expand() // or show()

That should take care of it

3 Likes
4

Thanks for your reply!

I can’t seem to make it work though. I have very little experience in code, especially Wix Studio, but I’ve tried to follow your steps. I would really appreciate if you had the time to tell me how to do it otherwise.

  • Added a boolean field and named it “showStatic”.
  • Added a section with a paragraph inside on the dynamic page in the editor
  • Made the section hidden by default
  • Connected the paragraph to the boolean field in the CMS
  • Added your code in the dynamic page

Is it because i’ve connected it to the paragraph and not the section that makes it not work? And if I connect my paragraph to the CMS, I can’t have different content in the paragraph for other dynamic items. See screenshots below (I’ve made the section show for this example)

Skärmavbild 2024-10-23 kl. 16.29.18
Skärmavbild 2024-10-23 kl. 16.29.181920×900 101 KB

Skärmavbild 2024-10-23 kl. 16.32.06
Skärmavbild 2024-10-23 kl. 16.32.061920×368 83.9 KB

Thanks in advance!

5

The paragraph should not be connected to the boolean field, as it’d simply turn into “True” or “False” instead of the text you want

As for the code:

  1. I forgot to define the item variable.
    In the first line of code, add const before everything:
const item = $w('#dynamicDataset').getCurrentItem()
  1. You need to define the tag #staticContent for that section you want hidden/shown

Hovering over the red underlines in your code should provide you with hints about the cause of errors

6

I’ve now defined detached the paragraph from the CMS, added the item variable in the code and defined the tag – still does not work…

Skärmavbild 2024-10-23 kl. 17.10.21
Skärmavbild 2024-10-23 kl. 17.10.211920×915 97.7 KB

7

Lines 3-4 in your code are unintelligible and may be crashing the code, remove them

Also, the code is running when the user enters the page, but the current item of the dataset is only present after it is loaded, so we should wait for that first:

$w('#dynamicDataset').onReady(() => {
    const item = $w('#dynamicDataset').getCurrentItem()
    if (item.showStatic) $w('#staticContent').show()
})
8

Thank you! Now it works like a charm. I misunderstood your definition of “collapsed by default”, so I checked the box in the bottom right corner and now it works!

On the dynamic pages where this static section is shown, I’d like to hide the section above it. Should I create a new boolean field and set it up similarly, but modify the code from .expand to .collapse to control it via the dataset instead?

If that’s correct, how should I write the code for this?

9

No, it’s based on the same boolean - If we go through the logic:
IF showStatic THEN expand the hidden static contents and collapse the normal dynamic content (Or however you’d prefer to call those sections of course)

Now, I’m not sure what you meant about your misunderstanding of “collapsed by default”, but I’ll describe them a little just in case, you can decide which one would suit your needs better

  • Collapse eliminates the element from rendering on the page, which rearranges other items as if it was never there. It is reversed via expand.
  • Hide still retains the space that the element would’ve taken had it been rendered. And it is reversed via show.

Since you’re using sections, expand/collapse are probably the better method for you to use

$w('#dynamicDataset').onReady(() => {
    const item = $w('#dynamicDataset').getCurrentItem()
    if (item.showStatic) {
        $w('#staticContent').expand()
        $w('#dynamicContent').collapse()
    }
})

The code block within the {} is executed if the statement in if (), i.e. the showStatic boolean, is true

10

That’s perfect! Thank you so much for your help and for your explanations. I really appreciate it :smile:

1 Like