Scroll To Map

By adding the scroll_to_map class on any of the Results Layout HTML elements, WordPress Premier or MySLP Enterprise subscribers can enable the scroll to map functionality on any Store Locator Plus plugin style.    When the class has been added to an element in the results layout that element becomes clickable.  Clicking that element will scroll the map back into view and open the map marker and info bubble for the location that was clicked.

We have used this feature in the new Bennett plugin style.

To add the feature to other styles you will need to have the Premier plugin installed for WordPress.   For MySLP Enterprise users the feature is already enabled.

Go to Advanced Options (MySLP) or Store Locator Plus (WPSLP) | Settings | Results | Results Layout.

Results Layout With Scroll To Map
Results Layout With Scroll To Map

Edit the layout and add scroll_to_map to an existing class on an html element you want to trigger the scrolling feature or add class=”scroll_to_map” if the HTML element does not have a class assigned.

Learn more about other Premier / Enterprise features like the new Category Button Bar.

Category Button Bar

Bennet Plugin Style with Button Bar

The category button bar is a new category selection interface available to WordPress Premier and MySLP Enterprise subscribers.   This new feature is enabled under the Store Locator Plus (WPSLP) or Advanced Options menu then select Settings | Search | Appearance | Category Selector.

The button bar will show clickable links that display the icon and category name for the category which will filter locations that match.    The styling for the display will vary based on which plugin style you select.  Currently the Bennett style from our Plugin Style Gallery is configured to appear as a button bar.   Other styles make show checkboxes or other styles depending on how the CSS is designed.

Bennet Plugin Style with Button Bar
Bennet Plugin Style with Button Bar

Functionality is based on a single-category selection. Clicking a new category will turn off all other categories.

The map center, either the Center Map for initial map loading or the address a user entered, is retained as is the initial or current radius.  The map will zoom in-and-out to show all locations that match within the radius of the center point.

Here is the button bar using the Bennet plugins style on a modified version of the Exists theme that is deployed on the Bennet Trim Tabs site.  This video is on our development servers.

 

 

Learn about other Premier / Enterprise features.

Adjust Locator Styling

This set of instructions will require you to be using the MySLP Professional level of service or higher.   The Professional level includes the Experience add on that provides the Custom CSS rules interface.   Instructions here are specific to MySLP but will work for WordPress plugin users as well.

Get The Existing Style Rule

Open your website with your browser.

In your browser menu bar open developer tools.  This will open a developer section on your browser window.

Right-click on the element you wish to re-style.  This will show the page HTML and CSS rules in the developer window.

Select “Inspect Element”.

You will see the specific element highlighted in the HTML section of the developer window and the set of CSS rules that are applied to the element.

Right-click the top rule and select “copy”.  This will copy the entire rule including the CSS selector.

Modify The Rule Via Store Locator Plus

Login to your MySLP account or WordPress admin panel.

Go to Advanced Options in MySLP (Store Locator Plus in WordPress).

Select Settings | View from the menu.

Scroll down the page and paste the copied rule in the Custom CSS box.

You can now add to the rule using standard CSS notation.

Click Save.

View The Changes

Reload your web page.

Notes

Keep in mind many web hosts cache CSS.   Make sure you have cleared any proxy cache you have running as well as your browser cache.

A simple way to force your browser cache to reload (most of the time) is to hold down the shift key while clicking the “page reload” in your browser’s address bar.   Some browsers are overly-aggressive with caching (Safari!) and you may need to clear your history.

 

The Video

An example for our Weebly South Carolina Ice Cream site on how to tweak the CSS.

 

Featuring Locations – Top of Results and Highlighting

Store Locator Plus allows you to feature specific locations in your search results.   This requires the Experience add on  (or Premier ) for WordPress or a Professional or Enterprise account for My Store Locator Plus.    Some of the interface styles provided by the style gallery support featured location highlighting “out of the box”, such as the Default With Font Tweaks style.

Select A Style That Supports Featured Locations

The Default With Font Tweaks Style is one of the styles that highlights locations and is a good starting point for testing this functionality.  You can adjust the layout and styling afterwards to meet your specific design requirements.

WPSLP – Select the Store Locator Plus entry in the side menu.

MYSLP – Select Advanced Options in the side menu.

Go to the Settings Tab and select the View subtab.

Click on the activate button on Default With Font Tweaks in the style gallery.

Settings/View for styles

Settings vs. Experience in the User Interface

If you see the word Experience in the SLP back end you are not using the latest version of SLP. As of version 4.7.9 the menu tab formerly named “Experience” is now named Settings in Store Locator Plus . This change was made because of the confusion people had with the name in the menu and the Experience add-on.  The settings under this tab determine how the front end, that part of the plugin your site visitors interact with, looks and behaves. The settings under this  tab change how the plugin appears to the site visitor and what functionality is available to the site visitor. Some of the attributes set here can be overridden via shortcode attributes with the Experience Add-on.

Store Locator Plus Base free plugin under the OLDExperience tab
Store Locator Plus Base free plugin under the OLD Experience tab
SETTINGS Tab under version 4.7.9