Store Locator Plus

I’m getting ready to install a plug-in that enables visitors to a client site to find what they are looking for. I was envisioning this to be a difficult process, but then I found this gem: http://tx.ag/ru7hjk

Initial Setup & Thoughts

I installed the theme without incident. I added in a few spots, set a few options, selected the “Big Map Rev 01” theme, and it’s ready to boogie with minimal tweaks.

It took me a moment to figure out that I needed to create a page in “full width” layout, and that the short-code needed was simply [ SLPLUS ] (no spaces). That wasn’t overly clear in the directions, but not hard to figure out either.

The admin panel is well laid out, easy to use, and has those fabulous question marks to pull out extra info for you when needed. I like it.

[Tweet “Find what your looking for with the Store Locator Plus (WP Plugin)”]

Little Blips

The styling of the theme has some oddities that need fixing, and the formatting of the address in the map bubble is very clumsy. Lastly, I don’t readily see where I can change the default radius to 10 miles instead of 200.

Progress

6/26/14 (wee hours):
I found the theme CSS file (bigmap_01.css), and fixed the misalignment of the locations side bar by adjusting the height and bottom of #map_sidebar:

#map_sidebar {
 background: none repeat scroll 0 0 #000000;
 right: 0;
 opacity: 0.7;
 position: absolute;
 bottom: 2%; /*was 9.3% */
 height: 88%; /*was 84% */

Editing what’s IN the map bubble is a whole other matter! I did some brute force styling on the slp.js file to force the image to only show up 150 px square. It ignored all placement styling though.

case 'wrap':
 switch (modarg) {
 case 'img':
 prefix = '<img src="';
 suffix = '" style="height:150px;width:150px;" class="sl_info_bubble_main_image">'; /*add in style tag -ddb062614*/
 break;

There is an add-on to make editing this bubble much simpler, but it is a little pricey at $50. I want to see if I can figure it out first.

6/26/14: I figured it out! Mostly.

I still won’t let me float the image to the left of the text yet, but I have found the code controlling how the text is displayed.
Caution: If you follow in my foot steps, follow my first step too – make a backup copy of the code before you make edits!

In the class.slplus.php file the map bubble is formatted with shortcodes. I moved the output lines around, and added some wrapper html and div layers to achieve the look I wanted. It took lots of experimenting!

I came to realize that the map bubble was a little large, so I found the code to edit that on the bigmap_01.css taking the min & max widths down a notch. They were set to 33vw.

#sl_info_bubble span {
  display: block; 
  min-width: 15vw;  
  max-width: 15vw; }

Looking Ahead

  • Set default radius to something other than 200 miles.
  • Update links within the bubble to open in a new window.
  • Enable zoom controls.
  • Disable scroll wheel on the map.
  • There’s a 30-day money-back guarantee when purchasing the add-ons, but I don’t think I’ll be needing them at this time.

Leave a Reply