Store Locator Plus: Make Phone Number Clickable

Editing slp.js for Store Locator Plus in Sublime Text 3

Store Locator Plus – Google Maps is a great free plugin for WordPress with enhanced locations and layouts functionality.

But, there is a small lack of it – phone number for location, displayed in bubble on map, has not clickable. So, if you wish to use Skype or other VoIP software on your computer to make a call, you can`t.

Until author make this available (I raised support topic Phone number in bubble as link long time ago), you can apply hack described below to achieve this enhancement.

Step 1: Modify slp.js wrapper

First you must modify JavaScript wrapper library. That is JS file located at /wp-content/plugins/store-locator-le/js/slp.js

Open this file in editor, and go to line 1223 (this is related to plugin version 4.2.39), just above line that contains case 'fullspan', and insert 4 lines of code highlighted below:

case 'website':
    prefix = '<a href="';
    suffix = '" ' +
    'target="' + ((slplus.options.use_same_window === "on") ? '_self' : '_blank') + '" ' +
    'id="slp_marker_website" ' +
    'class="storelocatorlink" ' +
    '>';
    break;
case 'tel':
    prefix = '<a href="tel:';
    suffix = '" id="slp_marker_phone" class="storelocatorlink">';
    break;

case 'fullspan':
    prefix = '<span class="results_line location_' + attribute + '">';
    suffix = '</span>';
    break;

Save this modified file and you are done with first step. PasteBin code snippet https://pastebin.com/iq6fgq4f

Step 2: Modify bubble syntax

Now we have support for phone as link, but we still did not used that in bubble. So, now you can use this as:

  • proper solution – custom bubble syntax from plugin settings (this solution requires Enhanced Map addon – price 50 USD)
  • hack solution – custom bubble syntax modified in plugin core file

Proper Solution

So, you have Enhanced Map addon. Go in Dashboard to Store Locator Plus → User Experience → Map → Map Features → Enhanced Map → Buble Layout

Now find in HTML code part for phone number highlighted below

<span id="slp_bubble_email">[slp_location email         wrap    mailto ][slp_option label_email ifset email][html closing_anchor ifset email][html br ifset email]</span>
<span id="slp_bubble_phone">[html br ifset phone]
<span class="location_detail_label">[slp_option   label_phone   ifset   phone]</span>[slp_location phone         suffix    br]</span>
<span id="slp_bubble_fax"><span class="location_detail_label">[slp_option   label_fax     ifset   fax  ]</span>[slp_location fax           suffix    br]<span>

and replace it with part of code highlighted below

<span id="slp_bubble_email">[slp_location email         wrap    mailto ][slp_option label_email ifset email][html closing_anchor ifset email][html br ifset email]</span>
<span id="slp_bubble_phone">[html br ifset phone]
<span class="location_detail_label">[slp_option   label_phone   ifset   phone]</span>
[slp_location phone      wrap    tel][slp_location phone][html closing_anchor ifset phone][html br ifset phone]</span>
<span id="slp_bubble_fax"><span class="location_detail_label">[slp_option   label_fax     ifset   fax  ]</span>[slp_location fax           suffix    br]<span>

And that’s it. You are done. PasteBin code snippet https://pastebin.com/hFagYuSq

Hack Solution

So, you don’t have Enhanced Map, but you wish to modify core file. No problem, it’s legal (as plugin is released under GNU GPL3 license).

Open file /wp-content/plugins/store-locator-le/include/class.slplus.php in your editor and go to line 186 (this is related to version 4.2.39) and replace part of code for phone in Bubble HTML syntax (line 186-187) with version I provided above (three highlighted lines of second snippet in Proper Solution section).

Final Result

Now when you have set phone number for location, in bubble you’ll have clickable phone number, so visitor can click and call phone by skype or other VoIP software directly from PC/Laptop or mobile device.

Store Locator Plus: Clickable phone number in Map Bubble
Store Locator Plus: Clickable phone number in Map Bubble

Disclaimer

Please note, modified files (slp.js and class.slplus.php) will be overwritten on Store Locator plus plugin update. So, remember that before you ask me “where my fix disappeared after plugin/website upgrade” 😉


3 responses to “Store Locator Plus: Make Phone Number Clickable”

  1. I try this, but what I see if you don’t have Enhanced Map add on, php don’t read ‘bubblelayout’ from class.slplus.php (what ever changes I do, nothing happens, even if I delete bubble layout).
    What changes I have to make in .js to read bubble layout from class.slplus.php and not from outsource?

    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.