Search & Filter Pro Bricks Integration Plugin

cmstew · September 9, 2022, 9:22pm

Hey guys,

I’ve been building an unofficial Search & Filter extension plugin for bricks and thought I’d share it with the community. It’s by no means perfect but it works for me and I’d love some feedback. If anyone wants to try it, you can get it from my github under releases:

A few things to note about using Search & Filter and my extension for it:

There’s absolutely no warranty. Install at your own risk. It’s been tested by myself.
You have to have Search & Filter Pro installed
You have to create a new Search Form. Follow the official instructions here
You have to set Display Results to “Custom” in your Search Form
You have to set the full URL to your results page in your Search Form
If you have Pro and want ajax to work, you have to wrap your query loop in a container. Then take the container ID and put it in your Search Form Settings
This plugin comes with a Search Form Element that’s essentially a wrapper for the official Search & Filter shortcode
This plugin adds a new control for linking a Search Form to most elements with a query loop. If I’ve missed any elements, let me know and I’ll add them.

Elements that are currently supported are:

container
div
block
accordion (not the nestable one)
slider (not the nestable one)
posts
woocommerce-products

itchycode · September 9, 2022, 10:02pm

Never use the plugin before but really appreciate the contribution. Great job and Thanks!

cmstew · September 10, 2022, 2:36pm

Hey! Thanks for that. Give it a try sometime, it’s quite vast in capability.

Also, it has come to my attention that the free and pro plugins are vastly different and it’s going to take more work to get it working with the free version.

alanj · September 10, 2022, 2:51pm

Also a complete rewrite is due in Version 3 … although when that actually arrives is anyone’s guess.

Just need the same for WP Gridbuilder now!

cmstew · September 10, 2022, 3:34pm

Yeah, I’m debating whether a free integration is worth it before v3. It has been “almost out” for so long now. Lol

Astwert · January 11, 2023, 3:01pm

Hi @cmstew , i was looking for an Ajax solution for Woocommerce Archive Page filtering.
Your solution looks promising for this.
Can you help me, what kind of URL do I have to enter there.
I want to link different categories.

Thank you in advance
André

Patric · January 11, 2023, 3:28pm

Thanks cmstew for your great contribution! Well appreciated.

Nevertheless, I have switched to PionetGrid a few weeks ago and never looked back. I uninstalled S&F Pro and will never use it again.

Cheers

Patric

cmstew · January 11, 2023, 11:38pm

Just the full URL where your results will be located.

Example: https://website.com/product-archive/

No problem. PiotnetGrid has some neat features. I’ve been tempted myself. But I already have a S&F dev licence and it does what I currently need. Maybe one day. Enjoy your new toy!

Astwert · January 12, 2023, 7:25am

@Patric PionetGrid seems to be a heavy one

parktechno · January 12, 2023, 7:35am

I also tested Piotnet Grid along with Bricks and immediately deleted it. The site is impossible to use because of severe lags. WP Grid Builder looks better, but for some reason it does not want to filter data from Bricks requests. Also had to remove it for now. The question with filters is still relevant and open. I really need them, but I still don’t have a working tool

Patric · January 12, 2023, 7:51am

Hi parktechno

for sure PiotnetGrid (PG) is not a speedy one in the back-end. But my scores on the front-end are much better, see my screen shot.

Also, I see no real speed difference in the front-end if I deactivate the plugin.

What I really love about that plugin is that it is not really difficult to program widgets for it if you know a little bit of php. For example, I programmed a widget to show the STAR score from the KK Star Ratings Plugin. See screenshot 2.

Also, PG has a very fair price point in my eyes and you even get a Lifetime for that price. I think WP Grid Builder does not offer Lifetime.

BTW, I have no affiliation with Piotnet and this is just my experience as a personal user and my solution to my problem.

Cheers

Patric

Speed2

Patric · January 12, 2023, 8:15am

I was curious about the terrible speed score from Piotnet Grid (PG).

The score is from their demo site on their server. If I look at the score details (see screenshot), I think there are other things that are messing up the score, not really the plugin.

For example, 18.9s for Time to interactive??? 16.1s for LCP???

I think their demo site is just not well set-up and maybe also their server (in Vietnam?) is not the fastest one.

Anyway, as long as my own scores from my internet page are good, I don’t mind about their score… But maybe they should improve their site to not scare away new customers.

Cheers

Patric

Astwert · January 12, 2023, 9:03am

@cmstew At first of all, thank you for fast reply

I struggle a little with the setup, because have no experience with “searchandfilter”-Plugin.

The frontend output is not working properly yet:
After I select a filter, ajax works but the facet disappears and does’nt filter (same output as before).
Also, no images are displayed in the search results.
Take a look: https://www.amschmuck.de/shop/

search&filter02

Patric · January 12, 2023, 9:40am

I can replicate your problem Astwert. The facet and all the images disappear when a facet is selected.

The facet and the images only reappear after a page refresh on the browser.

I also had exactly this same issue with Ajax and S&F, that’s why I started to look elsewhere.

Anyway, try turning off Ajax in S&F and see if the facet remains visible. If yes, then it is an Ajax issue. That’s what happend with me. I could not get rid of this Ajax issue with S&F. And a filter without Ajax was not an option for me.

Cheers

Patric

parktechno · January 12, 2023, 11:49am

Let’s get more likes here to speed up the development of normal built-in filters Ideas – Bricks

cmstew · January 12, 2023, 2:05pm

Hey! Yeah, it’s a little finicky if you don’t do things just right. Especially with ajax.

Make sure your facet/filter is outside the container you’re filtering or it will be removed when you start to use it. You only want filterable content to be inside that container.

So wrap your Products element with a container and then take the ID of that container and put it in your s&f settings.

Your s&f results page settings should look like this. With ajax checked ofcourse.

Not sure about the images issue but I’m hoping it’s resolved just by resolving the other issue.

If you’d like further assistance, perhaps you could make a temp login and I could take a quick look. I’m sure you can figure it out though!

cmstew · January 13, 2023, 4:09pm

Hey!

For those following along, I’ll briefly summarize what we did in private:

The loop container/product/anything that can loop needs to have the S&F form selected in the element settings (like outlined in the first post of this thread)
The S&F Ajax container setting has to be the id or other unique selector of the container outside the loop
The images not loading over ajax is due to a small incompatability with the bricks lazy loading. So either you have to turn it off. Or include the following code on any pages you have a S&F form so it knows to reload the lazy images.

(function($){
    $(document).on('sf:ajaxfinish', '.searchandfilter', function(){
        bricksLazyLoad();
    });
})(jQuery);

I’ll try to build this into the plugin somehow at some point.

Mundy · January 13, 2023, 5:44pm

@cmstew this looks really good. I think I will have to give this a try. Just curious, does pagination and/or infinite scroll work with Ajax filtering?

cmstew · January 13, 2023, 6:32pm

Sure does. Just put one of the bricks pagination elements inside the S&F container beside your loop.

And then make sure you set the pagination selector in the Search form settings to

a.page-numbers

That selector will work with both the product pagination and the normal pagination too.

Mundy · January 13, 2023, 7:26pm

That’s great. Thank you very much for the information. I’ll see if I can get it going on my site. Great work on all of this, thanks for supporting the community.