custom or shortcode method fails with infinite scroll

Anonymous

#233581

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(); ?>

Trevor

#233590

This reply has been marked as private.

Anonymous

#233593

This reply has been marked as private.

Trevor

#233652

This reply has been marked as private.

Anonymous

#233668

This reply has been marked as private.

Trevor

#233700

This reply has been marked as private.

Anonymous

#233713

I’ve tryed to move the <div id=”ajax-container”> to line 383 like you suggest me but infinite scroll not works.
I’ve also tryed to move the three lines above the div but again, nothing happens.
Right now I’ve left the three lines of code above the div like in second test.

Trevor

#233764

There must be a coding error somewhere. Are you able to set this up using our shortcode method using the standard code found in the infinite scroll template? Then we can move forwards from there.

Anonymous

#233819

This reply has been marked as private.

Trevor

#233852

Could you test this using the Twenty Twenty theme (you would need to copy the search-filter folder to the Twenty Twenty them folder)?

[Author]

Posts