Infinite Scroll

Anonymous

#226356

Hi Support,

I seem to be having an issue with the infinite scroll on the results, it works perfectly for the most part and as expected, however if I have a result with no posts in I get a duplicate ‘End of Results’ message on the page, the first one appears almost immediately and then the second appears after the infinite scroll GIF kicks in and realises that notthing has been found.

Is there a work around for this or a way of stopping it from happening, it’s not a major issue just looks a bit messy on page.

Thank you
Scott

Trevor

#226404

Are you using our shortcode display results method?

If so, this is a modified exemplar results.php file to account for this behavior:

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

Anonymous

#226945

Hi Trevor,

Apologies I’ve only just gotten around to trying this out, at the minute I get both messages coming up and I’m not entirely sure why, this is my 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
*
*/

if ( $query->have_posts() )
{
?>
<div class=”flex-grid” data-aos=”fade-up”>
<?php
while ($query->have_posts()){
$query->the_post();
?>
<div class=”RoleGridWrapper col”>
<?php if( get_field(‘scrub_colour’) == ‘navy-blue’){ $postcolor = ‘#153F74’; } ?>
<?php if( get_field(‘scrub_colour’) == ‘cornflower-blue’){ $postcolor = ‘#5184C4’; } ?>
<?php if( get_field(‘scrub_colour’) == ‘mediterranean-blue’){ $postcolor = ‘#009EC7’; } ?>
<?php if( get_field(‘scrub_colour’) == ‘ocean-blue’){ $postcolor = ‘#64BFD4’; } ?>
<?php if( get_field(‘scrub_colour’) == ‘pale-sky-blue’){ $postcolor = ‘#97BADE’; } ?>
<?php if( get_field(‘scrub_colour’) == ‘dark-green’){ $postcolor = ‘#00A296’; } ?>
<?php if( get_field(‘scrub_colour’) == ‘mid-green’){ $postcolor = ‘#92CEBD’; } ?>
<?php if( get_field(‘scrub_colour’) == ‘silver-grey’){ $postcolor = ‘#ABAAAB’; } ?>
<div class=”roleContWrapper” style=”border-top: solid 10px <?php echo $postcolor; ?>”>
<div class=”cardTAB”>
<svg id=”scrubsIcon” data-name=”Layer 1″ xmlns=”http://www.w3.org/2000/svg&#8221; viewBox=”0 0 40 40″><title>Scrubs Icon</title><path style=”fill:<?php echo $postcolor; ?>;” d=”M39.6,7.22a40.13,40.13,0,0,0-13-4.12,1.11,1.11,0,0,0-1.39.72c-.43.91-.88,1.73-.92,1.8-1.72,3.28-3.54,6-4.18,6.19-.66-.16-2.48-2.63-4.25-5.63-.46-.76-.8-1.42-1.25-2.28a1.29,1.29,0,0,0-1.52-.77A37.94,37.94,0,0,0,.4,7.22a.78.78,0,0,0-.32,1L3.47,15a.79.79,0,0,0,.9.41l3.49-.87L6.78,36.11a.79.79,0,0,0,.79.83H32.43a.79.79,0,0,0,.79-.83L32.14,14.57l3.49.87a.79.79,0,0,0,.9-.41l3.39-6.78A.78.78,0,0,0,39.6,7.22Z”/></svg>
</div>
“>
<h3 class=”postHeader”><?php the_title(); ?></h3>
<div class=”postCATS”>
<?php
$categories = get_the_category();
$parentCatName = get_cat_name($categories[0]->parent);
if ( ! empty( $categories ) ) {
?>
<span class=”parentCAT”><?php echo esc_html( $parentCatName ); ?></span>
<?php
}
?>
</div>
<p class=”postIntro”><?php the_field(‘brief_role_description’); ?></p>
<div class=”readmoreWrapper”>
<p class=”postreadmore” href=”<?php the_permalink(); ?>”>Learn more</p>
</div>

</div>
</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
}
}
?>

Can’t seem to see why it’s not choosing one or the other, the only way at the moment I can get it to find no results is to search for something that I know isn’t available.

Thank you
Scott

Trevor

#227016

This reply has been marked as private.

Anonymous

#227029

This reply has been marked as private.

Trevor

#227033

As you have changed our code, and therefore the HTML structure and classes etc, you will need to add settings in the Infinite Scroll section.

Looking at the structure that you have, is this class (flex-grid):

https://www.screencast.com/t/ijjByxnMbzTh

used elsewhere on the page?

If not, then the settings might be these:

https://www.screencast.com/t/XNOrk9ZxllmZ

Anonymous

#227035

Hi Trevor,

Thanks for taking a look at that, no flex-grid isn’t being used anywhere else on that page, I’ll give the setting a go and let you know how I fair, thanks again and enjoy your evening.

Cheers
Scott

Trevor

#227039

OK. I will wait to hear from you.

Anonymous

#227041

Perfect tha worked a treat, I had to change .RoleGridWrapper to .col as the plugin seemed to have an issue with something in that particular class, it seemed to grumble about converting to lowercase, but changing to .col which is an additional class on the items anyway seems to have worked.

Thank you

Trevor

#227045

Make sure that col is not being used elsewhere on the page. You might want to add your own custom CSS class to the PHP and use that instead.

I will close this thread for now.

[Author]

Posts