Using L&L with Search and Filter Pro

Greetings,

Have anyone done any work using L&L and Search and Filter Pro ?

I have been exploring the solution using their custom display method Custom - Search & Filter Pro (searchandfilter.com) but ended up getting stuck.

I reached out to the support team and they told me I would need a way to add a wp_query argument to L&L argument? A little lost now :grinning:

Any thoughts on this guys?

Thanks you so much in advance.

Kendell

Hi Kendell,

I looked in Search & Filter Pro’s documentation, and I think it’s possible to use their “Filter Next Query” shortcode.

<Shortcode searchandfilter id="123456" action="filter_next_query" />

It should set the default query to the search results, which can be looped like this:

<Loop>
  - Title: <Field title /><br>
</Loop>

Hi @eliot,

I had the chance to try the Filter Next Query short code as you suggested, but for some reason it doesn’t show the search results form nor any loop results when I add the short code above the loop as seen below.

I reached out to the developer and he communicated the following text in italic to me:

In our form the display results method would need to be set to Custom (as you should already have done), and then you need a way to add a wp_query argument to their argument. This would be that argument (they will understand this): ‘search_filter_id’ => 25802,

I suppose this would make more sense to you. Would you like to have access to an environment where we can try to figure out an integration for L&L and S&F Pro? If so, I am willing to hook you up with that on my end. Just let me know.

I’m not sure if this applies, but this sounds very similar to getting L&L to work with FacetWP:

Hi Kendell, thank you for the info.

Could you try with just <Loop>, without specifying type? That should get the “default query” which their shortcode is meant to set.

<Loop>
  <Field title />
</Loop>

If that doesn’t work, I’ll look into providing a way to set any arbitrary wp_query argument, including search_filter_id. That would be a nice general-purpose solution.


Hi Gabriel - You’re right, FacetWP integration looks like it works the same way. I see the example uses <Loop> to get the default query modified by an external plugin.

Hi @eliot,

In implementing your last solution, I notice that only the title of the page is displayed and not the list of blog posts specified in the general settings.


Image showing embedded page results - Embedded on the About page for testing

image
Image showing S&F general settings applied - In this case, only blog post selected

Not sure what the final solution will look like, but I am wondering: Without specifying the type or other query arguments within the loop code, do you think the solution will allow us to create filters that might be dependent on a pro addon, for example LearnDash? Let’s say I want to filter courses based on the access_type or completion_status? Or is that out of the scope?

@Tangibleinc I had a look at the FacetWP, but I wasn’t sure exactly which parts might need the tweaking for S&F pro.

I’m looking forward to seeing what we can come up with :slight_smile:

Hello @eliot

Just circling back on this. By any chance were you able to have a re-look at this? Do you envision this as something a bit difficult to achieve with S&FP’s current setup?

1 Like

Hey Kendell, it’s been a while since this request but I wanted to follow up here to let you know that it’s now possible to define custom query parameters using the (intuitively named) custom_query parameter. I used your Search and Filter example from this thread in my write-up about the update so you can check out that post here. Let me know if you have any questions about this!

3 Likes

Hello @benjamin

Thanks for the note!

Super exciting stuff. Thank you all!!!

Can’t wait to give it a go as soon as I get my license sorted again. I’ll be sure to let you guys know how it goes!

2 Likes

Hello @benjamin

I had the chance to give this a try, and I must say it’s super simple to setup and knocks off another plugin :grin:.

To finish the setup, I created a number control that accepts the ID of the search and filter form, which is then passed to the loop. Works fine!

I had a little issue with the Ajax loading/pagination though. (See screenshot for setup)

I created an ID (main-cards) above all the html in the block for the “scroll window to:” feature in the plugin. I then used the class “tangible-paginator-target” for their “Ajax Container”. The results load fine with the Ajax turned on.

However the issue is with the pagination. I used the class “tangible-paginator-button” as the “Pagination Selector” in an attempt to have the pagination work with the Ajax loading, but it doesn’t seem to work. I got this class from the tangible pagination buttons.

So my final finding with the pagination setup is that the first page of posts will load just fine. But upon performing a search and filter, the posts changes but the tangible pagination buttons remains the same. As a result, clicking on any of the numbered buttons will show posts outside of the user search and filtering.

That’s the only issue there. I hope I was clear enough.

But nice job on integrating this!

Interesting. If you’re working with L&L’s pagination, I assume this behaviour occurs because L&L’s pagination is built when the query initially runs, so when you first load the page, that’s when L&L decides which content should be on each page. If you then try modifying the query after the page has loaded, L&L has already decided what content should be displayed on the other pages so even if you try filtering the results using S&F, the results have already been queried and assigned to pages so the displayed results don’t change. This is beyond my current skill level but I know that L&L uses ajax to build its pagination, so I assume that when you double-stack ajax like you’re doing, things get messy. I’m also pretty sure that the “tangible-paginator-button” class is created when you add L&L pagination to a loop. In your screenshot, it looks like you’re using S&F to add pagination, so those classes probably don’t exist anywhere in the L&L template.

Sorry if I’m misreading the issue, maybe someone with more development experience can chime in here to suggest why this might be occurring.