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.

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.

Store Locator Plus Additional Functionality

Store Locator Plus .    Premier subscription holders with active subscriptions for WordPress  Store Locator Plus or are Enterprise level subscribers for MySLP have a module that adds URL control functionality.

 

Upgraded  Premium Features

Enabling Modules

The application separates functionality into different application modules.    This will ensure that extra overhead is not incurred for features not being deployed in your environment.  The interface for turning modules on and off is found under the General | Server tab in the Web App Settings section.

Power Users

The WordPress plugin includes a module for building SEO friendly web pages based on location data.   The option is a checkbox to enable the Pages module . This can be found under the General | Server | Web App Settings section.

Enterprise / Premier Users

Enabling the Territory Bounds module was moved from the General | Data tab to the General | Server | Web App Settings section.

URL Control

A  URL Control module was been added to the application for Enterprise or premier subscribers.   Enabling this module will turn on the interface to allow additional data to be presented in a web page URL to impact how the locator behaves.

URL Control : Allow Location In URL

The first URL Control option is to pass a location ID in via a URL.   Adding ?location=<id> to the end of a web page address that hosts the locator will cause the page to load with the specified location being highlighted as if the map marker was clicked.  The default behavior is to show the info bubble for that location.