Link Store search to homepage button
-
Hi there,
I’m new to website building so please bear with me.
I would like to link the store search options in my gym locator page ( http://findgyms.co.uk/gym-locator/ ) to the button on my homepage:
I’ve done a lot of googling and still can’t figure out how to do it or what the right questions to be asking are.
Basically I would like the user to be able to put their post code/zip code or location into the button on the homepage and that link to the store location results page. (I haven’t put any markers in yet though)
I’ve seen this on a number of websites so I imagine it is possible, I just don’t know how.
Could anyone please help?
Many thanks in advance,
Tim
The page I need help with: [log in to see the link]
-
Ah yes, I posted that as you replied π
Yep, The JS Code does redirect however that error message comes up when searching a location.
I tried deactivating CSS Hero and nothing changed π
This has really got me stumped.. I know the button that I’ve placed the map shortcode in is an elementor made button – i’m using the free version of elementor that doesn’t allow custom css to be put in through their web builder app. Could that somehow be preventing any further css put through wordpress or maps settings from working?
Cheers,
Tim
Well, this is strange.. Again, I do apologise.. that error message only pops up when I search am I am logged into WordPress.
The error message doesn’t pop up in different browsers or when logged out of WordPress.
So this is progress! π
Now the css is the strange one.
I have to get to work but will address this further when I’m back.
Thank you for your help Perry! I can’t believe you provide this help for free!
Take it easy,
Tim
Hi Timmy
The address being incorrectly formatted is actually an oversight in our core code, which we’ll patch, thank you for bringing that to our attention. Please again replace that JavaScript with
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; WPGMZA.getQueryParamValue = function(name) { var regex = new RegExp(name + "=([^&#]*)"); var m; if(!(m = window.location.href.match(regex))) return null; return decodeURIComponent(m[1]); }; 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(); }); } });
We can’t really comment on what Elementor may or may not be doing as we’re not familiar with the ins and outs of their code,
What I’d recommend is disabling everything except WP Google Maps (including switching back to the default theme) and then establishing if the CSS is working in that state.
From there you can start re-enabling things one by one until we find out what is causing that CSS to be dropped.
Once we’ve figured that out then from there we can advise on potential solutions for that.
I do hope that helps!
Kind regards
– PerryPerry you’re ace mate, that JS worked.. I know this is being picky, but would there also be anyway of removing the ‘no results found in this location’ message? This comes up on the homepage just before it switches over to the map page. I tried just leaving that ‘not found message’ box in the store locator blank options in dashboard but it still comes up. I wouldn’t mind this message coming up on the map page, but ideally not on the homepage just before it switches (I hope this makes sense).
Regarding the css, thank you for your suggestion and I deactivated every single plugin (apart from your maps) I have and changed theme from Astra to the Twenty Seventeen theme.
There was still no change to the css, so I’m led to believe that neither the Astra theme or Elementor will be the culprit here?
Very strange! Any further knowledge gems you could throw my way? I would add that I’m definitely up for getting the pro version of this, I was just trying to see if it works first.
Cheers Perry,
Timmy
I’ll leave the site blank with just the twenty seventeen theme and WPMaps as the plugin, maybe this will help find answers?
I eagerly await any help that can aid me to fix this π
Timmy
Hi @timmy321
For some reason that CSS is still being ignored. Perhaps your host implements some kind of caching. We’re unsure at this stage as clearly it’s not your theme or a 3rd party plugin.
Please update that to the following
jQuery(function($) { if(!window.WPGMZA) return; $("body.page-id-4 #wpgmza_map, body.page-id-4 .wpgmza_map, body.page-id-4 .wpgmza-no-results").remove(); $("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; WPGMZA.getQueryParamValue = function(name) { var regex = new RegExp(name + "=([^&#]*)"); var m; if(!(m = window.location.href.match(regex))) return null; return decodeURIComponent(m[1]); }; 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(); }); } });
This should work well for you, this code will also remove the “No results” message.
Does that work as expected?
Kind regards
– PerryPerry, you are an I.T god mate π
That’s worked a treat!
1) Does something in that JS code hide the map on the homepage too? Because it’s hidden on the homepage now (winner winner chicken dinner!)
2) The Pro version mentions that there is an option to sort markers by categories (i.e distance, title, rating), could these be custom categories? As I eventually would like to filter different types of gyms (i.e. crossfit gym, strongman gyms, bodybuilding gyms, health clubs etc.)
Also, if I purchase the pro version, does that mean I can’t seek help from this forum? I’ve seen a few forums where people are told they cannot ask questions as they’ve paid for the plugin.
Also, if you can’t answer this then I appreciate everything you’ve helped with. First class service!
Kind regards,
Timmy
One last question,
There seems to be a noticeable lag between loading the homepage with the map outline and the map disappearing? Iβve tried it on a few different browsers.
I deactivated all plugins bar WPMaps again to see if an issue lay there, but it appears not.
Is there anything that can be done so that the map is hidden as soon as the homepage loads?
Hi @timmy321
2) The Pro version mentions that there is an option to sort markers by categories (i.e distance, title, rating), could these be custom categories? As I eventually would like to filter different types of gyms (i.e. crossfit gym, strongman gyms, bodybuilding gyms, health clubs etc.) Also, if I purchase the pro version, does that mean I canβt seek help from this forum? Iβve seen a few forums where people are told they cannot ask questions as theyβve paid for the plugin.
We cannot help you with the premium add-ons here, at all. It’s against WordPress.org’s forum policies. That means we cannot offer tech support, sales or answer any other kind of questions about anything, strictly other than the plugin. You’re quite welcomed to reach out to us through our support desk or on our support forums.
There seems to be a noticeable lag between loading the homepage with the map outline and the map disappearing? Iβve tried it on a few different browsers.
The JavaScript which controls the visibility of the map runs as soon as it possibly can. If you need that hidden any sooner, ideally you’d use CSS to control that. Have you considered trying an alternative Custom CSS plugin to see if that works?
Kind regards
– PerryHi Perry,
Again thank you for replying!
Ah yes, I thought that was the case with premium add on’s, I certainly don’t want to break forum rules!
I’ve contacted css hero, as I’ve purchased their plugin and they suggested using this css:
#wpgmza_map { display:none !important; }
However, this has not had any effect either. It’s all very confusing to the layman like myself π
I feel like I’m not going to get an answer to this π
But thank you very much for your patience, persistence and help Perry.
Kind regards,
Tim
What is frustrating is that using CSS Hero and this code,
.page-id-4 .ol-unselectable canvas{
display: none;
}it makes the map disappear; but the markers, zoom in/out functions, toggle and wording ‘openstreetmap contributors’ remain. When right clicking on these to identify their path, their is no option to right click, just as if they don’t exist.
Am I making sense in my description?
Is this a thing because removing markers is a pro add on option and some code exists to prevent css from editing it?
I don’t know if I’ve broken forum rules here asking that, but if I have I apologise!
Many thanks
Tim
I don’t know what I’ve done to my website now Perry so I think I’ll say you’ve been a massive help mate but I need time now to try and fix whatever it is I’ve done..
I’m sure if you look at my site you’ll realise I’ve gone and messed it all up π
I’ll tick this as resolved,
Take care pal
Timmy
Perry, I’ve worked on this all night and I’ve managed to make the map disappear!!
The problem was that I input the map into a ‘button’ in elementor. Once I deleted the button and replaced it with a text box instead this meant that I could edit the css of the map (but only with elementor deactivated in wordpress). Then once I reactivated elementor, only the search boxes are visible π
So now I have one last request regarding the JS, I’ve used this one:
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;
WPGMZA.getQueryParamValue = function(name) {
var regex = new RegExp(name + “=([^&#]*)”);
var m;if(!(m = window.location.href.match(regex)))
return null;return decodeURIComponent(m[1]);
};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();
});
}});
which is the one you provided to fix the error message when searching (the one prior to removing the ‘no result found’ from the homepage).
Would it be possible to write the JS so that the ‘no results found in this location, please try again’ message does not show up on the homepage when searching location (it’s fine to show up on the map page).. so, similar to the last JS provided, but without hiding the map (as that strange lag didn’t seem to occur prior to the JS trying to hide the map)?
I think I might be your most complex case yet in this forum, no? π
Big thanks again, if that JS can be written I think it’s nailed!
Timmy
I think I might be using the wrong term when I say ‘lag’ too, because what it actually looks like is happening is that the site zooms in slightly on the background picture after you type in a location and press search.
Again, I hope that makes sense.
Kind regards
Hi @timmy321
In normal circumstances,
body.page-id-4 #wpgmza_map, body.page-id-4 .wpgmza_map { display:none !important; }
will work, however that code needs to be actually written to the page for it to be applied. If adding that to our plugin or CSS hero has no effect, it’s because your site isn’t outputting the code, this could be due to various reasons, usually it’s due to caching.
.page-id-4 .ol-unselectable canvas{ display: none; }
This code would only hide the map tiles, not any of the controls. I wouldn’t recommend using this personally.
If you want to hide the not found message on the front page, I’d really recommend that you use CSS rather than JS – we can provide JS if you’re still having issues getting CSS to work. If you are able to get CSS working:
body.page-id-4 .wpgmza-no-results { display: none !important; }
This CSS will prevent the message from appearing at all on the home page.
Please can you try that through whichever method you’re using to add CSS reliably?
Kind regards
– Perry
- The topic ‘Link Store search to homepage button’ is closed to new replies.