Agile Store Locator for WordPress has a default category dropdown that can be viewed in the form of multi-select dropdowns or tabs, however, in case some users want to add additional dropdowns such as brand or special they can easily add them via ASL Settings > General tab.
Dropdowns using Shortcode Attributes #
To add the brand dropdown, follow the shortcode below.
[ASL_STORELOCATOR filter_ddl="brand"]To add the Special dropdown, follow the shortcode below.
[ASL_STORELOCATOR filter_ddl="special"]In order to add both of them together to make up to three dropdowns, use the shortcode filter_ddl with the comma-separated special, brand as provided below.
[ASL_STORELOCATOR filter_ddl="brand,special"]How to show them in the listing or infobox? #
To show the brand or the special attribute tag in the list is quite easy, all you need is to add the code below anywhere in the template where you want to display them through the ASL Customizer.
Once you add the above code in the ASL Customizer, you need to save the template via the Save Template button, the copy of the above code is as follows.
{{if str_brand}}
<li class="sl-brand">
{{:str_brand}}
</li>
{{/if}}
{{if str_special}}
<li class="sl-special">
{{:str_special}}
</li>
{{/if}}Similarly, if you have Font-Awesome installed on your site, you can add icons to your lines as follows.
{{if str_brand}}
<li class="sl-brand">
<i class="fa-solid fa-hashtag"></i>
<span>{{:str_brand}}</span>
</li>
{{/if}}
{{if str_special}}
<li class="sl-special">
<i class="fa-regular fa-comment-dots"></i>
<span>{{:str_special}}</span>
</li>
{{/if}}Similarly, we can add the code below in the infobox, so here is how it will appear in that.
{{if str_brand}}
<div class="pol-12">
<div class="info-addr-inner">
<i class="fa-solid fa-hashtag"></i>
<span class="txt-hours">{{:str_brand}}</span>
</div>
</div>
{{/if}}
{{if str_special}}
<div class="pol-12">
<div class="info-addr-inner">
<i class="fa-regular fa-comment-dots"></i>
<span class="txt-hours">{{:str_special}}</span>
</div>
</div>
{{/if}}Enable Search Filter in Dropdown Filters #
To allow users to search for options within dropdown filters, you can enable the search functionality using the ddl_search shortcode attribute.
Usage: #
Simply add ddl_search="1" to your store locator shortcode:
[ASL_STORELOCATOR ddl_search="1"]Explanation: #
- Setting
ddl_search="1"enables the search feature within all dropdown filters in the store locator. - This helps users quickly find relevant options in dropdowns by typing keywords.
By default, dropdown filters do not include a search function. Enabling this option improves usability, especially when dealing with a large number of filter options.