Wix Directory Styling for MySLP

Posted by lcleveland in for Everything

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 embed 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>
https://dashboard.storelocatorplus.com/front-end/location.js

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

Location Directory With MySLP

Posted by lcleveland in Enterprise, for Everything, Professional

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

How Store Pages Templates and [slp_pages] Work

Posted by lcleveland in for WordPress, Power Add On, Professional
Available In: WordPress Store Locator Plus™ with the Power add on.
Not yet available  SLP  Managed Store Locator Plus™ (MySLP) service.

Showing A List Of Pages — Full Content

[slp_pages style=”full” no_map=”1″ pages_directory_entry_css_class=”slp_page location_details col-xs-12″]
Because there is not template specified it will display the “full” (entire/complete) SEO page.    Login to the WP site and go to Store Pages as admin, click on any page.  What you see there is what you’ll get on the page list output.
That means when we add descriptions to SEO pages (either manually editing the SEO page OR with some new description magic in development today) the ENTIRE page will show up.
Read More “How Store Pages Templates and [slp_pages] Work”

Phone Extension Dialer

Posted by lcleveland in Enterprise, Professional

 

included with MySLP Enterprise and/or WPSLP Premier.

Employ telephone dialer links with extension pauses by turning on the Use Dial Link For Phone option and setting the Phone Extension Delimiter option.

When both are enabled the links for phone numbers are set to the defacto tel: hyperlink and if a phone number contains the text specified by the Phone Extension Delimiter option it will insert a long pause at that point before continuing to dial.

This method uses the oft-support comma placeholder, adding two commas to extend the pause to allow for slower phone systems to catch up and wait for the extension to be entered.

This output behavior will appear on results under the map, directory landing pages, and store pages.

[slp_directory] Shortcode for WordPress

Posted by lcleveland in Our Add Ons, Professional

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.

Read More “[slp_directory] Shortcode for WordPress”