Moving filters from page to a lightbox - Easy way?

Ask the community
,
1

Hello together,
I have created map on my main page along with several filters (dropdowns, searchboxes ect). Now I want my filter elements to move to a popup. I have seen some forum posts from people who wanted to do it similarly. Unfortunately the solutions were always something like: create variables for each function, export, import ect. In short: a lot of workarounds. I have the problem that my filter function code is very complex and it will be too much trouble for me to do it this way and still keep the overview.

So I was wondering if anyone knows a simpler way to have the same filter elements with the same functions just appear on the lightbox page instead of the main page. Maybe by projection? :smiley:

Joking aside, I would appreciate any answer and idea!

Edit:

My wish would be to keep the same filter elements on the main page with all the functions, just hidden and that in the lightbox would be some kind of projection/connections of these filter buttons ect.

2
  1. Anybody knows which elements you used to generate your filter-enine.

There are a lot of ways of how to generate a FILTER.

  1. Using Wix-Data.
  2. Using Datasets
  3. Coding way / property-panel-way.
  4. Also it depends on structure of your DATABASE(s).

Now I want my filter elements to move to a popup.
Normaly an experienced CODER, would avoid to generate a filter-engine directly on the page (frond-end), to avoid the above problematic situation.

Better would be to generate a BASIC-FILTERING-ENGINE on BACKEND or at least in a public JS-file.

Why???

If you would do it like described, you wouldn’t have the problem now, which you have at the moment, because you would be able to use your FILTERInG-FUncTION from everywhere.

a) from each of your FRONT-END-PAGES
b) from a LIGHTBOX
c) from MASTER-PAGE

…because you would be able to start your public function(s) from everytwhere.

In your case, you programmed it surely at Front-End, and directly bided all your related ELEMENTS on the page to your code. Since you have done it → now your code is BINDED to your page.

When you code next time some specific functions, try to code it more generaly, flexible, as a RETURNING-FUNCTION…

…you put it some data ----> you get some edit/modified data back on frontpage.
Now you are able to use this data-package and bind it to your elements.

Confirmation of my suggestion…

I have seen some forum posts from people who wanted to do it similarly. Unfortunately the solutions were always something like: create variables for each function, export, import ect. In short: a lot of workarounds

Yes, you already have found some right onfo.

Export / import —> DATA-PACKAGES ( ARRAYS+OBJECTS )

In your case, you will have to code it on your Lightbox again, or you do it like…

Doing the FILTERING on your page and sending only the results to your LIGHTBOX, showing them on the LIGHBOX.

Normaly you could copy&paste all your code, which you already have on your page to your LIGHBOX.

So in future try to code GENERAL-RETURN-FUNCTIONS, either on BACKEND or in PUBLIC-JS-FILE, to avoid …

I have the problem that my filter function code is very complex and it will be too much trouble for me to do it this way and still keep the overview.

4

First of all, thank you for your answer. I tried all day yesterday to adjust my complex code so that it works as a return in my backend. But I did not manage to do it. I’m not that experienced with JS and Velo yet and just managed to create the filtering on my main page the way I want it, this new task is too much for me unfortunately.
so i’m currently trying it the way you said, copy the code to my lightbox 1 to 1. I have the following line in my filter function, where I pass the result to my HTML elment (which is on the main page):

$w("#html1").postMessage(JSON.stringify(filteredResults));

Can you maybe tell me what this line has to be so that I pass the result to my main page? Something like

$w("#lightboxName").$w("#html1").postMessage(JSON.stringify(filteredResults));

where I know that probably doesn’t work. but is there a simple command so I can modify the passing lines so I don’t have to do too much?

5

I found a way on my own. It’s a workaround without transferring my filter logic to the backend or writing anything twice. I found out that I can create a semi-lightbox also with a box container. There I placed my filter elements, a close button and ready is almost the same result. The best thing is that this lightbox does not consider itself as an extra window and I can address there all elements that exist on the page. For code beginners, the solution is perfectly sufficient. :slightly_smiling_face: