Search Results for 'found_posts'

[Anonymous]

Thank you so much for your quick reply! I implemented this and I’m still seeing the same behavior. To be clear, infinite scroll is loading more results but it is triggering too early. I forgot to mention the main issue with the early trigger, which is that each result has a modal attached to it. While the new results are loading, the info modal is unclickable. Since new results load even when scrolling to the top of the page, the entire page is frozen any time you scroll.

Is there a standard offset value to the trigger that you’ve found to be most accurate to firing the trigger at the end of the page?

Regarding pagination: I accidentally left that in the file, but yes saw your implementation. Even when using that exact implementation, I get ‘cannot read property split of undefined’. The code is trying to get query params from the url but they do not exist. It does however show page 1 of 90 or so in the container. Is there anything I need to do to enable query params to show up in the url. I see that the XML request is asking for “paged=2” but it is erroring out before making the request.

I’ve attached the updated file where I was missing a few lines to make sure that’s exactly how it should be. Thanks for you help!

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

if ( $query->have_posts() )
{
    ?>
    <p>Found <?php echo $query->found_posts; ?> Results</p><br />
    
    <div class='search-filter-results-list'>
    <?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
        }
    ?>
    </div>
<?php
}
else
{
    ?>
    <div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'>
    	<span>no more results</span>
    </div>
    <?php
}
?>

[Trevor]

Is the form set to use the Shortcode Display Results method? If it is, then the results.php template file would need a different structure if you want to use pagination and not infinite scroll. You can see examples in our plugin templates sub-folder. The results.php contained there (these files should not be edited) has the pagination type code, and there is an infinite scroll version, with contents as you would expect.

We do not offer a Load More button, yet (probably coming in V3).

The second of the files you have shown is missing the complete structure that it should have, here is what the default infinite scroll template looks like (without the comments section at the top):

<?php
if ( $query->have_posts() )
{
	?>
	
	Found <?php echo $query->found_posts; ?> Results<br />
	<div class='search-filter-results-list'>
	<?php
		while ($query->have_posts())
		{
			$query->the_post();
			
			?>
			<div class='search-filter-result-item'>
				<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
				
				<p><br /><?php the_excerpt(); ?></p>
				<?php 
					if ( has_post_thumbnail() ) {
						echo '<p>';
						the_post_thumbnail("small");
						echo '</p>';
					}
				?>
				<p><?php the_category(); ?></p>
				<p><?php the_tags(); ?></p>
				<p><small><?php the_date(); ?></small></p>
				
				<hr />
			</div>
			
			<?php
		}
	?>
	</div>
<?php
}
else
{
	?>
	<div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'>
		<span>End of Results</span>
	</div>
	<?php
}
?>

Your code is missing this line:

<div class='search-filter-results-list'>

and the closing </div>

[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
}
?>

[Trevor]

You would need to know the name of the array that wp_query places the results in to. A typical example is this:

Found <?php echo $query->found_posts; ?> Results

Where $query is that array. Note that if you are using Ajax, that code would need to be inside the Ajax Container.

[Trevor]

I made a couple of minor changes, but to no avail. I think it is the structure of the PHP in your template. See here what our exemplar structure looks like:

if ( $query->have_posts() )
{
	?>
	
	Found <?php echo $query->found_posts; ?> Results<br />
	<div class='search-filter-results-list'>
	<?php
		while ($query->have_posts())
		{
			$query->the_post();
			
			?>
			<div class='search-filter-result-item'>
				<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
				
				<p><br /><?php the_excerpt(); ?></p>
				<?php 
					if ( has_post_thumbnail() ) {
						echo '<p>';
						the_post_thumbnail("small");
						echo '</p>';
					}
				?>
				<p><?php the_category(); ?></p>
				<p><?php the_tags(); ?></p>
				<p><small><?php the_date(); ?></small></p>
				
				<hr />
			</div>
			
			<?php
		}
	?>
	</div>
<?php
}
else
{
	?>
	<div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'>
		<span>End of Results</span>
	</div>
	<?php
}
?>

[Trevor]

That data is outputted by our results.php template when using the Shortcode results display method:

https://searchandfilter.com/documentation/search-results/using-a-shortcode/

In that documentation you can find the Customising guide. In the standard results.php template file, this is the code that you are asking about:

Found <?php echo $query->found_posts; ?> Results<br />
Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />

If you wish to change (or delete it), you can.

[Trevor]

Ah. Something like this then (a modification of that file):

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Results Template
 * 
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      http://www.designsandcode.com/
 * @copyright 2015 Designs & Code
 * 
 * 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
 *
 */

