Search Form Style

Search Form Style sets the styling for the interactive locator elements on your site.   It uses pre-built jQuery Theme Roller style CSS designs to create a simple way to style interactive elements such as the autocomplete feature (available in WPSLP Experience or with MySLP Professional) on the address box. with Experience or Professional level plan additional search elements are available, including a one click checkbox to “Hide the search form”  altogether.

The default styling is set to “None” which provides not special styling rules from interactive JavaScript elements in the locator interface.   This allows the site designer to create their own styles for the website in which the locator will be placed.

Search Form Style Default None 2017-05-23_16-20-30.png
Default styling for autocomplete is “none”.  The theme in this example does not specifiy any ui-autocomplete styling. The background inherits the transparent background used by the website as the default for all divs.

The base service also includes the Base jQuery theme.

 

Setting A New Style

For WordPress plugin users go to the Store Locator Plus selection on the sidebar menu.

For MySLP users go to Store Locator Plus sidebar menu.

Select Settings/Search from the tab list.

Scroll down to the Appearance section and expand it by clicking the word “Appearance” if necessary.

Select a new style from the Search Form Style drop-down menu.

Selecting Base Search Form Style
Selecting a search form style for interactive elements.
jQuery Base default styling 2017-05-23_16-23-52.png
jQuery Base Default Styling

Available For WPSLP and MySLP

Search Form Style is a feature that is included in the base plugin of Store Locator Plus for WordPress and is available under Store Locator Plus for all levels of the MySLP service.   Premier members on WPSLP and Enterprise Level users for MySLP will have multiple options for the Search Form Style.

 

 

Curly Quotes In WordPress Shortcodes

WordPress blog posts likes to use curly quotes instead of straight quotes whenever you write an article.     Our documentation site is built on WordPress which means many of our articles are replaced any quotes we type in an article with curly quotes.

The problem is that the WordPress shortcode processor does NOT like curly quotes.   If you use curly quotes in a shortcode attribute such as [slp_directory by=”city”] and those quotes are “curly”, WordPress treats the quotes as a plain-old alphabetic character just like the C-I-T or Y in “city”.   In other words WordPress things you mean “by quote-city-quote” not “by city”.

Why is that an issue?

If you copy-and-paste most examples from this documentation site WordPress will copy the “pretty curly quotes” into your shortcode.     If you paste that into your WordPress page it breaks.

Straight versus curly quotes when pasted into a page.

An example of how this can impact Store Locator Plus can be seen from my example where I pasted the slp_directory shortcode directly from the docs site into my test site.    I get an invalid data query because WordPress added curly-quotes to my data field name.    The SLP database does not have a field name quotesl_storequote but does have a field named sl_store.

The fix?

Make sure you re-type each quote manually.  Typing the ” in your blog instead of copy-and-paste will ensure you are getting “straight quotes” in your shortcode attributes not curly quotes.

This is how the example looks now that the curly quotes have been replaced with straight quotes.

Store Locator Plus Additional Functionality

Store Locator Plus .     Store Locator Plus SaaS:  Enterprise level subscribers have a module that adds URL control functionality.

Upgraded  Premium Features

Enterprise / Premier Users

Territory Bounds module was moved from the General | Data tab to the General | Server | Web App Settings section.  Cluster Map Markers is useful for a large dataset in close proximity to each other on the map.

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.

Layout Shortcode Cheat Sheet

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.

Upgrading from Legacy add-ons to Power add-on

Return customers who have upgraded to the newer add-ons will notice a change in the menu location of some of the functionality/features  that were part of the separate legacy add-ons ,  now available in the Power add-on. (see Legacy to feature add-ons)

Legacy Add-on Tagalong = Categories on the header tab in the Store Locator Plus User Interface.

Legacy Pages = General / Data /Enable Pages.  To use the SEO Pages you must first “enable Pages” under this setting.

Legacy Contact Extender = General/Data/Enable Contact fields.

Legacy ProPack = Various fields and functions

  •  Import Under Locations/Import
  •  Location sensor checkbox is located under the General/User Interface tab.

 

 

 

Premier URL Control

Enabling URL Controls

Enabling URL Control features will require an active Premier Subscription.

Location Selection

When the URL Control module is active you can enable location ID passing by turning on “Location Selection” under the General / User Interface tab.

