FacetWP: How to automatically get proximity location in Listify

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:

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:

	//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.