Results Layout ShortcodesThe 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 can be changed or checked off under the Settings* tab the plugin.
* formerly referred to as Experience tab, if you do not see Settings in the UI you are not using the latest version of Store locator Plus
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
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”]. New short code introduced with Experience add-on update 4.8.2 to allow append function so Google searches there first. [slplus append_to_search=” county”] , add where the quotes are the country you wish to append on the search page.
The Map
This is where the map will be displayed. The map server is Google by default and uses 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. To change the bubble info requires the Experience add-on.
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 (note where the word Experience appears in the screenshot, think Settings)
[slplus]
Can go on any WordPress page or post.
[slp_search]
Display the SLP search form. Goes inside the locator layout set under Settings / View.
[slp_map]
Display the map. Goes inside the locator layout set under Settings / View.
[slp_results]
Display the locations after a search. Goes inside the locator layout set under Settings / 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 under the Settings/ View and then entering Custom CSS in the box labeled CSS.
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.