Wix Directory Styling for MySLP

The directory listing option for MySLP makes it easy to provide a list of states in which your locations reside. The directory listing can be easily added to any Wix site by using the directory style presentation when embedding the MySLP code.

The Wix embed code presentation leaves a bit to be desired when it comes to formatting. When you drop an embed block into a Wix page it will often add far too little padding, is not centered, and does not default to a big enough height to display a list of locations.

Getting Started With The Embed Format

When using Wix we find it easier to format the MySLP embed code by using the advanced editor.

Start by adding an Embed , HTML block into the page. Wix will drop this in a random semi-centered location on the page. Drag it down to an available space on the page.

Embedding an HTML object into a Wix site.

It is best to set the embed block to be 100% the width of the content. The gutters should be marked with a dashed line to show the left/right main content width. Stay between the gutters.

Set a default height tall enough to show the listing. An embed box height of 800 is a good start.

Relocate the ebmed HTML box to the white space of the page. You may need to add the white space to your Wix page by tweaking the height position (Y) of the elements on your page.

Click on the embed box and look for Enter Code on the top-left corner of the box.

Enter the MySLP SaaS embed code, make sure you add <style> section and include a data-presentation=”directory” attribute on the embed script to get the directory listing in place of a map of locations.

Enter the embed code and related <style>..</style> section as noted below.

Example Embedded MySLP Directory Code

The following embed code can be added to ensure CSS styling is included along with the JavaScript-based directory functionality of MySLP.

<style>
.slp_directory_list.slp_directory_style_list {
    display: flex;
	  flex-wrap: wrap;
    justify-content: space-between;
}
.slp_directory_entry {
    padding: 0 5px;
}
</style>
<script id="MySLP" type="text/javascript" src="https://dashboard.storelocatorplus.com/front-end/location.js" data-presentation="directory" data-api-key="myslp.d2bb21794722607b53b60eb3cfabb510a24603ff7e7079be8ef5f92b0e6f010d" data-rest-path="//dashboard.storelocatorplus.com/solar_at_akamaitemplate_dot_com/wp-json/myslp/v2/locations-map" data-div-id="MySLP-map-wrap"></script>

If all went well you can publish the site and should see an interactive states directory listing similar to this:

WordPress Custom CSS Rules

You can add custom CSS rules to WordPress to style your directories and location maps without having to wait for a custom Store Locator Plus® style or a theme that supports full CSS rules. WordPress has a built-in CSS customization tool that applies to all pages on the site.

You can use this custom CSS tool to do things like format the MySLP SaaS, or WPSLP plugin, directory listings.

How To Add Custom Rules

Login to your site as a site administrator.

Click on the Customize menu entry in the admin toolbar.

Click on Additional CSS in the sidebar.

Enter a fully qualified CSS rule.

This example is used to style the MySLP SaaS directory listings on the site. MySLP is a pure JavaScript embed implementation and requires the site hosting the embed to add extra CSS rules. The output changes the MySLP Directory state selector from a vertical list to a horizontal list as shown on the MySLP Directory page.

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

Load Locations from WordPress Locator to MYSLP®

Load locations does not replace the csv file import functionality available to the MySLP Professional or Enterprise level plan subscribers but it  can be used to  load  basic location data from your WordPress Store Locator Plugin (such as WP Store Locator Plus®,) into your MYSLP  account.  The basic load will not load category tables. You would need to use  import  csv file for that.

This functionality can be found from the MYSLP account, the SLP sidebar tab and under Locations as shown in the screenshot below.

The  loader supports loading locations from WordPress sites running the WordPress Store Locator Plus plugin.   If you are using a locator or directory plugin other than Store Locator Plus, please contact us to discuss the possibility of beta testing if it does not load.

MySLP: Deploying On WordPress

These instructions are for MySLP users only.  

MySLP is a monthly subscription service that allows you to deploy a locator map on ANY platform including WordPress.   It is a managed service where we handle the hosting of the locations, settings, and map software.   We keep the software updated so you don’t have to worry about it.

These instructions DO NOT APPLY to the stand alone, self managed WordPress plugin(s).

For our buy-it-and-own-it solution you will want to look at the WPSLP plugins instead of this page.

If you are NOT using My Store Locator Plus® you should think about it.

If you are using MySLP, read on…

You’ve already added your locations and generated your embed code per the instructions in our Getting Started post.  Now you are ready to deploy on your WordPress site.

Here we are going to deploy the script in a new page on our site.

MySLP : Deploying With Basic HTML

My Store Locator Plus can be deployed on any website technology that can publish basic HTML pages.   The functionality of the service depends more on the browser technology used by your site visitors than your web stack.

The most basic deployment is a local HTML file that is opened by your web browser.   Your desktop or laptop and even some mobile devices will allow you to create a basic HTML file on your device.   You can then open this file using that device’s web browser.

Getting Started With MySLP

Login to your MySLP Account shown in our home page tab:
https://dashboard.storelocatorplus.com
Login 2016 08

Add A Location

The initial login should bring you to the Locations tab on the MySLP page.

Go to the Store Locator Plus side menu to begin adding Locations or (with Professional Plan or higher)  Import locations

Click the Add Location button to add a new location.

Power (WPSLP) / Professional (MySLP) Overview

The Power add on for WordPress Store Locator Plus and the Power level for MySLP product line is within the Professional plan share similar features and functionality.  Whereas they are similar, they are not interchangeable.  For instance, you cannot use the MySLP Power or Professional  level service plan to export your WordPress location data and vice versa.  There is a feature for MySLP subscribers that will allow some basic location loading from your SLP or other WP locator base plug-in. See News feed here for more info. Additionally, MySLP does not have SEO Pages or Directory Builder capability as yet.

Note: Where the WP symbol appears below, those features are built into the WordPress SLP Power add-on only.

Categorization

Assign categories to your locations that allow users to pick a category and show only those locations.  Great for showing service versus retail centers or locations that carry specific products.