▼
Streaming live at 10am (PST)

CMS Item Modal Results in Over 8,000 DOM Elements

Design help CMS
#1

Hi everyone,

First off, really love the community and have found so many helpful posts on here! I’ve built a good few webflow sites now, so I’m not a complete beginner, but I’ve stumbled into a problem with this one. Here goes:

  • I’ve got a collection list with 45 items.
  • Rather than each item in the collection list link to a seperate page, I just want the info to appear in a modal.
  • So within each collection item I’ve created a div with position fixed within the item which acts as the modal wrapper.
  • I’ve set up the relevant interactions to make the modal work.
  • Everything works as it should!.. except
  • The dom size is over 8,000 elements :sweat_smile:

I guess that the proper way to do this is to have only one single page modal wrapper, and use JS just to change the content of the modal when the “more info” button is clicked. But I’m not good with JS and don’t know how to do this. Does anyone know how to do this, or is there something I am missing?

Unfortunately since this is a sensitive client project I can’t share a read-only link publically. However here is an xray of the collection list items to show the setup:

Collection list xray
Collection list xray2330×1612 147 KB

#2

Are all 45 of the collection items shown on the same page when it’s loaded? If so, that may be part of the problem as that’s a fairly large list of items—especially if you’re including a bunch of extra information within a clickable modal.

The x-ray is slightly helpful as I can see a couple instances where you may be able to shave off an element or two (mainly around the text links). Depending on how the section is being used I’d recommend looking into some form of pagination or simplifying the information that’s shown in the modal with more details shown on a separate page.

#3

Hi Mike, thanks for having a look at this!

Yes all 45 are loaded initially. The client’s current website has all the vessels on the one page, so I didn’t want to provide a (percieved) lesser experience by introducing pagination.

And yeah I thought about maybe using a more simple link but if I remove the modal element, the page is only 1400 elements. I know thats a lot, but it’s acceptable I think for the kind of page it is.

I think the problem might be that the data thats in the modal is rich text, so lots of paragraph elements and spans. Doing the maths, it seems that by adding the modal, it adds on average 160 elements per item. But there is max 6 divs involved in creating the modal for each item.

#4

I believe Lighthouse flags sites with DOM trees that contain 1500 or more elements, so you’re probably fine with 1400 in this case. Information-dense pages will typically have more DOM elements as they need to render out more information, so that’s to be expected in some cases.

Based on each item adding over 150 elements, I’d say that included those within a modal (as opposed to a separate page) is the solution here. If you’re comfortable with coding you may be able to utilize JS to load that extra data when the user clicks (as opposed to the native Webflow modal implementation) but that’s up to you and your client. I’d argue that with that much extra information, a page load is appropriate and as long as you include some snippets of info to users before the click you should minimize any friction.

#5

Hey,

Yeah, I could just go to another page. But I’ve added page transitions, and I didn’t want users to have to see the page transitions just to view a boat. So I thought the easiest way to allow the user a quick look would be by creating a modal. I can disable the page transition going to the vessel page, but I’ll still have the load animation when someone goes back to the vessels main page.

If anyone knows how to implement the JS solution please let me know!