Search Results for 'filter style'

[Anonymous]

Hi I have an issue with Search and Filter where if I try to have two Taxonomy filters it causes a glitch where I have to click the checkbox twice to get it to change the results.

The reason for having two filters for the same Taxonomy is one is a dropdown and the other is a checkbox. I want to hide the checkbox on mobile and display the dropdown for mobile devices as the checkboxes cause too much clutter. However with this glitch it makes this approach impossible.

Is there an alternative to having an alternate search style on mobile.

Thanks,
Janek

[Trevor]

OK. So, for now, this will need to be an manual setup.

You will need this JavaScript file:

https://www.dropbox.com/s/vuu640lyjga094e/select2multi-checkboxes.js?dl=0

I loaded this file in my theme with this code in my child theme functions.php file (I placed the file in a sub-folder of my child theme called js:

function sandf_checkbox_script() {
  wp_register_script( 'select2-with-checkboxes', get_stylesheet_directory_uri() . '/js/select2multi-checkboxes.js', array('jquery'), '1.0.0', true );
  wp_enqueue_script( 'select2-with-checkboxes' );
}
add_action( 'wp_enqueue_scripts', 'sandf_checkbox_script', 99 );

Lines 81 and 89 will need to be edited. Here is what they look like (the lines with sf-field-taxonomy-download_category in):

jQuery(function($) {
  $('.sf-field-taxonomy-download_category .sf-input-select').select2MultiCheckboxes({
    templateSelection: function(selected, total) {
      return selected.length + " selected of " + total;
    }
  })
});
(function ( $ ) {
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('.sf-field-taxonomy-download_category .sf-input-select').select2MultiCheckboxes({
      templateSelection: function(selected, total) {
        return selected.length + " selected of " + total;
      }
    });
  });
}(jQuery));

You need to change these names to whatever your field is called.

You will need some Custom CSS (you may need to make it more specific to the field, but this should work as is):

.select2-results__option .wrap:before{
    font-family: 'Font Awesome\ 5 Free';
    color:#999;
    content:"\f0c8";
    width:25px;
    height:25px;
    padding-right: 10px;
}
.select2-results__option[aria-selected=true] .wrap:before{
    content:"\f14a";
}

You will need an icon font. I have used Font Awesome 5 Free. You may already have one loading to your site. The content numbers and font-family name in the code will need to match whichever icon font and icons you use.

I loaded Font Awesome 5 Free with this code in my child theme functions.php file:

function sandf_add_custom_fa_css() {
  wp_enqueue_style( 'custom-fa', 'https://use.fontawesome.com/releases/v5.6.3/css/all.css' );
}
add_action( 'wp_enqueue_scripts', 'sandf_add_custom_fa_css' );

In the form field settings, the field needs to be set to multi-select AND combobox, and in the plugin settings, the Combobox script needs to be set to Select2.

[Anonymous]

Trevor,

It’s working! It doesn’t use his grid anymore—it just goes to an archive page for the results, but I much prefer the way it’s working now and can style that on my own. And I can filter by tag again—yay!

Thank you so much for going through that for me. I can’t thank you enough for taking the time when it wasn’t even your plugin causing the issue. Very much appreciated!

Kari

[Anonymous]

Not sure if I follow you. I did a test by creating a styled button and linking to the current page:

<a>">Reset</a>

The thing is that the permalink gets updated by the ajax filter and it basically has the same weird behaviour as the reset link from the filters.

[Anonymous]

I need to remove the ?sf_action=get_data&sf_data=all&sf_paged=2 from my page urls.

I am loading search results via Ajax and infinite scroll. When the infinite scroll is triggered, all posts that are loaded have that query string appended—this is breaking critical redirects.

How do I prevent this from happening?

I have already added this function to my functions.php
function _remove_script_version( $src ){
$parts = explode( ‘?’, $src );
return $parts[0];
}
add_filter( ‘script_loader_src’, ‘_remove_script_version’, 15, 1 );
add_filter( ‘style_loader_src’, ‘_remove_script_version’, 15, 1 );

[Anonymous]

