Link Store search to homepage button

Hi @timmy321

Thank you for getting in touch, sorry to hear you are experiencing issues.

It looks like the Nominatim geocoder may be experiencing issues, please can we ask you to temporarily remove the Country Restriction to get started, for some reason we’re seeing an empty results set coming back regardless of which address is entered.

Regarding having a separate form, unfortunately our plugin does not support that right now. You’d need to write your own JavaScript to read query variables and populate the store locator, we are working on this but it’s not currently supported.

Is there anything else I can help you with?

Kind regards
– Perry

Hi @timmy321

We understand what you are trying to achieve here, unfortunately it’s not possible “out of the box” with our plugin.

If you are able to set up the form on your home page, set up your map page, and provide us with links to both of those pages, then we’d be quite happy to provide JavaScript to marry the two up, if that would help?

Kind regards
– Perry

Hi @timmy321

Please firstly go to Maps -> Settings -> Advanced and under the Custom CSS field, please paste the following:

body.page-id-4 #wpgmza_map,
	body.page-id-4 .wpgmza_map
{
	display: none !important;
}

On the same page, please then paste the following into Custom JS:

jQuery(function($) {

	if(!window.WPGMZA)
		return;

	$("body.page-id-4 input.wpgmza-search").off("click");
	$("body.page-id-4 input.wpgmza-search").on("click", function(event) {
	
		var address		= $("input.wpgmza-address").val();
		var radius		= $("select.wpgmza-radius").val();
		
		window.location.href = 
			"/gym-locator?address=" 
			+ encodeURIComponent(address) 
			+ "&radius=" 
			+ encodeURIComponent(radius);
	
	});
	
	var address, radius;
	
	if(address = WPGMZA.getQueryParamValue("address") && radius = WPGMZA.getQueryParamValue("radius"))
	{
		$("input.wpgmza-address").val(address);
		$("select.wpgmza-radius").val(radius);
		
		$("input.wpgmza-search").click();
	}

});

Please confirm that works as expected?

Kind regards
– Perry

Hi @timmy321

Thank you for that, I do beg your pardon – I made a small mistake there,

Please can you change the line

if(address = WPGMZA.getQueryParamValue("address") && radius = WPGMZA.getQueryParamValue("radius"))

to

if((address = WPGMZA.getQueryParamValue("address")) && (radius = WPGMZA.getQueryParamValue("radius")))

If you replace that line then the code should work as expected. Your theme and Elementor shouldn’t have any effect on this at all.

Kind regards
– Perry

Hi Tim

No worries, not at all, I promise this will work, it just needs tweaking 🙂

Please remove all the Custom JS and replace it with this new code:

jQuery(function($) {

	if(!window.WPGMZA)
		return;

	$("body.page-id-4 input.wpgmza-search").off("click");
	$("body.page-id-4 input.wpgmza-search").on("click", function(event) {
	
		var address		= $("input.wpgmza-address").val();
		var radius		= $("select.wpgmza-radius").val();
		
		window.location.href = 
			"/gym-locator?address=" 
			+ encodeURIComponent(address) 
			+ "&radius=" 
			+ encodeURIComponent(radius);
	
	});
	
	var address, radius;
	
	if((address = WPGMZA.getQueryParamValue("address")) && (radius = WPGMZA.getQueryParamValue("radius")))
	{
		$("input.wpgmza-address").val(address);
		$("select.wpgmza-radius").val(radius);
		
		$(window).on("load", function(event) {
			$("input.wpgmza-search").click();
		});
	}

});

I can see you’ve entered the Custom CSS however it isn’t rendered on the page at all, are you using any kind of caching plugin which you might need to clear?

Kind regards
– Perry

Hi @timmy321

From our end, the JavaScript is now working perfectly – typing in an address, eg Bristol, on the home page and clicking search will take me to the Gym Locator page with Bristol in the centre of the map at the radius we selected.

Please can you confirm that is working as expected at your end?

I’m not sure why that CSS isn’t being rendered at this stage, we can see it if we read the plugins settings in this pages source code, however for some reason it’s just not being rendered into the page itself.

Could you try disabling CSS Hero temporarily?

Kind regards
– Perry