if use two module filter, one don't collapse

[ehndrju]

I am using two "Phoca Cart Filter Modules" on my website.
one for the desktop, the other for the mobile. for this I added the "Phoca Cart Filter Module" to the "Offcanvas Section" and to the "sidebar".
Now the filter that is in the "sidebar" does not work "#collapseid" and the filter does not collapse.
What I did wrong?
website: https://sib-sb.ru/directory/sale

[Jan]

Hi, when you disable one, does it work? If each plugin works when other is disabled, then this can be related to using the same ID which can be in conflict

This module is one instance module and it works based on parameter names, so there are not different names for different module instances.

For example, if some item is active in the filter, it stays opened:



This is why there cannot be different ID for different instances (usually you can programatically set that each module instance will have some specific prefix for the ID but here the ID must be always the same because it is managed globally)

Jan

[ehndrju]

sorry, but i don't understand, what you say.
please, go to link https://sib-sb.ru/directory/sale and click any header in filter module. Nothing will happen.
screen my problem:
id 96 for desktop resolution.

id 125 for mobile resolution

Hi, when you disable one, does it work?

these are two filter modules:

id 125 works correctly, id 96 does not closes when clicked.
if disable id 125, then if clicked on heading id 96 - closes.

For example, if some item is active in the filter, it stays opened:

I still don't understand how the works this option. when the active element is open. I have all elements either open or closed

[Jan]

Hi, I understand what do you mean. And the question if both modules are active on the site together? If yes, then there are two the same IDs and Javascript cannot access one module.

Example:

- on site, there is active one module and there is a group #color. So when you click to close it, it will close
- on site, there are active two modules, so there are two groups with ID #color, so when you click to close it, only one module will be closed

Jan

[ehndrju]

- on site, there are active two modules. in one

yes. I also think that javascript does not get access. and how to fix it?

[Jan]

yes. I also think that javascript does not get access. and how to fix it?

You can fix bug but difficult to fix the feature.

This is a common feature. It is one instance module where the URL parameter can affect the ID set on the site. Some solution can be to rewrite this Bootstrap feature to accept e.g. classes instead of ID (but unfortunately I didn't do such modification yet, so no clue advice there )

Jan

[ehndrju]

the sadness
I'm not a programmer ... an experienced user.
Please, tell me, Jan.
id 96 without javascript access and id125 with javascript access. can I change access? to make id96 with access and id125 without? if so, how to do it?
that's important for me.
Thank you Jan.

[Jan]

Hi, this is just html/javascript feature which cannot be influenced. In HTML document, there should be unique IDs, so in fact you cannot have

Code: Select all

<div id="abc"></div> and then <div id="abc"></div>

And all this depends on used browser which ID will be active (you have no choice, because having two the same IDs is just not correct, so then there is even no feature to somehow prioritize one - it is fully managed by browser)

As you can see at Bootstrap code examples:


Bootstrap uses ID for opening/closing some part.

So when Bootstrap uses ID and browser (HTML standard) does not allow you to use more IDs (which is correct, as ID must be unique) then you can only use one instance of this module.

There are a lot of ways how to solve it but mostly this will not work for 100%

- e.g. to not open/close the parts and lets them only opened
- to rename IDs in second module manually so you will be able to open/close the parts but then it will be not opened automatically when page is loaded and the parameter is included in the URL
- to modify Bootstrap code and change from IDs to e.g. classes

So what I want to say it here, unfortunately, this is not something, Phoca Cart can influence - this is the connections between HTML standards (browser) and Bootstrap feature (based on ID)

Jan

[ehndrju]

Thank you, Jan for your patience.
Perhaps my decision is not correct.
I am trying to hide a filter in a mobile screen. too many specifications. the filter module is too large. I have to scroll down for a long time for view products.
Therefore, I will make one module invisible, and the other installed in the mobile menu.
Maybe I needed to apply a different solution?
Big Thanks, Jan, if you can offer a working solution.

[Jan]

Hmmm, hard to say, but maybe one filter differently stylized (for mobile and desktop) should be the best solution.

See the example here:

https://www.phoca.cz/jtd/

If the page is displayed in standard desktop, the menu is located in left module position, if the page is displayed in mobile, the menu is displayed per "hamburger" menu button with a ride-out effect)

Standard desktop:


Mobile:







Jan