I inherited this site from another developer and do not usually work in wordpress or php.

2 scenarios:

#1: Infinite scroll container is specified: results will quickly load (as many as I specify per page,) it will hit the infinite scroll trigger at the bottom, trigger loading icon, and then nothing more comes back.

#2: No infinite scroll container is specified: Infinite scroll will load all results at the normal rate per page ie) 7 results per page, but the trigger happens at almost every scroll, even when I’m scrolling toward the top of the page. I think it may be a problem with how the containers are specified and maybe a naming conflict. I’ve tried many different values for offset but it doesn’t seem to make a difference. I saw others requesting a ‘load more results’ button and wondered if that was possible yet?

I’m also open to trying it with pagination, but when I try to implement, it seems like its trying to do some string parsing with the url which initially does not have a query string so I get cannot read property split() of undefined . thanks so much for your insight!

Here are the two files this is happening in:

<?php
/**
 * The template used for displaying page content for the Big Green Database
 *
 * @package red_underscores
 */

// Determine which resource page this is

$page_id = get_the_ID();
$page_name = '';

if ( $page_id == 12614) {
    $page_name = 'garden'; // Your Edible School Garden (cat = garden-skills-resources)
    $lessons_id = 12612;
    $sf_form_id = 14035;
}
if ( $page_id == 12612 ) {
    $page_name = 'lessons'; // Garden Lessons + Curriculum (cat = curriculum-lessons-activities)
    $garden_id = 12614;
    $sf_form_id = 14036;
}

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <?php 

    $featured = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
    $overlay_background = "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0))";

    ?>

    <div class="featured main" style="background: <?php echo $overlay_background ?>, url('<?php echo $featured[0] ?>'); min-height: 720px;">
        <div class="grid-container featured-content">
            <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
        </div>
    </div><!-- featured -->

    <div class="grid-container">
        <div class="entry-content grid-60 prefix-20 tablet-grid-90 tablet-prefix-5">
            <?php the_content(); ?>
        </div><!-- .entry-content -->
    </div>

            
    <?php // Toggle between pages ?>

    <div class="grid-container">

    <?php

    ?>
    </div>
    
    <?php 
    // Display at most three highlighted resources from this main category
    $main_resource_category = '';
    switch ($page_name) {
        case 'lessons':
            $main_resource_category = 'curriculum-lessons-activities';
            break;
        case 'garden':
            $main_resource_category = 'garden-skills-resources';
            break;
    }

    $args = array(
        'post_type' => 'resource',
        'posts_per_page' => 3,
        'tax_query' => array(
            array(
                'taxonomy' => 'resource-category',
                'field' => 'slug',
                'terms' => $main_resource_category
            )
        ),
       
    );

        // Display remaining results (not highlighted) via search & filter

    ?>

    <div class="sf-results-container">
      
        <div class="grid-container">
            <?php echo do_shortcode( '[searchandfilter id="'.$sf_form_id.'"]' ); ?>
        </div>

        <div class="dotted-border"></div>

        <div class="grid-container grid-of-posts resources">

            <div class="grid-33 push-66 sf-pop-sidebar">
                <h3>Popular Collections:</h3>
                <div class="dotted-border"></div>
                <div id="popular-collections-remote-control"></div>
            </div>

            <div class="grid-66 pull-33 two-col-results search-filter-results-list">
                <?php echo do_shortcode( '[searchandfilter id="'.$sf_form_id.'" show="results"]' ); ?>
            </div>
            <div class="pagination">
        Found <?php echo $query->found_posts; ?> Results<br />
        Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />
        <?php wp_pagenavi(); ?>
        <?php
            /* example code for using the wp_pagenavi plugin */
            if (function_exists('wp_pagenavi'))
            {
                echo "<br />";
                wp_pagenavi( array( 'query' => $query ) );
            } 
        ?>
    </div>
          </div>

        </div>

    </div>

    <script>

    (function($) {
        // Load again after ajax to work after filtering results
        $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
            // Place search and filter boxes within grid
            $("li.sf-field-post-meta-resource_subjects, li.sf-field-taxonomy-grade-level, li.sf-field-search, li.sf-field-taxonomy-resource-category, li.sf-field-post-meta-content_source, li.sf-field-post-meta-grade_level_range, li.sf-field-submit").addClass('grid-33 tablet-grid-50 mobile-grid-100');
        });
        $(document).ready(function() {

            // Get list of labels and inputs in .sf-field-post-meta-popular_collection_tag
            
            var labels = $('.sf-field-post-meta-popular_collection').find('label');
            var inputs = $('.sf-field-post-meta-popular_collection').find('input');
            
            // Append them to the #popular-collections-remote-control div
            for ( var i = 0; i < labels.length; i++ ) {

                var selectedClass = '';

                // Apply selected class to anything that's selected on load
                if(inputs[i].checked) {
                    selectedClass = 'selected';
                }

                $('#popular-collections-remote-control')
                    .append( '<div class="target '+ selectedClass +'" id="' + inputs[i].value + '">' + labels[ i ].innerHTML + '</div><div class="dotted-border"></div>');
            }

            // Set up remote control clicks
            $('#popular-collections-remote-control .target').click(function() {
                var targetValue = $(this).attr('id');
                $(this).toggleClass('selected');
                $(':checkbox[value=' + targetValue + ']').trigger('click');
            });

            // Place search and filter boxes within grid
            $("li.sf-field-post-meta-resource_subjects, li.sf-field-taxonomy-grade-level, li.sf-field-search, li.sf-field-taxonomy-resource-category, li.sf-field-post-meta-content_source, li.sf-field-post-meta-grade_level_range, li.sf-field-submit").addClass('grid-33 tablet-grid-50 mobile-grid-100');
        });
    })(jQuery);

    </script>

	<footer class="entry-footer">
		<?php //edit_post_link( esc_html__( 'Edit', 'red_underscores' ), '<span class="edit-link">', '</span>' ); ?>
	</footer><!-- .entry-footer -->