When this is enabled you can pass in a location ID by adding ?location=<id> to the end of the page address where your locator map is deployed with the [slplus] shortcode.

When the location ID is present and the settings is enabled the specified location will be activated on the location map as if a user had clicked the marker on the map.  This will show the info bubble by default.

Note: If cluster map markers are enabled they will be turned off for the initial page load.   Subsequent input or searches by the user will re-activate the cluster map markers.

Note: When passing in a location ID via a URL the location latitude/longitude will become the center point for the map display.  The location that is shown will be at the top of the result listing if sort by distance (default) is in place.

 

Location Limit

When the URL Control module is active you can enable location ID passing by turning on “Location Limit” under the General / User Interface tab.

When this is enabled you can pass in a limit for the number of locations to be returned when the map initially loads and when a search is performed by adding ?limit=<id> to the end of the page address where your locator map is deployed with the [slplus] shortcode.

Filter By Tag

When the URL Control module is active you can filter locations to show only this matching the tag(s) by turning on “Filter By Tag” under the General / User Interface tab.

This setting will require the Power Add On to be installed and active.

This setting will also require the following shortcode to be present in the Results Layout.  The shortcode is standard in most Store Locator Plus provided Style Gallery Styles.  It can be removed or changed if you have the Experience Add On active.

[slp_search_element selector_with_label="tag"]

An example of a Results Layout where locations are assigned a single tag.  With multiple tags the entire list will be hyperlinked and will not likely perform as expected.  Note the [slp_location data.sl_tags] takes the place of the [slp_location pro_tags] shortcode that is set by default on most Style Gallery styles.

 

[slp_addon section=primary position=first] [slp_location name] [slp_location uml_buttons] [slp_location gfi_buttons] [slp_location distance_1] [slp_location distance_unit] [slp_addon section=primary position=last]

 

[slp_addon section=secondary position=first] [slp_location address] [slp_location address2] [slp_location city_state_zip] [slp_location country] [slp_location phone] [slp_location fax] [slp_addon section=secondary position=last]

 

[slp_addon section=tertiary position=first] [slp_location web_link] [slp_location email_link] [slp_location directions_text] [slp_location hours] [slp_location data.sl_tags] [slp_location iconarray wrap=”fullspan”] [slp_location eventiconarray wrap=”fullspan”] [slp_location socialiconarray wrap=”fullspan”] [slp_addon section=tertiary position=last]

</div>

If you have URL controls enabled you can now pass in location filters based on a tag by adding ?only_with_tag=red to the end of your locations page URL.

Combining URL Options

You can combine the URL control options by using standard URL notation for parameter passing.

The standard is to define the first parameter by starting with a question mark.

Additional parameters are started with an ampersand.

To pass a location ID and a location limit, in this example to show ONLY the location specified, you would add ?location=32&limit=1 to your map page URL.

 

Videos

How to delete multiple tags under locations

With the Power add-on you will find additional Bulk Actions under the Locations/Manage panel.  There is a  drop down menu under the Bulk actions tab that can be utilized to remove many, some or all tags associated with the location data.  Check off which locations you want to remove the tags from, or you may check off all and select the filter to “Apply to all”

Bulk Action with Power allows you to remove tags

Map display options

Map Display

The Experience add-on for the WP Store Locator Plus or the MySLP/Professional Plan  allows you to customize the way your Map  is displayed and behaves.

With the WPSLP Experience add-on installed and activated  go to Settings/Map.

  • Show Map (default)
  • Hide map until search
  • Image until search
  • Do not autozoom
  • Full Screen (With  WPSLP Experience add-on or Professional level MYSLP)

Appearance

Additional options such as Hide the Map entirely or to change the layout  are available with add-ons. (See   Map layout and appearance   WPSLP Experience Add-on.   or if you have  purchased the Professional and /or Enterprise level MYSLP SaaS . If you do not have the Add-on or the corresponding MySLP plan,  the  optional settings will  NOT appear.   (Note: With MYSLP there is a sidebar menu  called Store Locator Plus/Settings where you will find the same. See Adjust Locator styling for more information)

The additional options with the above mentioned plans or add-ons allows you to  hide the map , change the map layout, change the map bubble display, and/or  hide the map info bubble.  The Plugin Style under View (WPSLP) may supersede these settings. Choose one that  will compliment your theme or utilizes the add-on features available to you.