The Chamber Dashboard plugins make it very easy to create member listings and display the businesses on the site. The shortcode used to display businesses has a few parameters that can be specified like pagination options, business details that need to be displayed like email, phone number, business category, membership level etc.

The business_category option will take in a category slug and filter the businesses accordingly. Although this is a useful feature, it is not the easiest way to filter the business listings by category. Each category listing should go on a different page. This is sometimes useful, but not if the user wants to just sort through the listings based on category. So, we wanted to add a category filter option to the shortcode.

Adding this new feature to the existing shortcode was the best way as it will ensure that the existing styling options can stay as is.

One of the important requirement was that the businesses from the selected category had to show up on the same page without the user getting redirected to a different page. This can be easily done with Ajax, but in this case using Ajax would have been a bit complicated. I just wanted to add the feature with minimal changes to the shortcode.

So, the first thing I added was another parameter to the shortcode – show_category_filter which controls the category filter dropdown. We did not want to show the dropdown by default. So, it is set to ‘no’ and if it is set to ‘yes’, the dropdown will be displayed.

Displaying the business categories dropdown

Displaying the dropdown is done using wp_dropdown_categories() and since I wanted this function to return the dropdown, I put it inside a function cdash_bus_cat_dropdown()

The dropdown should be displayed only when the category filter is set to yes.

if($show_category_filter == 'yes'){
	$business_list .= '<p>' . cdash_bus_cat_dropdown() . '</p>';
}

This is how it will show on the front end. This is can be styled to match the theme.

Displaying the businesses from the selected category

Since there was already an option in the shortcode to take in the category, all I had to do was to pass the selected category into that parameter. Rest of if will be taken care of by the shortcode. To do that, I got the slug of the selected category and appended it to the url using jQuery.

jQuery("#cdash_select_bus_category").change(function() {
        var category_value = $(this).val();
        //var base_url = window.location.href.split('?')[0];
        var base_url = $("#cdash_bus_list_page").text();
        //alert(base_url);
        var category_url = base_url + '/?bus_category=' + category_value;
        window.location.href = category_url;
    });

I got the value of the selected category using the $_GET and passed it to the $category parameter.

if(isset($_GET['bus_category'])){
		$category = $_GET['bus_category'];
}

This ensures that the shortcode will display the businesses from the selected category and all the other shortcode parameters will work as usual.

We wanted to display the selected category to the users and an option to clear the selected category.

if($show_category_filter == 'yes'){
	// remove pagination from url
	$pattern = "/page(\/)*([0-9\/])*/i";
	$current_url = home_url( add_query_arg( array(), $wp->request ) );
	$url = preg_replace($pattern, '', $current_url);
	$business_list .= '<p>' . cdash_bus_cat_dropdown();
	if(isset($_GET['bus_category'])){
		$business_list.= '<a href="'.$url.'">Clear Filter</a>';
	}
	$business_list .= '</p>';
	$business_list .= '<p id="cdash_bus_list_page">'.$url.'</p>';
	if(isset($_GET['bus_category'])){
		$bus_cat_slug = $_GET['bus_category'];
		$bus_cat_name = get_term_by('slug', $bus_cat_slug, 'business_category');
		$business_list .= '<p>Category: ' . $bus_cat_name->name . '</p>';
	}
}