Layout Shortcode Cheat Sheet

The Experience Add On allows you to custom tailor the look and feel of the Store Locator Plus plugin on your site.   To accomplish this the plugin uses a combination of HTML and special shortcodes.   These are set via the Experience tab of the plugin and is broken into 3 main areas.

The Overall Layout

This is set via the View / Layout setting.    It determines the overall layout for the plugin based on 3 primary components: The Search Form, The Map, and The Results.

It usually consists of some HTML <div> tags , an [slp_search] shortcode, an [slp_map] shortcode, and an [slp_results] shortcode.    Some plugin styles will utilize the [slp_option] shortcode to do things like add a box title to the search form.

The Search Form

This is set via the Search / Search Layout setting.   This will determine what search entries are shown.   Typical inputs are the address/zip-code input box [slp_search_element input_with_label=”address”], a radius selection [slp_search_element dropdown_with_label=”radius”], and a find button [slp_search_element button=”submit”].

The Map

This is where the map will be displayed.  The map server, Google by default, will take over the <div id=”map”></div> that is rendered here and use JavaScript to put their map tiles in place.

When a user clicks on a map marker or on a result in the list of locations the map will show an info bubble.  The bubble layout is set via the Map / Bubble Layout setting.

The Results

This is where the location results are displayed when a user performs a search.   If not results are found or if you have the locator set to not display any locations until a users searches for them it will show the instructions or no results message.    Each result is rendered via JavaScript parsing of the results layout set in the Results / Results Layout setting.

Location fields are rendered via the [slp_location <field>] shortcode.

Layout Cheat Sheet

[slplus] 

Can go on any WordPress page or post.

[slp_search]

Display the SLP search form.   Goes inside the locator layout set under Experience / View.

[slp_map]

Display the map.   Goes inside the locator layout set under Experience / View.

[slp_results]

Display the locations after a search. Goes inside the locator layout set under Experience / View.

[slp_option]

Display a specific SLP setting.  Useful for displaying labels and box headers.  Can go inside any locator layout including the Search Layout, Map Layout, Bubble Layout, and Results Layout.

[slp_addon]

Used as a placeholder to indicate where the plugin style author thinks add on packs should render their output.  Can go in any locator layout including the Search Layout, Map Layout, Bubble Layout, and Results Layout.

Styling The Locator

By default the plugin does very little in the way of styling.  The Basic and Default plugin styles mostly defer to the styling of the content management system, WordPress Themes for example, in which it is placed.    Often these styles do not account for complex data-driven applications like Store Locator Plus and may not render nicely.   You can set your own custom CSS rules using the Experience / View Custom CSS entry.

Some of the Plugin Styles offered with Store Locator Plus will take over more control of the user interface setting box sizes, rendering explicit responsive theme screen breaks, setting colors and fonts.    These will be set automatically when selecting a plugin style.