Location Directory With MySLP

Our software-as-a-service platform, MySLP, runs on many different web builders and mobile frameworks. If you are using MySLP you cannot easily create pages that contain the [slp_directory] shortcode used in the Store Locator Plus WordPress plugins. There is another way to do this with our SaaS offering.

This new MySLP feature makes it easy to add a directory of locations to any platform. Display your location directory on Weebly, Wix, WordPress, or any website management platform that supports JavaScript.

The Embed Code

When using MySLP you typically add your locations and set your map experience properties. The next step is to go to the Generate Embed page on your account dashboard to get the JavaScript needed to display the locator search form and map on your site.

Standard MySLP output with default embed code.

Embed Code For Directories

When displaying a directory, you normally do not want the location search and map to appear. You can use the data-presentation attribute with your script to tell MySLP what type of location presentation you would like to show on your site.

Here is a full script example from our test server — you can see where we added data-presentation=”directory” to the standard embed script.

<script id="MySLP" 
type="text/javascript" 
src="https://dashboard.test/front-end/location.js" 
data-presentation="directory" 
data-api-key="myslp.8322ee3d5681db51162fa332d76f74171b80b89f7a15df054c989f2d75f91a08" 
data-rest-path="//dashboard.test/enterprise_at_slp_dot_guru/wp-json/myslp/v2/locations-map" 
data-div-id="MySLP-map-wrap">
</script>

Adding data-presentation=”directory” to the script will use the directory style presentation where the <script…> embed appears versus the standard MySLP output.

Default Directory Presentation

The default setup for the directory style presentation is to show a list of states (or provinces) in a list.

Clicking on a state will show a list of locations using the results layout configuration you have set for Store Locator Plus®.

By default there is no search form, map, Store Locator Plus® tagline, or distance displayed.

An example of the Directory output with MySLP SaaS showing results after clicking the FL link.

Styling The Output With CSS

You can style the directory output by manipulating the CSS on the site where the script has been embedded. The method for adding custom CSS will depend on the platform you are using to host your site.

Horizontal List Of States

To create a horizontal list of states, add the following CSS rules (learn more about flex styling at this site) to your site:

.slp_directory_list.slp_directory_style_list {
    display: flex;
	  flex-wrap: wrap;
    justify-content: space-between;
}
.slp_directory_entry {
    padding: 0 5px;
}

Sign Up For Our SaaS Map and Directory Builder Today

Curly Quotes In WordPress Shortcodes

WordPress blog posts likes to use curly quotes instead of straight quotes whenever you write an article.     Our documentation site is built on WordPress which means many of our articles are replaced any quotes we type in an article with curly quotes.

The problem is that the WordPress shortcode processor does NOT like curly quotes.   If you use curly quotes in a shortcode attribute such as [slp_directory by=”city”] and those quotes are “curly”, WordPress treats the quotes as a plain-old alphabetic character just like the C-I-T or Y in “city”.   In other words WordPress things you mean “by quote-city-quote” not “by city”.

Why is that an issue?

If you copy-and-paste most examples from this documentation site WordPress will copy the “pretty curly quotes” into your shortcode.     If you paste that into your WordPress page it breaks.

Straight versus curly quotes when pasted into a page.

An example of how this can impact Store Locator Plus can be seen from my example where I pasted the slp_directory shortcode directly from the docs site into my test site.    I get an invalid data query because WordPress added curly-quotes to my data field name.    The SLP database does not have a field name quotesl_storequote but does have a field named sl_store.

The fix?

Make sure you re-type each quote manually.  Typing the ” in your blog instead of copy-and-paste will ensure you are getting “straight quotes” in your shortcode attributes not curly quotes.

This is how the example looks now that the curly quotes have been replaced with straight quotes.

[slp_directory] Shortcode for WordPress

MySLP SaaS Directories

Beta testing is currently underway for the MySLP SaaS version of the location directories. Since many deployment platforms do not utilize shortcodes, we have developed an alternate method for rendering the directory lists.

You can read about it on our Location Directory With MySLP SaaS post.

Power WordPress Plugin

Location directories , list of locations or states WITHOUT an interactive map, is possible in the buy-and-own WordPress plugins with the Power add-on.

The [slp_directory] shortcode is used to place a directory listing on a page or post.    There are two main modes of operation for the shortcode which is determined but the listing style selected.   The list style is determined via the style attribute. The general layout of the Landing Page listings is based on the Results Layout that is set for the base plugin.

The two modes are “list mode” and “landing page” mode.  These modes are described below.

Directory City/State/Country Filters

The directory feature of the Power add on allows you to quickly build a directory-style listing on your pages to show a list of cities, states, or countries where you have locations.

The [slp_directory] shortcode used to build this listing can be combined with a landing_page attribute to quickly refer your site visitors to an interactive map showing your locations in the selected city, state, or country.