if ( $query->have_posts() ) {
 ?>
 
 Found <?php echo $query->found_posts; ?> Results<br />
 <div class='search-filter-results-list'>
 <?php
  while ($query->have_posts())
  {
   $query->the_post();
   
   ?>
   <div class='search-filter-result-item'>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    
    <p><br /><?php the_excerpt(); ?></p>
    <?php 
     if ( has_post_thumbnail() ) {
      echo '<p>';
      the_post_thumbnail("small");
      echo '</p>';
     }
    ?>
    <p><?php the_category(); ?></p>
    <p><?php the_tags(); ?></p>
    <p><small><?php the_date(); ?></small></p>
    
    <hr />
   </div>
   
   <?php
  }
 ?>
 </div>
<?php
} else {
 
 //figure out which type of "no results" message to show
 $message = "noresults"; 
 if(isset($query->query['paged'])) {  
  if($query->query['paged']>1){
   $message = "endofresults";
  }
 }
 
    if($message=="noresults") {
    ?>
 <div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'>
  <span>No Results Found</span>
 </div>
 <?php
    } else {
 ?>
 <div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'>
  <span>End of Results</span>
 </div>
 <?php
 }
}
?>

[Trevor]

The no more results message can only be changed/added if you are using our Shortcode Display Results method. If you are, then this is an example of the modified results.php:

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Results Template
 * 
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      http://www.designsandcode.com/
 * @copyright 2015 Designs & Code
 * 
 * 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
 *
 */

if ( $query->have_posts() ) {
 ?>
 
 Found <?php echo $query->found_posts; ?> Results<br />
 <div class='search-filter-results-list'>
 <?php
  while ($query->have_posts())
  {
   $query->the_post();
   
   ?>
   <div class='search-filter-result-item'>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    
    <p><br /><?php the_excerpt(); ?></p>
    <?php 
     if ( has_post_thumbnail() ) {
      echo '<p>';
      the_post_thumbnail("small");
      echo '</p>';
     }
    ?>
    <p><?php the_category(); ?></p>
    <p><?php the_tags(); ?></p>
    <p><small><?php the_date(); ?></small></p>
    
    <hr />
   </div>
   
   <?php
  }
 ?>
 </div>
<?php
} else {
 
 //figure out which type of "no results" message to show
 $message = "noresults"; 
 if(isset($query->query['paged'])) {  
  if($query->query['paged']>1){
   $message = "endofresults";
  }
 }
 
    if($message=="noresults") {
    ?>
 <div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'>
  <span>No Results Found</span>
 </div>
 <?php
    } else {
 ?>
 <div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'>
  <span>End of Results</span>
 </div>
 <?php
 }
}
?>

The loading icon position, try this custom CSS (it MIGHT work):

.search-filter-scroll-loading:before {
    display: block;
    height: 10px;
    content: "";
    width: 100%;
}
.search-filter-scroll-loading {
    margin: 10px auto !important;
}

[Trevor]

I used WP File Manager (whioch you had already got installed), and I followed these instructions:

https://searchandfilter.com/documentation/search-results/using-a-shortcode/#customising-the-results

And changed the results.pgp code to this:

<?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
 *
 */

if ( $query->have_posts() )
{
	?>
	
	Found <?php echo $query->found_posts; ?> Results<br />
	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( 'Older posts', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Newer posts' ); ?></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><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
			
			<p><br /><?php the_excerpt(); ?></p>
			<?php 
				if ( has_post_thumbnail() ) {
                    ?>
					<p><a href="<?php the_permalink(); ?>">
                    <?php
					the_post_thumbnail("small");
                    ?>
					</a></p>
                    <?php
				}
			?>
			
		</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( 'Older posts', $query->max_num_pages ); ?></div>
		<div class="nav-next"><?php previous_posts_link( 'Newer posts' ); ?></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]

You can replace the contents of the results.php with this:

<?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
 *
 */

if ( $query->have_posts() )
{
	?>
	
	Found <?php echo $query->found_posts; ?> Companies<br />
	
	<?php
	while ($query->have_posts())
	{
		$query->the_post();
		
		?>
		<div>
			<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
			
			<p><br /><?php the_excerpt(); ?></p>
			<?php 
				if ( has_post_thumbnail() ) {
					echo '<p>';
					the_post_thumbnail("small");
					echo '</p>';
				}
			?>
			
		</div>
		
		<hr />
		<?php
	}
}
else
{
	echo "No Results Found";
}
?>

I am not sure what you mean by:

The infinite scroll should be bigger (double size) How can I increase it?

and also

The displayed results (the names of the companies) should not link to the Post-site. They should link to my individual site.