Forums › Forums › Search & Filter Pro › custom or shortcode method fails with infinite scroll
- This topic has 14 replies, 3 voices, and was last updated 4 years, 9 months ago by Trevor.
-
Anonymous(Private) February 11, 2020 at 1:04 am #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(); ?>
Anonymous(Private) February 11, 2020 at 5:20 pm #233713I’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. -
AuthorPosts