Locator Layout

Various Add-on Packs have the ability to change the “layout” of that particular function, whether it be to the map, the results, the search form, or the style, additional controls as to how you want your particular area of the map to be laid out will be done via the Layout section of the various add-on packs. The view tab will show you what settings you currently have and provides you the CSS box to further modify your SLP plug-in.

The grayed out areas are not where you change the settings, the settings are changed under the Experience tab.
The grayed out areas are not where you change the settings, the settings are changed under the Experience tab.

Available In: Pro Pack 4.0+

Search Layout is found under the User Experience tab on the View panel when you have Pro Pack installed.

What Is It?

This setting allows the overall layout of the Store Locator Plus primary interface elements (search form, map, results section) to be re-arranged without editing code.  If the Locator Layout field is left blank the default layout is used.  This is the high level positioning of the Store Locator Plus elements.   Detailed changes to the layout of each individual “block” of output is handled by the respective add-on packs as noted below.

You can use standard HTML elements in combination with the Pro Pack specific Locator Layout shortcodes listed below.

Locator Layout Shortcodes

These shortcodes only apply to the Locator Layout admin setting.

slp_search

Renders the search form for Store Locator Plus in this location.  More Search Layout customization is available via Enhanced Search.

slp_map

Renders the Google Map for Store Locator Plus in this location. Modify the Map Layout and Bubble Layout with Enhanced Map.

slp_results

Renders the search results for the matching locations at this spot on the page. Change the Results Layout with Enhanced Results.

tagalong

Only rendered if the Tagalong add-on pack is installed. Requires an additional parameter to indicate which Tagalong element to render. Current elements available include:

  • legend – render the Tagalong category legend at this spot on the page.

Example

This will put the legend below the map and above the search results.

<div id="sl_div">

[[slp_search]]

[[slp_map]]

<h1>Location Icons</h1>
[[tagalong legend]]

<h1>Where To Play</h1>
[[slp_results]]

</div>

Style It

You can adjust the layout and look of the legend via CSS rules. You can try any of the built-in Store Locator Plus themes, create your own CSS theme for Store Locator Plus, or adjust the CSS rules with the Pro Pack Custom CSS setting. A sample CSS styling rule set (Note, the actual brackets would be single on your sheet, they are shown as double[[_]] to show as text and to not change this documentation page):

#tagalong_legend {
    margin-bottom: 24px;
}
#tagalong_list span {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    width: 150px;
}

div#map_sidebar
div.results_entry span.location_name {
color: green;
display: block;
font-weight: bold;
font-size:90%;
}
div#map_sidebar
div.results entry span.result_website{
color:blue
}

Default

The default Locator Layout is:

&lt;div id=&quot;sl_div&quot;&gt;[[slp_search]][[slp_map]][[slp_results]]&lt;/div&gt;

(Note, the actual brackets would be shown as single on your sheet, they are shown as double[[_]] to show as text and to not change the documentation page)