Customized search & filter for custom post type

How To
1

Is there anyone that has experience with a Search & Filter plugin that works with Bricks? I tried SearchandFilter plugin combined with metabox, but the filter doesn’t work with Bricks. I asked the searchandfilter developers, but they say it doesn’t integrate with Bricks.

I’m building a website for a holiday parc where you can search an accomodation based on f.i. number of people, airconditioning, wellness facilities etc. I do not want to develop it in Elementor anymore, but I know I can easily accomplish this in Ele together with Jet smart filter.

5 Likes
2

With Bricks, I have had good luck with search and filter on both normal post and custom post types, ie. Meta Box custom post, Pods and Toolset custom post types, using either Ajax Search Pro or Ivory Search.

1 Like
3

Thanks for your reply. I’ve already set a Metabox custom post type with custom fields and that didn’t work out with Search&Filter, so I’ll try Ajax Search pro or Ivory Search.

4

Please let me know if you need any further help or what solution you come up with! Always happy to help out! All of my websites use dynamic data and integrating things like search is something I find my self doing often.

2 Likes
5

Trying to use S&FPro with a CPT, but it doesn’t appear to be filtering the data. Any examples you have of how to set it up and what the requirements are for the template showing the CPT archive?

6

WP Grid Builder should work fine. Can test and update if anyone’s interested.

4 Likes
7

S&F Pro takes a little tweaking to get working with Bricks but it can be done. Their docs have a few hints about what to do if you haven’t already taken a read. Custom - Search & Filter Pro Anyways, I’ll layout an example for you.

  • Setup custom post type called “product” (assuming you know how this works)
  • Setup custom taxonomy called “product_category” (assuming you know how this works)
  • In S&F, filter by “product_category” (instructions below)
  1. Create a new Search form and compare your settings to the attached screenshots below for the settings you should pay attention to.
  2. Take the search form shortcode and add it to your results page somewhere so you can use the filters.
  3. If you want ajax to work, add a container with a class (i used .results) around your post query on your results page.
  4. Lastly, you have to inject your S&F ID into the query that you’re wanting to filter using something like this somewhere in php. Mine is in functions.php of my child theme.
add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
	if ( $query_vars['post_type'] == 'product' ) {
		$query_vars['search_filter_id'] = 138;
	}
    return $query_vars;
}, 10, 3 );
  • Make sure you put your search_filter_id in there. You may want to further limit the if statement as well so it only affects your results page.

Screen Shot 2022-05-25 at 9.02.26 PM
Screen Shot 2022-05-25 at 9.02.26 PM2826×2060 482 KB

Screen Shot 2022-05-25 at 9.03.59 PM
Screen Shot 2022-05-25 at 9.03.59 PM2848×1906 355 KB

8 Likes
8

Just adding this as an alternate option to step 4. Put a shortcode just before your loop container like this with your search_filter_id and it will do the rest by magic:

[searchandfilter id=“138” action=“filter_next_query”]

and here’s an example of the general layout in Bricks.

Screen Shot 2022-05-26 at 2.00.47 PM
Screen Shot 2022-05-26 at 2.00.47 PM594×514 22.2 KB

6 Likes
9

As I started the topic a while a go: thanks a lot for sharing this! I will take advantage of it as soon as I need it. I’ll keep in my favorites :slight_smile:

10

Brilliant post @cmstew :muscle:

11

Hey all,

While this works, I just found out that Search & Filter causes issues with the custom css editor for elements in the builder just by being active. :frowning:

It throws javascript errors in the console and makes it so custom css is not saved. I’ve submitted a ticket to the author of the plugin to hopefully have it fixed.

1 Like
12

I just heard back from support and we’ve come up with this temporary solution to resolve the issue:

function dequeue_unnecessary_scripts() {

    if ( function_exists('bricks_is_builder_main') && bricks_is_builder_main() ) {      
         wp_deregister_script( 'search-filter-plugin-build' );
    }
}
add_action( 'wp_print_scripts', 'dequeue_unnecessary_scripts' );

I was also informed that there is a proper Bricks integration on their Roadmap, but it’s still a ways out.

3 Likes
13

Hi @cmstew . Your post was excellent thanks, however just one correction in your code which was breaking my Blog Archive page:

The line:

if ( $query_vars['post_type'] = 'product' ) {

should be two equals signs:

if ( $query_vars['post_type'] == 'product' ) {
2 Likes
14

Good catch! I’ve updated my post. :grinning:

15

Sorry another change! :grinning:

Actually the $query_vars[‘post_type’] is an array so I had to change it to:

if ( in_array('products',$query_vars['post_type']) ) {
16

Interesting. That doesn’t make sense to me since post_type should be a single post_type. It shouldn’t be an array, otherwise it would be called post_types. I don’t think I’ll be changing my example above for now.

17

Hey,

For anyone who’s been following along, I just wrote a post about a plugin I’ve been building that integrates Search & Filter with Bricks. Check it out if you so desire:

18

@bricksandmortar, have you used Ajax search pro to filter a query in Bricks? I was able to filter a cpt archive, but pagination or infinite loop did not work. I used interactions to make a load more button and that will load more items, but they are not filtered. I am waiting to hear from their support but was curious if you have used it like this? This is a link to the page if you want to take a look. https://www.staging.srusigns.ca/products/