Hey guys, we are facing difficulties with the CMS load attribute.
The second instance is not working when using this custom JS code that we use to remove Webflow’s conditionally hidden elements.
// Remove hidden dynamic elements
function eraseHidden() {
let dynElements = document.querySelectorAll('.w-condition-invisible');
dynElements.forEach(function(el) {
el.remove();
});
}
When I don’t load this function, it works fine. It looks like the previous button is removed for some reason.
Does anyone have an idea why this happens and how I can run both scripts without any errors?
This is where the problem occurs:
https://cf-vierless.webflow.io/referenzen
Hey @vierless_julian! Can you share a read-only link?
It seems to me that the second instance does not have any element with the class.
I am using the CMS Load callback to endure the code is run after both instances are loaded successfully on the page
Here is the snippet I’ve worked out inn case you are curious, or want to give it a go
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsload',
(listInstances) => {
console.log('cmsload Successfully loaded!');
listInstances.forEach((listInstance) => {
const { items } = listInstance;
items.forEach((item) => {
let dynElements = item.element.querySelectorAll('.w-condition-invisible');
dynElements.forEach((el) => {
el.remove();
});
});
});
},
]);
</script>
Hi Luis,
thanks for your help!
This is the read-only link:
https://preview.webflow.com/preview/cf-vierless?utm_medium=preview_link&utm_source=designer&utm_content=cf-vierless&preview=faa273b94a5ffb80ac6fa4aebdb725b9&pageId=65f4809ea45a0c4feaa2e054&locale=de-DE&workflow=preview
It is a little confusing for me. I commented my function to erase the dynamic elements out and tried with yours. This seems to work.
The thing is that I want to use the erase function globally on the entire page and it works - only on the page where I load the CMS load attribute, it doesn’t.
Maybe you see something, I don’t see or can explain me how I can achieve my goal?
Thanks again!
Hey @vierless_julian! I tried adding some checks but they were always fired before CMS Load could load and your function was always called.
One option we can try is adding the script to the entire site and checking if we have listInstances if we don’t we can call the function.
The modified script should look something like
<script>
// Remove hidden dynamic elements
function eraseHidden() {
console.log('No listInstance found on page.');
let dynElements = document.querySelectorAll('.w-condition-invisible');
dynElements.forEach(function (el) {
el.remove();
});
}
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsload',
(listInstances) => {
if (!listInstances) eraseHidden();
console.log('cmsload Successfully loaded!');
listInstances.forEach((listInstance) => {
const { items } = listInstance;
items.forEach((item) => {
let dynElements = item.element.querySelectorAll('.w-condition-invisible');
dynElements.forEach((el) => {
el.remove();
});
});
});
},
]);
</script>
I added your code in the global Custom Code. It seems to work on the “Referenzen” page but not on a CMS item page.
For example when you go on the subpage https://cf-vierless.webflow.io/cases/equipe and inspect the code, you can see that all the sections with the class of “w-condition-invisible” are still there.
I don’t understand why Webflow is not loading them in the first place but since they do, we need to remove them from the DOM.
You would also need to add the CMS Load script to the global custom code, this way the callback is fired but if does not find a listInstance the eraseHidden() function is called.
Can we test this?
I added it to the global code as well now. Is there also a way to only load it on the page that we need it on?
It looks like it still does not work as expected since the elements are still in the DOM.
The library I am using is the one I referred to in the other post I made. It enables us to also use a custom fallback once the script has loaded. So in case we need that, we have the option.
Hey @vierless_julian! I am afraid I am a bit mixed up now.
Your original function worked on all but the pages with CMS Load, right? And the snippet I shared is now working for the pages with CMS Load enabled.
If this is the case, then I believe having your original function and the CMS Load callback on your site-wide custom code is enough.
The callback will only fire on pages where we have added the CMS Load script.
Ok, so basically your function prevents mine if there is an instance of CMS load right? Therefore, I keep using both functions (yours and mine) but yours is only active on a page with a CMS instance?
Is that correct?
Correct, the only issue is that for mine to work we need to have the Load script on all pages as my function relies on its callback.
We rely on the callback to ensure all items have been loaded properly, otherwise a simple window.onload() would be enough.
Ok, got it. And why don’t work both scripts at the same time? What is it that is interfering there?
Nothing is stopping us from using both on the page, however I thought we wanted to use one OR the other.
If you don’t mind running the same function twice on a page where CMS Load is implemented we can run both functions, one after the other.