Support Forums

Hi,
I’ve searched as long as possible in the forum.
I’ve read the documentation.

The ajax form search fields and reset, works well.
But I can’t get infinite scrolls to work.

I’ve tryed with shortcode. I’ve put the shortcode in the WP classic editor. I’ve copied results.php in a subfolder of my theme (that is elementor hello theme) and I pasted in, the code of the results-infinite-scroll.php template.
In the settings the result url is filled etc etc.
Nothing. Scrolling nothing happens.

Then I’ve tryed with custom setting. I’ve set a custom template in my theme with the code of the results-infinite-scroll.php template customized.
In the settings the result url is filled etc etc.
Ajax container = #main
Pagination Type is set to infinite scroll; show loading icon checkbox is checked, but it’s not loaded.
Post result selector = .search-results-item (but I’ve tryed without it, too)
Infinite Scroll Container: = empty (but I’ve tryed with #search-filter-results-list, too)
I’ve tryed all the other fields of the Ajax Pagination setting section, but nothing.
I’ve deactivated all plugin except ACF Pro, Custom post type UI and S&F Pro of course. Nothing
I’ve changed the theme with a default one. Nothing.

The page is on a live web site that I’m developing. I can give the url but not publicly

Thanks in advance for your help

My custom template code:

<?php
/*
Template Name: Eventi
*/
get_header(); 
?>
<style>
.content {
    width:1440px;
    margin:0 auto;
    padding:20px;
}
.search-results-wrapper {
    display:flex;
    flex-wrap: wrap;
}
.search-results-item {
  /*flex: 1 0 21%;*/
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-basis: 25%;
}
.content-wrapper {
  flex: 1;
}
.post-thumb {
    height:300px;
    width:100%;
    background-position:center;
    background-size:cover;
    border-radius: 0 80px 40px 80px;
    border: 1px solid #15255E;
}
.post-thumb .term {
    display:inline-block;
    padding:5px 20px;
    background-color:#ccc;
    color:#FFF;
    min-width:200px;
    text-align:center;
    font-size: 20px;
    font-weight: 500;
}
.post-content {
    display:none;
    font-size:1rem;
  color:#010326;
  padding-top:20px;
  width:100%;
}
.post-title {
    color: #009cd3;
    font-size: 28px;
    margin-top:30px;
}
.post-event-date,
.post-event-place {
    font-size: 16px;
    font-weight: 400;
    color: #009cd3;
}

.search-results-wrapper .btn-wrapper {
    margin-top:30px;
}
.search-results-wrapper .toggle_btn {
    width:100px;
}
.search-results-wrapper .btn-hover-last {
    width:75px;
}
.search-results-wrapper .btn-hover-first {
    margin-right:40px;
}
.search-results-wrapper .btn-hover-wrapper {
  text-align:left;  
  position:relative;
  padding-right:20px;
  display:inline-block;
}

.search-results-wrapper .toggle-wrapper:after {
  content:"\f067";
  font-size: 16px;
  top: 0px;
  right: 0px;
  position: absolute;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  transition: all .5s ease-out;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: 'FontAwesome';
  color:#15255e;
}
.search-results-wrapper .toggle-wrapper.active:after {
  transform: rotate(-180deg);
  content:"\f068";
  color:#009ad2;
}
.search-results-wrapper .btn-hover-wrapper a
{
  display:block;
  position:relative;
  cursor:pointer;
}
.search-results-wrapper .btn-hover-wrapper img
{
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
.search-results-wrapper .btn-hover-last {
    padding:0;
}
.search-results-wrapper .btn-hover-last a {
  transform: translateY(-3px);
}
.search-results-wrapper .btn-hover-wrapper .hover-image
{
  position:absolute;
  top:0px;
  left:0px;
  opacity:0;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.search-results-wrapper .btn-hover-wrapper:hover img
{
 opacity:0; 
}

.search-results-wrapper .btn-hover-wrapper:hover .hover-image
{
 opacity:1; 
}

</style>

	
	<div class="content">
	
		<div class="inner-content">

			<main class="main" role="main" id="main">
			    
				
				<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

                    <article id="post-<?php the_ID(); ?>" <?php post_class(''); ?> role="article" itemscope itemtype="http://schema.org/WebPage">
                    						
                    	<header class="article-header"><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                    		<h1 class="page-title"><?php the_title(); ?></h1>
                        </header> <!-- end article header -->

                        <section class="entry-content" itemprop="text">
                    	    <?php the_content(); ?>
                    	</section> <!-- end article section -->
                    
                    </article> <!-- end article -->
                    
                 <?php endwhile; endif; ?>
                 
                <?php wp_reset_query(); ?>

                 
                    
            	<div>
            		<?php echo do_shortcode('[searchandfilter id="1675"]'); ?>
            	</div>

                    <?php
                    
                    $args = array('post_type' => 'eventi');
                    $args['search_filter_id'] = 1675;
                    $query = new WP_Query($args);
                    
                    if ( $query->have_posts() ) {
                    ?>
                    
                    Found <?php echo $query->found_posts; ?> Results<br />
                    
                    	<div class="search-results-wrapper" id="search-filter-results-list">
                        	<?php
                        	while ($query->have_posts())
                        	{
                        		$query->the_post();
                        		$content = get_the_content();
                        		?>
                        		<div class="search-results-item search-filter-result-item">
                        			
                        			<div class="content-wrapper">
                            		    <?php 
                            				if ( has_post_thumbnail() ) :
                            				    $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium-large'); 
                            		    ?>
                            				<div class="post-thumb" style="background-image:url(<?=$featured_img_url ?>)">
                            				    <?php 
                                                    $terms = get_the_terms( $post->ID, 'tipologia' ); 
                                                    foreach($terms as $term) :
                                                ?>
                                                        <span class='term' style="background-color:<?php the_field('tax_tipologia_color', 'tipologia' . '_' . $term->term_id) ?>">
                                                          <?php echo $term->name; ?>
                                                        </span>
                                                <?php
                                                    endforeach;
                                                ?>
                            				</div>
                            			<?php 
                            			    endif;
                            			?>
                            			<h2 class="post-title"><?php the_title(); ?></h2>
                            			<div class="post-event-date">
                            			    <span class="from-date"><?php the_field("start_date"); ?></span>
                            			    <?php 
                            			        if ( get_field("end_date") ) :
                        		            ?>
                            			            <span class="to-date"> - <?php the_field("end_date"); ?></span>
                            			    <?php       
                            			        endif;
                            			    ?>
                            			</div>
                            			<div class="post-event-place"><?php the_field("luogo"); ?></div>
                                    </div>
                                    
                                    <div class="btn-wrapper">
                                        <div class="btn-hover-wrapper toggle-wrapper btn-hover-first">
                                          <a class="toggle_btn" data-id="post-<?php the_ID(); ?>">  
                                            <img src="https://supernovae.kreas.it/wp/wp-content/uploads/2019/12/Scopri-di-piu-2.png" alt="Scopri di piu">
                                            <img src="https://supernovae.kreas.it/wp/wp-content/uploads/2019/12/Scopri-di-piu_over.png" class="hover-image" alt="Scopri di piu over">
                                          </a>
                                        </div>
                                        <div class="btn-hover-wrapper btn-hover-last">
                                          <a href="<?php the_field("event_url"); ?>" target="_blank" title="Scopri di piu">
                                            <img src="https://supernovae.kreas.it/wp/wp-content/uploads/2019/11/vai-al-sito-e1575911625135.png" alt="Vai al sito">
                                            <img src="https://supernovae.kreas.it/wp/wp-content/uploads/2019/11/vai-al-sito-over-e1575911641927.png" class="hover-image" alt="Vai al sito">  
                                          </a>
                                        </div>
                                        <div class="post-content toggle-content" id="post-<?php the_ID(); ?>">
                                            <?=$content ?>
                                        </div>
                                    </div>
                                    
                        		</div>
                        		
                    		<?php
                        	}
                        	?>
                    	</div>
                    <?php
                    }
                    else
                    {
                    	?>
                    	<div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'>
                    		<span>Non sono stati trovati eventi</span>
                    	</div>
                    	<?php
                    }
                    ?>
				
			    					
			</main> <!-- end #main -->
			
			

			

		</div> <!-- end #inner-content -->

	</div> <!-- end #content -->

<script>
jQuery(document).on('click', ".toggle_btn", function(event){
    var post_id = jQuery(this).attr("data-id");
    jQuery(this).parent().toggleClass('active');
    jQuery("#" + post_id).toggle(500);
    event.preventDefault();
});    
</script>
<?php get_footer(); ?>