</article><!-- #post-## -->

<?php
/**
 * Search & Filter Pro 
 *
 * Template for Filter Resources - Garden
 *
 */

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

            ?>
            <div class="search-filter-result-item grid-50 tablet-grid-50 mobile-grid-100">
            <?php
            
            get_template_part( 'template-parts/content', 'resource_overview' );
        
            ?></div><?php
        }
    ?>
<?php
}
else
{
    ?>
    <div class='search-filter-results-list end-of-results' data-search-filter-action='infinite-scroll-end'>
    <p>no more results</p>
    </div>
    <?php
}
?>

[Anonymous]

I’m building a site with events as a custom post type. For the archive page, I’d like to just have three buttons (or radio buttons that I can style) with “All”, “Upcoming”, and “Previous Events.” How can I get this to work using S&F Pro? I was able to do this with pure code, but could never get the pagination correct. Any help is appreciated.

[Anonymous]

Hey Trevor,

I’m trying to add style=”display: none;” to this line of code:
<ul data-operator=”and” class=””>

I cannot find which file to make this edit in the Search and Filter plugin. It would be greatly appreciated if you could tell me which line and which file to edit.

Cheerss,
Gary

[Anonymous]

I am having a searchbox in my website’s home page. When a user searches for any keyword then it shows the resultant articles with “Read More Articles” button as a pagination. I am using search.php file to display this result.

Q.1. Now I want to have additional filters like Searchbox and Dropdown with “Relevance” and “Date” sort order. How can I set this two dropdown with search field in my existing search result page along with same pagination style “Read More Articles” on the same page?

Q.2. I installed the Relevanssi Plugin and done the settings. Also enable the Relevanssi checkbox and Sort Results By relevance checkboxes under the Search Form->Advanced tab but When I try to search any keyword then I am not getting any result and previously I got the search results. What should be the issue? Am I doing something wrong?

[Anonymous]

Hi Trevor,
Thanks for the quick response. I was able to add some styles to move the two handles back over 100% to the right. I have the filters set up horizontally on the page so maybe that is why I had an issue with the change that was made in the new version.
All looks OK now.
Kathy