-
AuthorSearch Results
-
January 13, 2016 at 5:03 pm #34160
In reply to: How does making a simple loader work in SFP
RossKeymasterHey Edward
Ok, this is more a developer feature for now until I add something via the UI to make this easier.
Essentially, what you want to do is the following:
1) Create your loader and add it to your page / site.
So as a really basic example (by no means comprehensive or complete) – edit your themes “footer.php”.
Before the closing
</body>
tag add the following html code:<div class="sf-loader" style="display:none"> Loading... </div>
This will add an element to your page to use as a loader. This will need to be customised via CSS, such as centering it on the page etc but for now thats not important.
2) Add the loader code.
In your themes main JavaScript file, scroll the to very end, and after everything else add:
jQuery(document).ready(function($) { $(document).on("sf:ajaxfinish", ".searchandfilter", function(){ $('.sf-loader').hide(); }); $(document).on("sf:ajaxstart", ".searchandfilter", function(){ $('.sf-loader').show(); }); });
now you will see an element on your site being shown/hidden when being loaded. As mentioned you will need to style it up.
Hope that helps!
Thanks
January 4, 2016 at 10:26 pm #33314In reply to: Customize Results Page
RossKeymasterHey Maxime
S&F doesn’t work directly with Visual Composer layouts, but in order to customise these results, you must follow the instructions here if using the shortcode display method:
I am currently implementing some features which *should* make integration with layout plugins possible, but these won’t be ready for a week or so – and of course not guaranteed to work with all – just a new option.
Anyway just getting back to the grid layout stuff – there are a good few resources out there on how to make grid based layouts in WP – which is basically the same in S&F as we just use WordPress loops/queries, a couple I linked here:
https://support.searchandfilter.com/forums/topic/search-results-as-grid/#post-24882
And as an FYI, S&F works with WooCommerce, which has a grid based layout for the shop – so might be a potential avenue to look into (even if its just stripping out the html/css for your needs).
Thanks
December 28, 2015 at 12:47 pm #32922In reply to: Made a new Search and it doesn't works.
RossKeymasterHi Idan
Ok so to answer your questions:
2) yes the code has been designed to work with labels – so styling labels based on checked state is built in. If you want to style the
li
element that the checkbox is contained in then you will need to write some custom javascript to add / remove classes based on whether the checkbox is ticked.Something like (untested, and will need some adaptation, this is just for the general idea):
jQuery(document).on("change", ".searchandfilter .yourfieldclass li input[type='checkbox']", function() { if(jQuery(this).prop("checked")==true) {//then update the background colour jQuery(this).parent().css("background-color", "#f00"); } });
In the code above you will need to update
.yourfieldclass
with the name of the class on the field element.It will likely need some work to do what you want but I think its a decent indication of the direction to take.
3) This again is some custom code that is out of the scope here really.
You would need to detect a click on the LI, and then set any checkbox elements inside to “checked”
jQuery(document).on("click", ".searchandfilter .yourfieldclass li", function(){ //detect a click on an LI element within a specific field. //then set the checked state to true jQuery(this).find("input[type='checkbox']").prop("checked", true); });
You can use the code above as a basis for solving your tasks but its not officially supported within the plugin itself.
Thanks
December 16, 2015 at 11:25 am #32300In reply to: How to set up scrolling checkboxes
RossKeymasterHey John
This was actually just a bit of custom CSS I added:
.searchandfilter > ul > li[data-sf-field-input-type="checkbox"] > ul, .searchandfilter > ul > li[data-sf-field-input-type="radio"] > ul { max-height: 150px; overflow: auto; }
Thanks!
October 22, 2015 at 2:25 pm #27968In reply to: Horizontal search with Comboboxes
RossKeymasterHi Luca
In order to style your search form you must have some basic CSS knowledge.
Please see here the notes on how to customise:
What you are asking for is something very specific to your site, and would require some custom coding.
I’ll give you a pointer though however, depending on your theme this may still not work – if you look at hte code you will notice the search field list item has a class for easy styling,
So the following CSS should convert S&F to a horizontal layout (depending on your theme) but then sets the search field to display block ,which means it will be on its own line.
.searchandfilter > ul > li { display:inline-block; } .searchandfilter > ul > li.sf-field-search { display:block; }
Like I mentioned, this may not work in your setup – but its a good starting point.
Thanks
PS, please also ensure you are using S&F 2.0.2 (released 2 days ago).
September 16, 2015 at 5:35 pm #24980
RossKeymasterHi Mukhtar
To answer your questions:
1) Your first point regarding horizontal can be done with CSS – but what you want is a customisation beyond the scope of support here. It is possible to achieve what you want but you must have the js/html/css skills to implement specifically what you want.
Info to simply to make it horizontal can be found here: https://support.searchandfilter.com/forums/topic/horizontal-layout/#post-6143
2) You can’t do the exact same thing, but you could use a date range (post meta field) to achieve something similar – as long as you store the listing date as post meta.
3) I’ll look in to this, are listings a custom post type?
Thanks
July 27, 2015 at 8:45 pm #22148In reply to: Add design to search page?
RossKeymasterHey Megan
S&F does not do the layout design work for you, it keeps things very basic so you can customise.
The problem you are describing is pretty much a generic html/css question which I can’t really provide an answer for unless I’m writing specific code for your site.
So first, to make the whole form horizontal you would need to do the following (may not work in all themes):
https://support.searchandfilter.com/forums/topic/horizontal-layout/#post-6143
And then you would need to figure out the rest of the CSS changes you want to make yourself.
Theres plenty of info out there – what you want to be looking for is using CSS to style unordered lists (
ul
– which is what all the fields are contained in) and I guess heading tags (h4
).Thanks
July 12, 2015 at 11:35 pm #21308In reply to: Displaying posts instead of products
RossKeymasterHi there
To answer your questions:
1) The count numbers are not dynamic and do not reflect the real live values based on the current search – they are based on WP internal count of these taxonomies – the next version of S&F will change this and they will be dynamic.
2) S&F works with WooCommerce, in that you can search WooCommerce Products, and search attributes and custom fields – but it is not a filter to be used with the Shop page directly (I will add this at some stage).
You need to think of this a little different, so on your shop page you can add the S&F form, but realise, once a user searches – they will be taken “away” to a search result page.
Now what you must do is recreate the format of the shop page if that is what you wish.
If you are using Display using shortcode, then you should just paste the shortcode in to an empty page – and have the Results URL point to this new page. You will then have to customise the html/css to emulate the look of your shop page.
Alternatively, you could try using the As Archive method – the WooCommerce product archive is usually calls the WooCommerce template
archive-product.php
and you could try modifying using this with some modification for your S&F results.Some other users have across this see here – https://support.searchandfilter.com/forums/search/archive-product/
Thanks
June 3, 2015 at 4:34 pm #18817In reply to: Search Results issues and more…
RossKeymasterHi there
To answer your questions:
1) This is not supported, but you could implement this using js/css – there is some futher info here:
https://support.searchandfilter.com/forums/topic/stop-searching-on-page-load/#post-145092) In the meta field, where you have all your values listed, you can simply drag the values up and down to change the order using the little handle on the left of them
3) This is in your custom template – you need to make modifications to this in order to remove it
4) The default results template doesn’t close some html tags properly – this is a bug I will fix, but you will also need to manually fix any custom templates you’ve already created.
5) This is a theme issue – you theme is styling the dropdowns and I guess removing the arrows. You would need to do some CSS hacking and restore the default styles to them – alternatively you could try ticking the “combobox” option in your fields for a different type of field – which may or may not be suited to what you need.
Thanks
May 8, 2015 at 5:40 pm #17059In reply to: WP 4.2.1 update affecting plugin
RossKeymasterHi Paul
I’ve had a quick look… the problem seems to be the wrong CSS is being applied to the search results page.
As I mentioned before ,these customisations are normally out of scope of support, but I think I’ve cracked it anyway.
Essentially, on your shop page, the
body
tag has the following classwoocommerce-page
(amongst others).When I add these in firebug to the search results page, the results look like a grid – not sure if its exactly the same, but very similar…
So what you need to do is add some wordpress code to add these two classes to your body tags, on search result pages (take from: https://support.searchandfilter.com/forums/search/woocommerce-page/):
add_filter('body_class','add_body_class_to_search_filter'); function add_body_class_to_search_filter($classes) { global $sf_form_data; if ($sf_form_data->is_valid_form()) { $classes[] = "woocommerce-page"; } // return the $classes array return $classes; }
You can add this to the
functions.php
of your theme.Hope that helps!
-
AuthorSearch Results