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.
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.
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
Advanced
- 150 Locations
- 1,000 Map Views
- Extra map views billed at $5/1000 views
- Basic locator styling
Professional
- 5,000 Locations
- 5,000 Map Views
- Extra map views billed at $5/1000 views
- Unlimited Categories
- GPS Location Sensor
- CSV import and export
- Full control over search form and results layout
- Map color scheme and element styling
- Feature locations
- Directory listings
Enterprise
- 15,000 Locations
- 8,000 Map Views
- Extra map views billed at $5/1000 views
- Unlimited Categories
- GPS Location Sensor
- CSV import and export
- Full control over search form and results layout
- Map color scheme and element styling
- Feature locations
- Directory listings
- Scheduled CSV Imports
- Advanced Reporting
- Territories
- Cluster Map Markers