Why Good JavaScript Code Is Critical To Your Locator

Whether you are using our MySLP SaaS service or our WordPress plugins for Store Locator Plus, having a web page that is loading “clean” JavaScript code is CRITICAL to the functionality of your locator.   Most web pages today, and certainly those including an interactive map, are far removed from static HTML and images.   Today’s web pages are full-on applications.   They are programs that are running locally on your device to draw a page that looks similar to the old-time static HTML pages but with a lot more cool interactions; like maps.

While these new interfaces are cool and certainly make the web easier to use they come at a cost.   It requires that all of the little mini-applets that you are loading on a page to show to your users play nicely together.   Every single interactive component like that Google Ads sidebar, the Recaptcha validation and maps are all separate programs that are playing in the same “pool”.    The problem with this is that it is very easy for any one of those components to “go haywire” and spoil the fun for everyone else.

Part of the issue is that for most web page builders you have ZERO control over WHEN you get your turn to jump in the pool.   Do you get in first?   Or do you get in after someone left their “code turd” in the pool?   How well your app runs can depend a lot on WHEN it gets to run.  To make matters more complicated an interactive page may not “sprout new problems” until AFTER the user starts interacting with the page.   Maybe it happens when a user clicks on an ad that is being tracked which then breaks the code and all subsequent JavaScript is running in a “polluted pool”.

Often the Store Locator Plus map is the most visual an interactive element on the page.  It happens to be what most people notice first when JavaScript is broken.   You won’t notice if your ad-click is not being tracked but you sure as heck notice when you try to look up locations and the map doesn’t change.    Often the cry goes out “you broke the locator” when many times it is something else that broke well before the locator had a chance to do its work.

Check For JavaScript Code Errors

Use your web browser developer tools.   All modern browsers have this functionality and it can give you some clues as to what is really going on.    If you see errors in the console you will want to clean this up and see if it resolves the issues with the locator.

Safari

Go to Safari | Preferences | Advanced and click “Show Develop menu in menu bar”.

Safari Turn On Dev Tools
Safari Turn On Dev Tools

 

To check your JavaScript Console go to Develop | Show JavaScript Console

Look for any red exclamation marks and look at the error logs to suss out JavaScript code issues.

JavaScript Code Errors In Web Console
JavaScript Code Errors In Web Console

Firefox

Older versions of Firefox have the web developer tools enabled by default.  If you do not see the Web Developer menu option check under the Settings menu a this may be disabled by default in future releases.

To view possible JavaScript errors:

Go to Tools | Web Developer | Web Console

 

Learn More In This Video

Check out this video to learn more about the technical details of why JavaScript loading order and errors in other JavaScript code is important.

 

If you are not seeing JavaScript code errors on your page and your Store Locator Plus map is still not working please contact us!

Experience 4.9.1 | Shortcode Attributes and Settings Patch

Version 4.9.1 of the Experience add on for WordPress  has been released today.   The issues cited here do not affect MySLP service users.

Shortcode Attributes and Checkbox Settings

A bug was patched in Experience 4.9.1 that was triggered when using the [slplus] shortcode with any extra attributes.  For example [slplus center_map_at=”My Town”] would trigger the issue as would [slplus only_with_category=”Retail”].

Prior to 4.9.1 using any attribute in the slplus shortcode would turn OFF the following settings regardless of how they are set in the main Store Locator Plus settings tab:

  • allow_addy_in_url
  • disable_initial_directory
  • hide_address_entry
  • hide_map
  • immediately_show_locations
  • ignore_radius
  • show_maptoggle

Experience 4.9.1 will work with older versions of the Store Locator Plus base plugin, however we recommend you upgrade SLP, Experience, Power, and Premier to the latest 4.9.1 release to address other issues that have been patched in the past 2 weeks.

We are still working on known issues with categories and tags and hope to have a 4.9.2 series of patches out next week.

WooCommerce Interface Updates

For our WordPress plugin users the Premier add on has been updated to 4.9.1 today to address several issues.  The WooCommerce interface has been patched to fix a problem for users on non-English sites.    Version 4.9.1 also has been re-tooled to work with PHP 5.3, though you really should be running PHP 5.6 as a minimum.

MySLP Enterprise users will be getting the button bar in our year-end update of MySLP.

Button Bar Category Selector

The new Button Bar category selector, introduced in our previous release, now honors the “hide empty categories” setting.  However, unlike the other category selectors using a drop down selector coming from WordPress Core, our custom button bar interface behaves more along the lines of how we think it should.  With the button bar a category is considered empty only if no locations are attached to that category.

How is that different?  A little more explanation is warranted.

A Button Bar On A Customer Site
A Button Bar On A Customer Site

Hide Empty Categories

This is a setting that is available via the Power addon.  Yes, the Power add on.  I know we are talking about Premier here, but let’s forget about that detail for now.   Premier only adds some new user interfaces to the underlying category features provided by Power.

The Power add on allows you to attach categories to locations, such as “put all these locations in the wholesale category” and “these go in the retail category”.      You can then provide an easy way for users to filter the locations they see on your map by selecting whether they want to see retail or wholesale locations.    The default category selector , if you choose to show it, is a simple drop down menu that shows any categories you’ve added to Store Locator Plus.

Normally ALL categories you’ve created are shown. Even if there are NO locations that exist within the category.   If you have NO wholesale locations and someone picks that from the drop down category selector they see no results.

A long time back we added a “Hide If Empty” option for the category selector.   However there is a big “gotcha”.   It uses the WordPress built-in functionality for category drop downs since we didn’t want to rewrite their huge category drop down menu library.  No need to re-invent the wheel.   BUT this built-in selector has a rather unique way of defining what is an empty category.  For WordPress a category is empty if everything assign to the category is in draft mode.

Draft Mode? What?

Yes, draft mode.   We also did not want to write our own custom category engine.  Actually, to be honest WE DID do that back in Store Locator Plus 1.0.  It was a disaster.  Why recreate something built into WordPress?   Around SLP 3.0 we converted everything to use the WordPress category system.   That system uses a lot of underpinnings from pages and posts.    I think you can see where this is going.

What does that mean for hide empty?

As noted in a little not on the Hide Empty checkbox, this feature ONLY WORKS IF PAGES ARE ENABLED.  Yup, if you are using Hide Empty to not show some things on that category drop down you must ALSO be using Pages ( Enable Pages is under the General tab, BTW).     Not only that but you must change the default to be PUBLISHED instead of draft mode, which creates public SEO friendly pages for every location in your database.

You need to do that because if you don’t the WordPress category drop down creator will consider every page set to draft or private mode to be “unused” , which means those locations are not counted as part of the category.

So… The Button Bar Hide Empty

If you are using the button bar to show a category selector you can also use hide empty.   Empty means NO LOCATIONS are using that category.

For the other category selectors, like any of the drop down selectors, the old-school “it is empty if pages it not enabled” still applies.  We’re working on fixing that in the Power add on in a future release.