Can I include HTML between the search UI fields or have a custom search template

Ashley Best

#217446

I have search & filter pro working nicely on the website I’m building. I’m pleased to have found this plugin as it has made quite a complex build much more achievable, so thanks for the hard work on developing it.

The current layout of the form and filters occupies an unordered list in the HTML, which means that I am unable to fit it into the design of the website.

For example: the design has 3 drop down boxes, followed by two floated divs, followed by a div containing 3 columns of checkboxes, which by default are hidden, but can be expanded by clicking a button.

Is it possible to override the layout of the search UI so that I’ve got more control over how it is presented on the front end? Or perhaps there is a method for adding start and endpoints for separating parts of the search UI?

Any pointers would be much appreciated!

Add New Note to this Reply

Trevor Moderator

#217521

This is something we plan for V3, but that is still some way off yet. At the moment, you would have use custom JavaScript to make these changes.

Add New Note to this Reply

Ashley Best

#217533

What kind of thing did you have in mind Trevor?

I’ve tried the following code to add a new list item before the 3rd from last:

$('#search-filter-form-1203 ul:first-child()').find(' > li:nth-last-child(3)').before('<li class="li-new">New</li>');

This successfully adds a new li tag in the place I require, which I can style and make use of:

However, as soon as I filter the results, the new li tag is replaced with a duplication of one of the existing li tags, containing the search fields:

Can you think of a method that won’t interfere with the filtering?

Thanks,

Ash

Add New Note to this Reply

Trevor Moderator

#217539

We have two ajax events happening. One is the form updating (typically triggered by Auto Count – the second option relating to user action) and the other is the results updating. You can reapply the JavaScript after these events have triggered. If you set your JavaScript up as functions, all you need do is call that function at three possible times:

1. When the document has loaded (the page).
2. When our Auto Count is triggered:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxformfinish", ".searchandfilter", function(){
    console.log("ajax complete");

// call your function or here

  });
}(jQuery));</script>

3. When our Ajax is triggered:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");

// call your function here

  });
}(jQuery));</script>

Add New Note to this Reply

Ashley Best

#217545

Thank you Trevor – this was the info I needed to get it working correctly!

The route I’m going with is to have an additional search field, which I hide from view. I then use a javascript function to replace this with a new li tag containing the content I need.

Add New Note to this Reply

[Author]

Posts