Clicking the store name should zoom in on that store

For future readers, I found a way to hack this functionality into the plugin:

– In the plugin settings, find ‘If a user hovers over the search results the store marker’ and set it to ‘Will open the info window’.

This more or less does the job, but on *hover* of the entire listing rather than on *click* of the title. To change this…

– Find the ‘/wp-content/plugins/wp-store-locator/js/wpsl-gmap.js’ file.

– Edit line 923 and change this:

$( "#wpsl-stores" ).on( "mouseenter", "li", function() {

To this:

$( "#wpsl-stores" ).on( "click", "li strong", function() {

– Edit line 927 and change this:

if ( markersArray[i].storeId == $( this ).data( "store-id" ) ) {

To this:

if ( markersArray[i].storeId == $( this ).closest( "li" ).data( "store-id" ) ) {

– Save and copy ‘wpsl-gmap.js’ to ‘wpsl-gmap.min.js’ – as it’s the min file that’s loaded on the front end. Alternately you can just edit the min file directly if you know what you’re doing.

That should do it. Optionally you can also add the following CSS to your stylesheet to style the store title as a link:

#wpsl-result-list li p strong{color:blue;cursor:pointer;}
#wpsl-result-list li p strong:hover{text-decoration:underline;}

Hope this helps someone.

I do still think this should be an option in the plugin though ??

A few corrections:

– Edit line 923 and change this:

$( "#wpsl-stores" ).on( "mouseenter", "li", function() {

To this:

$( "#wpsl-stores" ).on( "click", "li .wpsl-store-location p:first-child strong", function() {

Optionally you can also add the following CSS to your stylesheet to style the store title as a link:

#wpsl-result-list li .wpsl-store-location p:first-child strong{color:blue;cursor:pointer;}
#wpsl-result-list li .wpsl-store-location p:first-child strong:hover{text-decoration:underline;}

Or alternately, instead of the edits to the wpsl-gmap.js file above, you could just add the following code just before the closing } for the if ( $( "#wpsl-gmap" ).length ) { statement – between lines 933 & 934.

$( "#wpsl-stores" ).on( "click", "li .wpsl-store-location p:first-child strong", function() {
	var i, len;

	for ( i = 0, len = markersArray.length; i < len; i++ ) {
		if ( markersArray[i].storeId == $( this ).closest( "li" ).data( "store-id" ) ) {
			google.maps.event.trigger( markersArray[i], "click" );
			map.setCenter( markersArray[i].position );
		}
	}
});

And in the plugin settings, set ‘If a user hovers over the search results the store marker’ to ‘Does not respond’ or ‘Bounces up and down’.

• This reply was modified 7 years, 2 months ago by sipitai.