-
Search Results
-
Hi,
I am building an e-commerce site using a bigcommerce backend. The products that I am rendering on my category pages using SF Pro shortcodes are only rendering evenly across the 3 columns (as I have styled my Text Editor) when the number of products on the page is divisible by 3. I have tried using Post Grid as an alternative solution but I am having difficulty using it because I do not see where Post Grid is pulling the data from, it is evidently not from the results.php file.
Thank you and let me know what you think
Sam
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(); ?>
Hi, The Bigcommerce products that I’m rendering on my category pages through SFPro are not rendering evenly on the page. I have tried to manipulate the elements using CSS and through changing the HTML on results.php but for some reason there is a break halfway through the last item on the first column and the second half of the item is being rendered on the second column. Is there anyway to make sure SFPro results are rendered evenly on a grid? Thanks.