This issue happened for me in Listify, but it should apply to any FacetWP form you don’t want to refresh.
We wanted to display the FacetWP form on the home page, and have it automatically geolocate the user. This can be done simply with this jQuery code, with a click event on the .locate-me element.
I found code on the Listify site that should do this, but it causes the form to reload repeatedly. I contacted them but they say they didn’t have that issue.
The problem with this is that when the location gets set, the form reloads, causing it to “flash”.
The Solution
I used this fairly simple jQuery:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
jQuery(document).ready(function($) { //autolocate for facetwp FWP.loading_handler = function() {} //turn off the loading animation var located = false; //only locate once, stop form from reloading continually if( $('body').hasClass('home') ) { $(document).on('facetwp-loaded', function() { if( located == false ) { $('.locate-me').trigger('click'); //geolocate located = true; } }); } }); |
Bonus: FacetWP results scrolling
When viewing the second page of results in FacetWP, the listings update but the page doesn’t change, which means the user must scroll up manually for each new page. The FacetWP site lists some code to do this automatically, but it also runs on the first page. This means that the search form is now out of view.
This code will only do the auto-scroll for pages after the first page:
|
1 2 3 4 5 6 7 8 9 10 |
//scroll to top on new page of results $(document).on('facetwp-loaded', function() { if( FWP.loaded ) { // if page > 1 $('html, body').animate({ scrollTop: $('.facetwp-template').offset().top }, 500); } }); |
FWP.loaded is the important part – it’s only true after the first page.
Both of these will greatly improve user experience in Listify using FacetWP.
Comments 6
Hello, I’m currently having trouble to set FacetWP with listify. Did you have any display trouble? I don’t have any search form on my homepage since I activated the facet plugin.
I think your code can help me, where did you put your jQuery?
Thanks 🙂
Author
Hey zm, as soon as you enable FacetWP the search form will disappear, because FacetWP uses its own search, which you need to configure.
There’s a bit more information here: http://listify.astoundify.com/article/328-use-facetwp-to-filter-listings
I think the documentation is a bit sparse. If you need more of a walkthrough, I could write a post on that.
Hey 🙂
Thanks for the quick reply. Actually I did know that activating Facet will unable all the wp-jobmanager search functions. But I had lots of trouble configuring facet since I couldn’t manage to add my searchbox to my index. I did a clean install of wordpress and listify again, so I’ll tell you if I’ll use facet again later 😉
Hi! You know if there are a way of show user location with a marker in the map when press location filter?
Thanks!
Hi David,
I have done an installation of FacetWp Plugin on Listify (all last updates) and I have trouble with the Location / Proximity search field which doesn t work on the listing search page https://loctim.com/jobs
I ve tried to desactivate the other plugins, reintall the facetwp plugin, reindexing the facetwp location field and moreover the geolocation search works well on native Listify (when facetwp is desactivated).
Could you help on that issue please ?
Regards, Franck
This was so helpful! Thank you.