Setting up front-end filters with alternate location data sources

One scenario that comes up on occasion in support is the request to set up front-end filters when using an alternative location data source such as local or remote JSON, XML, or KML instead of using the default custom post type to manage location data. When using the default locations custom post type a Filter Settings tab is available within the plugin settings but because data properties or attributes and structure are unknown with an alternative data source, that page of settings isn’t displayed and that settings functionality isn’t available. It is, however, still possible to set up front-end filters but it requires a little bit of manual setup. The following instructions are what you and/or your developer would want to follow in this situation.

The first step to setting up manual filters is to create a new page template or add an include in a conditional statement ( is_page( ‘your-locator-page’ ) ) to an existing page template within your site’s active theme folder and adding some custom HTML markup to it. This markup includes both what the locator needs in order to function in addition to the markup for your filters.

The following example will set up four new filters: Categories, Features, City, Zip and the output would look something like this depending on your theme’s styling:

The markup for the above front-end filters combined with the locator code that would need to be in the page template looks like the following Gist (internationalization functions not included for brevity). It might look like quite a bit of code initially but it’s really just a matter of several form fields that are grouped together. Important points:

  • Each filter group has a unique ID and the bh-sl-filters class
  • All the filter groups are contained within a div element that has the bh-sl-filters-container class
  • Input/select field names should match the property/attribute name in your data

 

With the HTML markup in place you then need to add some additional code in order to get the locator functioning and each of the filters recognized. The following could be placed in your active theme’s functions.php file, a file included from functions.php, or other include or custom plugin file that you see fit.

If you prefer not to break PHP to include an inline JavaScript snippet you could enqueue a separate JS file. Please note the following on the above code within the taxonomyFilters setting object:

  • ┬áThe property on the left, such as “category” or “feature”, needs to match the property/attribute name in your location data
  • The value of the properties on the right such as “category-filter” or “features-filter“, need to match the container ID of the filter group in your markup

 

With the HTML markup code and the filter registration code in place the locator should then function as expected and you can drill down the location data with your filters. As always, please check your browser’s console if something isn’t working as expected and if you get stuck or have persistent trouble with your implementation send a support ticket via the support form.