JS for WOOF filter in Elementor pop up modal
The support doesn work on Saturdays and Sundays, so some Friday requests can be answered on Monday. If you have problems with registration ask help on contact us page pleaseIf you not got email within 24~36 business hours, firstly check your spam box, and if no any email from the support there - back to the forum and read answer here. DO NOT ANSWER ON EMAILS [noreply@pluginus.net] FROM THE FORUM!! Emails are just for your info, all answers should be published only here.
The support doesn work on Saturdays and Sundays, so some Friday requests can be answered on Monday.
Quote from paramount on October 4, 2020, 02:03Hi,
My customer would like to display product filter in modal. The modal is created as an Elementor sidebar widget.
The WOOF filter works. However, the js scripts responsible for styling does not work. The same shortcode embedded withing the page body looks fine.The reason, I believe, is the Elementor pop up window is drawn after the plugin scripts initialisation.
Do you mind to give me a hint, how I can trigger the js initalisation on button click? I need slider, drop-down menus and check-boxes.
Kind Regards
Michael
Hi,
My customer would like to display product filter in modal. The modal is created as an Elementor sidebar widget.
The WOOF filter works. However, the js scripts responsible for styling does not work. The same shortcode embedded withing the page body looks fine.
The reason, I believe, is the Elementor pop up window is drawn after the plugin scripts initialisation.
Do you mind to give me a hint, how I can trigger the js initalisation on button click? I need slider, drop-down menus and check-boxes.
Kind Regards
Michael
Quote from Pablo Borysenco on October 5, 2020, 12:19Hello Michael
Please drop me exact link to the issue
Hello Michael
Please drop me exact link to the issue
Quote from paramount on October 5, 2020, 12:56Hi Pablo,
Thank you for your email,
I am afraid at the moment I am not able to provide you with the direct link to the site. It is still in build process.
I can supply you with any information you need.My colleagues added WOOF as a sidebar in WordPress admin (Dashboard>Appearance>Widgets) in Astra theme. On mobile screens the filter is rendered inside a slide out/in 'drawer'. The WOOF js does not work with this set up. It works fine when the filter is placed within main body of the page.
For example the slider HTML is not rendered inside 'drawer':<span class="irs js-irs-1 irs-with-grid"><span class="irs"><span class="irs-line" tabindex="-1"><span class="irs-line-left"></span><span class="irs-line-mid"></span><span class="irs-line-right"></span></span><span class="irs-min" style="visibility: hidden;">$5</span><span class="irs-max" style="visibility: hidden;">$99 998</span><span class="irs-from" style="visibility: visible; left: 0.197628%;">$5</span><span class="irs-to" style="visibility: visible; left: 86.5613%;">$99 998</span><span class="irs-single" style="visibility: hidden; left: 38.2411%;">$5 — $99 998</span></span><span class="irs-grid" style="width: 91.3044%; left: 4.24783%;"><span class="irs-grid-pol" style="left: 0%"></span><span class="irs-grid-text js-grid-text-0" style="left: 0%; margin-left: 0%;">5</span><span class="irs-grid-pol small" style="left: 20%"></span><span class="irs-grid-pol small" style="left: 15%"></span><span class="irs-grid-pol small" style="left: 10%"></span><span class="irs-grid-pol small" style="left: 5%"></span><span class="irs-grid-pol" style="left: 25%"></span><span class="irs-grid-text js-grid-text-1" style="left: 25%; visibility: visible; margin-left: 0%;">25 003</span><span class="irs-grid-pol small" style="left: 45%"></span><span class="irs-grid-pol small" style="left: 40%"></span><span class="irs-grid-pol small" style="left: 35%"></span><span class="irs-grid-pol small" style="left: 30%"></span><span class="irs-grid-pol" style="left: 50%"></span><span class="irs-grid-text js-grid-text-2" style="left: 50%; visibility: visible; margin-left: 0%;">50 002</span><span class="irs-grid-pol small" style="left: 70%"></span><span class="irs-grid-pol small" style="left: 65%"></span><span class="irs-grid-pol small" style="left: 60%"></span><span class="irs-grid-pol small" style="left: 55%"></span><span class="irs-grid-pol" style="left: 75%"></span><span class="irs-grid-text js-grid-text-3" style="left: 75%; visibility: visible; margin-left: 0%;">75 000</span><span class="irs-grid-pol small" style="left: 95%"></span><span class="irs-grid-pol small" style="left: 90%"></span><span class="irs-grid-pol small" style="left: 85%"></span><span class="irs-grid-pol small" style="left: 80%"></span><span class="irs-grid-pol" style="left: 100%"></span><span class="irs-grid-text js-grid-text-4" style="left: 100%; margin-left: 0%;">99 998</span></span><span class="irs-bar" style="left: 4.34783%; width: 91.3044%;"></span><span class="irs-shadow shadow-from" style="display: none;"></span><span class="irs-shadow shadow-to" style="display: none;"></span><span class="irs-slider from" style="left: 0%;"></span><span class="irs-slider to" style="left: 91.3044%;"></span></span>
I managed to trigger it within 'drawer' with jQuery on click with woof_init_ion_sliders().
However, I need to trigger a whole bunch of functions: slider, checkboxes and dropdown menus, when the 'drawer' opens.Kind Regards
Michael
Hi Pablo,
Thank you for your email,
I am afraid at the moment I am not able to provide you with the direct link to the site. It is still in build process.
I can supply you with any information you need.
My colleagues added WOOF as a sidebar in WordPress admin (Dashboard>Appearance>Widgets) in Astra theme. On mobile screens the filter is rendered inside a slide out/in 'drawer'. The WOOF js does not work with this set up. It works fine when the filter is placed within main body of the page.
For example the slider HTML is not rendered inside 'drawer':
<span class="irs js-irs-1 irs-with-grid"><span class="irs"><span class="irs-line" tabindex="-1"><span class="irs-line-left"></span><span class="irs-line-mid"></span><span class="irs-line-right"></span></span><span class="irs-min" style="visibility: hidden;">$5</span><span class="irs-max" style="visibility: hidden;">$99 998</span><span class="irs-from" style="visibility: visible; left: 0.197628%;">$5</span><span class="irs-to" style="visibility: visible; left: 86.5613%;">$99 998</span><span class="irs-single" style="visibility: hidden; left: 38.2411%;">$5 — $99 998</span></span><span class="irs-grid" style="width: 91.3044%; left: 4.24783%;"><span class="irs-grid-pol" style="left: 0%"></span><span class="irs-grid-text js-grid-text-0" style="left: 0%; margin-left: 0%;">5</span><span class="irs-grid-pol small" style="left: 20%"></span><span class="irs-grid-pol small" style="left: 15%"></span><span class="irs-grid-pol small" style="left: 10%"></span><span class="irs-grid-pol small" style="left: 5%"></span><span class="irs-grid-pol" style="left: 25%"></span><span class="irs-grid-text js-grid-text-1" style="left: 25%; visibility: visible; margin-left: 0%;">25 003</span><span class="irs-grid-pol small" style="left: 45%"></span><span class="irs-grid-pol small" style="left: 40%"></span><span class="irs-grid-pol small" style="left: 35%"></span><span class="irs-grid-pol small" style="left: 30%"></span><span class="irs-grid-pol" style="left: 50%"></span><span class="irs-grid-text js-grid-text-2" style="left: 50%; visibility: visible; margin-left: 0%;">50 002</span><span class="irs-grid-pol small" style="left: 70%"></span><span class="irs-grid-pol small" style="left: 65%"></span><span class="irs-grid-pol small" style="left: 60%"></span><span class="irs-grid-pol small" style="left: 55%"></span><span class="irs-grid-pol" style="left: 75%"></span><span class="irs-grid-text js-grid-text-3" style="left: 75%; visibility: visible; margin-left: 0%;">75 000</span><span class="irs-grid-pol small" style="left: 95%"></span><span class="irs-grid-pol small" style="left: 90%"></span><span class="irs-grid-pol small" style="left: 85%"></span><span class="irs-grid-pol small" style="left: 80%"></span><span class="irs-grid-pol" style="left: 100%"></span><span class="irs-grid-text js-grid-text-4" style="left: 100%; margin-left: 0%;">99 998</span></span><span class="irs-bar" style="left: 4.34783%; width: 91.3044%;"></span><span class="irs-shadow shadow-from" style="display: none;"></span><span class="irs-shadow shadow-to" style="display: none;"></span><span class="irs-slider from" style="left: 0%;"></span><span class="irs-slider to" style="left: 91.3044%;"></span></span>
I managed to trigger it within 'drawer' with jQuery on click with woof_init_ion_sliders().
However, I need to trigger a whole bunch of functions: slider, checkboxes and dropdown menus, when the 'drawer' opens.
Kind Regards
Michael
Quote from Pablo Borysenco on October 6, 2020, 12:12Hello Michael
Init these js functions:
woof_draw_products_top_panel();
woof_mass_reinit();//infinite scroll
woof_infinite();
/*tooltip*/
woof_init_tooltip();
Hello Michael
Init these js functions:
woof_draw_products_top_panel();
woof_mass_reinit();
//infinite scroll
woof_infinite();
/*tooltip*/
woof_init_tooltip();