Search Results for 'filter style'

[Anonymous]

This didn’t work. I’ve added the script as you suggested in the function.php of my child theme. Any other suggestion?

function enqueue_select2_jquery() {
wp_register_style( ‘select2css’, ‘//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.css’, false, ‘1.0’, ‘all’ );
wp_register_script( ‘select2’, ‘//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.js’, array( ‘jquery’ ), ‘1.0’, true );
wp_enqueue_style( ‘select2css’ );
wp_enqueue_script( ‘select2’ );
}
add_action( ‘admin_enqueue_scripts’, ‘enqueue_select2_jquery’ );

?>
<script>(function ( $ ) {
“use strict”;
$(document).on(“sf:ajaxfinish”, “.searchandfilter”, function(){
// call your script or function here
$(‘.option-tree-ui-select’).select2();
});
}(jQuery));</script>

<?php

any other suggestion? Not just

[Anonymous]

Hi,

I bought the plugin yesterday and noticed that the CSS is lost when any of filters are clicked. However when I hit refresh on the browser, the CSS comes back. I checked the CSS, the Style2 tags go missing, and they come back when browser is refreshed. This happens on every filter click irrespective of whether it is a Radio Checkbox or Combo.
Could you help me to understand what could be causing this.

My setup is as follows:
Woocommerce
Grid modification plugin – None
Location – localhost
Filter defined using Taxonomies
Load results using Ajax? – Checked
Make searches bookmarkable – Checked
Use only Ajax on the results page – Unchecked (Tried also with Checked)
Load JavaScript & CSS files – Checked
Lazy Load JavaScript – Unchecked
Combobox Script – Select2
Load jQuery UI i18n files – Unchecked
Auto submit form – Checked
Enabled Auto Count – Checked
Update the Search Form on user interaction – Checked
Also I rewrote the WordPress Default Search form using this script from the Support Forum
function sandf_change_search_url_rewrite() {
if ( is_search() && ! empty( $_GET[‘s’] ) ) {
wp_redirect( home_url( “products/?_sf_s=” ) . urlencode( get_query_var( ‘s’ ) ) );
exit();
}
}
add_action( ‘template_redirect’, ‘sandf_change_search_url_rewrite’ );

[Anonymous]

Sorry, forget the previous code:

input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
    width: 100%;
    border: 2px dotted #aaa;
    border-radius: 25px;
    padding: .2rem .5rem;
    transition: all .3s;
    font-size: 14px;
    font-weight: 500;
}

.searchandfilter ul li {
    list-style: none;
    display: inline-flex;
    padding: 10px 10px;
    margin: 0;
    border-radius: 20px !important;
}

[Anonymous]

Well, now I coded the search filter as the plugin is not able to solve my issue (the reason of this thread). I did change the code of submit.php to add Elementor code for styling the submit button.
I would probably edit the range slider to add extra classes to better style the labels and the prefix text as I can’t for example say From [value field] – to [value] because there is only one prefix field in the Range filter.

The plugin looks promising. I hope you’ll add more options to it and many more classes, so we can style it more. Also, I hope you’ll add an option to have a horizontal layout. Let’s see v3!

And thank you for your quick replies Trevor!

[Anonymous]

Hi Trevor thank you for the help- I tried adding the code to the top and replacing and it did not sort the tags alpahbetically. Where I am trying to accomplish this is the left side “Tags” filter on the resources page (https://hceg.org/resources/) before and after filtering.

Here is the current code I updated on the search-filter/results.php file

<?php
/**
* Search & Filter Pro
*
* Sample Results Template
*
* @package Search_Filter
* @author Ross Morsali
* @link https://searchandfilter.com
* @copyright 2018 Search & Filter
*
* Note: these templates are not full page templates, rather
* just an encaspulation of the your results loop which should
* be inserted in to other pages by using a shortcode – think
* of it as a template part
*
* This template is an absolute base example showing you what
* you can do, for more customisation see the WordPress docs
* and using template tags –
*
* http://codex.wordpress.org/Template_Tags
*
*/

function compare_tags_naturally($a, $b) {
return strnatcmp($a->name, $b->name);
}
if ( $query->have_posts() )
{
?>

<div style=”text-align: right”>
<?php global $searchandfilter;
$sf_current_query = $searchandfilter->get(13622)->current_query();
if ((!$sf_current_query->is_filtered())&&($sf_current_query->get_search_term()==””)) { } else { ?>
Found <?php echo $query->found_posts; ?> Results,
<?php } ?>
Page <?php echo $query->query[‘paged’]; ?> of <?php echo $query->max_num_pages; ?></div>

<div class=”pagination”>

<div class=”nav-previous”><?php next_posts_link( ‘Previous’, $query->max_num_pages ); ?></div>
<div class=”nav-next”><?php previous_posts_link( ‘Next’ ); ?></div>
<?php
/* example code for using the wp_pagenavi plugin */
if (function_exists(‘wp_pagenavi’))
{
echo “<br />”;
wp_pagenavi( array( ‘query’ => $query ) );
}
?>
</div>

<?php
while ($query->have_posts())
{
$query->the_post();

?>
<div>
<h2>” target=”_blank” class=”read_more_link”><?php the_title(); ?></h2>

<?php the_excerpt(); ?>
<?php
if ( has_post_thumbnail() ) {
echo ‘<p>’;
the_post_thumbnail(“small”);
echo ‘</p>’;
}
?>
<p><?php the_category(); ?></p>
<?php
$unsorted_tags = get_the_tags();
$tags = usort($unsorted_tags, ‘compare_tags_naturally’);
?>
<p><?php echo implode(‘, ‘, $tags); ?></p>
<p><small><?php the_date(); ?></small></p>

</div>

<hr />
<?php
}
?>
Page <?php echo $query->query[‘paged’]; ?> of <?php echo $query->max_num_pages; ?><br />

<div class=”pagination”>

<div class=”nav-previous”><?php next_posts_link( ‘Previous’, $query->max_num_pages ); ?></div>
<div class=”nav-next”><?php previous_posts_link( ‘Next’ ); ?></div>
<?php
/* example code for using the wp_pagenavi plugin */
if (function_exists(‘wp_pagenavi’))
{
echo “<br />”;
wp_pagenavi( array( ‘query’ => $query ) );
}
?>
</div>
<?php
}
else
{
echo “No Results Found”;
}
?>

[Trevor]

With the current version of the plugin, the reset link must be in the form, and not elsewhere on the page. This will change in V3 (due in a few months), when you will be able to move it. You can style the link, using Custom CSS. A search of the forum may reveal some snippets already posted:

https://support.searchandfilter.com/forums/search/sf-field-reset+background/

Such as this post:

https://support.searchandfilter.com/forums/topic/change-styling-of-reset-and-submit-buttons/#post-180124

[Ross]

Hi Ash

Can I get admin access, and can we install query monitor plugin?
https://wordpress.org/plugins/query-monitor/

Regarding the CSS + JS, as CSS can only be included in the head, we must include it on evey page (because the shortcode can be included anywhere, sidebar, page content, custom template there is no way to reliable detect before the page had loaded, if S&F is present). You can exclude wp_dequeue_style to remove it from the page you don’t want

Something similar happens for JS, although we could conditionally load the JS based on whether a search form is present (and load in the footer), we also need to check if there are any search results on the page – which we do not.

If you want, in the Search & Filter admin settings page, there is an option where you can disable loading of CSS + JS, and add them to your theme however you want.

Just to add, as per Trevors comment, we are looking at improving this in v3.

Thanks

[Anonymous]

Hi,
the serach&filter function is great while the styling of the filters lacks usability & valueable options!

I have multiple filters horizontal filter set up (1) in one search form, acf group fields in place and no nested taxonomies (2) and try to place them via (3) and use the searchform via shortcode inside elemtor pro.

Given I check “Hide empty items?” in searchfilter Admin settings, then in the front-end after each filter change all filters “jump” around (accordingly to the fact, that option are lower) => this makes them uncontrolable with regards to styling.
=> unhide empty items would fix the jumping but will be an ux mess (& not the intention)
Question:
– Is there a way to have the items “hide empty items” checked (not shown in the filter option) but also have the length of the filter field fixed?

Feedback appreciated
Thanks in advance
Onur

btw:
Style of Combobox is nice – but as “date & price range&input fields” don’t have this option, their style won’t go together with the “combobox” – style of txonomy filters – is there a way to style the input fields accordingly?

btw2:
v3 will have fixes for some filter frontend styling lacks?

——-
(1)
.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}
————
(2) https://support.searchandfilter.com/forums/topic/multiple-categories-combination/#post-55166 – did all of that
————
(3)
.searchandfilter[data-sf-form-id=”1428″] .select2-container {
margin: 5px;
}
from: https://support.searchandfilter.com/forums/search/filter+style/

[Anonymous]

Hi,
I want to have a/the “reset” button for the filter placed on a specific place in the page.
How can I do that? – The default filter-reset does what it should do but with no control over the location & style this gets ugly.
Fast feedback is appreciated.
Thanks,
Onur

I am working with elementor pro & have also the addon installed.

[Anonymous]

Hi Support,

I create the taxonomy LEVEL: Basic(1), Intermediate(1), Advanced(1).
I selected the dropdown style and the first filter displayed is All Levels but do not show the total count.
As an alternative solution I created a new taxonomy called All Levels and now shows the total of (3). Also I had to rename the lable to By Level to do not look duplicate. I don’t see a reason for this as the feature is already showing all the videos but the only thing missed is the total count of all sub items.

Is there any better solution?

http://www.jiujitsubase.com

Thank you,
Maurino Loureiro