[Solved] FacetWP script to open only specific parents

[Dagaloni]

Hi there,

I’m using this script and added this to Layout JS:

for (var i = 0, len = document.querySelectorAll(`div.facetwp-facet-product_categories > div.facetwp-depth`).length; i < len; i++) {
	document.querySelectorAll(`div.facetwp-facet-product_categories > div.facetwp-depth`)[i].classList.add("visible");
};

for (var i = 0, len = document.querySelectorAll(`div[data-value="acupunctuur"] > span.facetwp-expand`).length; i < len; i++) {
	document.querySelectorAll(`div[data-value="acupunctuur"] > span.facetwp-expand`)[i].innerHTML="[-]"
};

for (var i = 0, len = document.querySelectorAll(`div[data-value="sanopharm"] > span.facetwp-expand`).length; i < len; i++) {
	document.querySelectorAll(`div[data-value="sanopharm"] > span.facetwp-expand`)[i].innerHTML="[-]"
};

The script works when added to the console directly, but doesn’t run from custom Layout JS. What am I doing wrong?

Edit: I’m using a script to open two parents but leaving the rest collapsed. See my last post with the working code: [Solved] FacetWP script to open only specific parents

[ruenel]

Hello @Dagaloni,

Thanks for writing in! The JS code is not working because of your single quotes. You need to update the code and use this:

for (var i = 0, len = document.querySelectorAll('div.facetwp-facet-product_categories > div.facetwp-depth').length; i < len; i++) {
   document.querySelectorAll('div.facetwp-facet-product_categories > div.facetwp-depth')[i].classList.add("visible");
};

for (var i = 0, len = document.querySelectorAll('div[data-value="acupunctuur"] > span.facetwp-expand').length; i < len; i++) {
   document.querySelectorAll('div[data-value="acupunctuur"] > span.facetwp-expand')[i].innerHTML="[-]"
};

for (var i = 0, len = document.querySelectorAll('div[data-value="sanopharm"] > span.facetwp-expand').length; i < len; i++) {
   document.querySelectorAll('div[data-value="sanopharm"] > span.facetwp-expand')[i].innerHTML="[-]"
};

You should be using the ' and not the ` single quote.

Kindly let us know how it goes.

[Dagaloni]

Thank you @ruenel! I copied the code you provided but that still doesn’t work.

[tristup]

Hi @Dagaloni,

I have checked your code through the Debugger Console and it is working fine. But it seems that a few different JavaScript errors are blocking the code to load while you added it in the Layout JS.

And as it is a custom coding issue it is not possible for us to investigate the reason behind it. I would suggest you hire a developer who can assist you on this or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks

[Dagaloni]

Thank you for the reply. I have solved all errors, but the JS code still doesn’t work. Do you know when the custom JS is run? Is it after all other scripts?

[tristup]

Hi @Dagaloni,

It depends on where you have added the code. But it mostly loaded after all the dependent libraries.

Thanks

[Dagaloni]

It’s added on the Layout JS panel. I have provided the login details in previous post. Can you investigate what the issue is? All the errors in the console are fixed but the code still doesn’t load.

[tristup]

Hi @Dagaloni,

Unfortunately, investigating custom coding is beyond the scope of Theme Support. You need to hire a developer for this or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks

[Dagaloni]

Thank you for your reply.

I understand. But as you said, the debugger gave no error and the code works via the console. So why wouldn’t it work if I insert the same code in the custom Layout JS section? It looks to me that there’s something going on with the custom Layout JS section and not with the code.

Could you please investigate what the problem is? Can you provide further steps for testing?

Many thanks in advance!

[marc_a]

Hey @Dagaloni,

As my colleague said, we can’t troubleshoot any custom coding like javascript because it is outside the scope of our theme support. I highly suggest to seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

Thank you for understanding.

[Dagaloni]

Thanks for the reply. I looked at the code again and found the issue. The code was executed before the facet was completely loaded. I wrapped the code inside document.addEventListener('facetwp-loaded', function() { ... });

The final code looks like this

document.addEventListener('facetwp-loaded', function() {
    for (var i = 0, len = document.querySelectorAll('div.facetwp-facet-product_categories > div.facetwp-depth').length; i < len; i++) {
       document.querySelectorAll('div.facetwp-facet-product_categories > div.facetwp-depth')[i].classList.add("visible");
    };
    
    for (var i = 0, len = document.querySelectorAll('div[data-value="acupunctuur"] > span.facetwp-expand').length; i < len; i++) {
       document.querySelectorAll('div[data-value="acupunctuur"] > span.facetwp-expand')[i].innerHTML="[-]"
    };
    
    for (var i = 0, len = document.querySelectorAll('div[data-value="sanopharm"] > span.facetwp-expand').length; i < len; i++) {
       document.querySelectorAll('div[data-value="sanopharm"] > span.facetwp-expand')[i].innerHTML="[-]"
    };
});

[tristup]

Hi @Dagaloni,

Glad that you are able to find the solution.

Thanks