Search Results for 'get_field('

[Trevor]

So, what does this code do?

$test_price = get_field('test_price');
if( $test_price ) echo "CHF " . number_format( $test_price,,".-" ,"’");

[Trevor]

Let us do this in steps. Make a snippet named show_price and set it to PHP and Shortcode like this with this code:

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

Code used:

echo "this is the price";

Then, in the Text tab of a Text editor, place the shortcode:

[show_price]

And see if that works (shows that message)? If it does …

Make a test ACF field for the cars, named test_price, in one car add the raw price.

Change the snippet to this:

$test_price = get_field('test_price');
if( $test_price ) echo $test_price;

Check to see if on that car’s page, that worked? Then, if it does, we need to format the number.

[Trevor]

This is what I see. To get the fields to show in the results you would need to code them into the template, using this guide:

https://searchandfilter.com/documentation/search-results/using-a-shortcode/#customising-the-results

The extra code would likely need to look like this:

<?php $county = get_field('county');
if( $county ) { ?>
<div class="county-field">County: <?php echo $county; ?></div>
<?php } ?>

[Trevor]

You would normally use the get_field() function to place a field term into a variable, and then test that it exists and output if it exists. There are many posts with examples, using this search:

https://support.searchandfilter.com/forums/search/get_field%28/

[Anonymous]

Hi Trevor,

I’m not sure where I define the ajax container. I copied the default results.php, pasted in an overriding template and made slight modifications to integrate Foundation CSS classes and pull in ACF field values.

Here’s my results template 475.php

<?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
 *
 */
?>

<?php if ( $query->have_posts() ) : ?>

<div class="grid-x grid-padding-x grid-margin-x resources-results-list">
		
	<?php 
	
	while ($query->have_posts()) : $query->the_post(); 
	
		$resource_link_type = get_field('resource_link_type');
	
		if( $resource_link_type == 'internal') :
	
			$link_dest = get_field('resource_internal');
			$link_attr = '';
	
		elseif( $resource_link_type == 'external') :
	
			$link_dest = get_field('resource_external');
			$link_attr = ' target="_blank"';
	
		elseif( $resource_link_type == 'download') :
	
			$link_dest = get_field('resource_download');
			$link_attr = ' target="_blank" download';
	
		endif;
	
	?>
		<div class="small-12 medium-6 large-4 cell">
			<div class="resource-item">
				<div class="resource-image text-center">
					<?php the_post_thumbnail( 'full' ); ?>
				</div>
				<h3 class="resource-title"><?php the_title(); ?></h3>
				<div class="resource-type"><?php the_field('resource_type'); ?></div>
				<div class="resource-content">
					<?php the_content(); ?>
				</div>
				<div class="resource-link">
					<a href="<?php echo $link_dest; ?>" class="button"<?php echo $link_attr; ?>><?php the_field('resource_link_text'); ?></a>
				</div>
			</div>
		</div>
	<?php endwhile; ?>
		
</div>

<div class="grid-x grid-padding-x pagination align-center">
    <?php /*
	<div class="cell shrink nav-previous"><?php next_posts_link( 'Older posts', $query->max_num_pages ); ?></div>
	<div class="cell shrink nav-next"><?php previous_posts_link( 'Newer posts' ); ?></div>
    */ ?>
    
    <div class="cell shrink">
        <?php numbered_pagination(); ?>
    </div>
    
</div>
	
			
<?php 

else : 

?>
<div class="grid-x grid-padding-x">
	<div class="small-12 cell">
		<span>No Results Found</span>
	</div>
</div>
<?php endif; ?>

[Anonymous]

before my loop start I’m define some empty arrray. then when loop start, using array push method i added value on those array.

https://prnt.sc/rysvwt
https://prnt.sc/ryswfe

by using this array i run some javascript.

https://prnt.sc/rysx71

now what heppened when i filter the array will not update. so my script stop working after filter.even though i add this

https://prnt.sc/rysy07

how to solve this problem?

<?php
/* 
   Template Name: Broker list
*/

get_header(); ?>

<?php do_action( 'ocean_before_content_wrap' ); ?>

<div id="content-wrap" class="container clr">

    <?php do_action( 'ocean_before_primary' ); ?>

    <div id="primary" class="content-area clr">

        <?php do_action( 'ocean_before_content' ); ?>

        <div id="content" class="site-content clr">

            <?php do_action( 'ocean_before_content_inner' ); ?>

            <!--start my coding-->
            <?php 
				$ourCurrentPage = get_query_var('paged');
                $args = array(  
               'post_type' => 'broker',
               'post_status' => 'publish',
               'posts_per_page' => 8,
               'paged' => $ourCurrentPage
                );
                $args['search_filter_id'] = 756;
                $the_query = new WP_Query( $args ); ?>
            <?php echo do_shortcode('[elementor-template id="655"]'); ?>
            <div class="main-container">
                <span class="flot-filter"><i class="fas fa-sliders-h"></i></span>
                <div class="filter-wrap">
                    <div class="filter">
                    <span class="close"><i class="far fa-times-circle"></i></span>
                    <p>Filters</p>
                    <?php echo do_shortcode('[searchandfilter id="756"]'); ?>
                </div>
                </div>
                <div class="sections">
                    <?php
                    $items = Array();
                    $item = Array();
                    $posts = Array(); 
                    if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

                    <?php 
                           $cash_back_heading = get_field("cash_back_heading");
                           $profile_image = get_field("profile_image");
                           $website_link = get_field('website_link');
                           $count=0;
                           $counttwo=0;
                           $countthree=0;
                         ?>
                    <?php array_push( $posts, get_the_ID() ) ?>
                    
                    
                    <?php array_push( $items, strtolower(preg_replace('/\s+/', '_', get_the_title("",false))) ) ?>
                    <?php array_push( $item, strtolower(preg_replace('/\s+/', '', get_the_title("",false))) ) ?>
                    <div class="intro">
                        <div class="flex-container">
                            <div class="flex-q-1">
                                <img />' alt="" />
                            </div>
                            <div class="flex-q-3">
                                <h4><?php echo the_title(); ?> <span> >> </span> <a>" class="details-button" target="_blank">Details</a></h4>
                                <div class="flex">
                                    <div class='flex-full s<?php echo get_the_ID();?>'>
                                        <?php if( have_rows('table') ): ?>
                                        <?php while ( have_rows('table') ) : the_row(); ?>
                                        <?php if( have_rows('column') ): ?>
                                        <?php while ( have_rows('column') ) : the_row(); ?>
                                        <?php if( have_rows('table_data') ): ?>
                                        <ul class="ac">
                                            <?php while ( have_rows('table_data') ) : the_row();$counttwo++ ?>
                                            <?php if( $counttwo == 1): ?>
                                            <li class='items <?php echo strtolower(preg_replace('/\s+/', '_', get_the_title("",false))); ?>'><?php the_sub_field('table_cell'); ?></li>
                                            <?php else: ?>
                                            <li class='item <?php echo strtolower(preg_replace('/\s+/', '', get_the_title("",false))); ?>'><?php the_sub_field('table_cell'); ?></li>
                                            <?php endif; ?>
                                            <?php endwhile; ?>
                                        </ul>
                                        <?php endif; ?>
                                        <?php break;  ?>
                                        <?php endwhile; ?>
                                        <?php endif; ?>
                                        <?php endwhile; ?>
                                        <?php endif; ?>
                                        <?php if( have_rows('table') ): ?>
                                        <ul class="main-flex">
                                            <?php while ( have_rows('table') ) : the_row(); ?>
                                            <?php if( have_rows('column') ): ?>
                                            <?php while ( have_rows('column') ) : the_row(); ?>
                                            <li class="main-flex-child">
                                                <?php if( have_rows('table_data') ): ?>
                                                <?php $count++; ?>
                                                <?php if($count == 2): ?>
                                                <ul class='normal active'>
                                                    <?php else: ?>
                                                    <ul class='normal'>
                                                        <?php endif; ?>
                                                        <?php while ( have_rows('table_data') ) : the_row();?>
                                                        <?php if( !$countthree): ?>
                                                        <li class='items <?php echo strtolower(preg_replace('/\s+/', '_', get_the_title("",false))); ?>'><?php the_sub_field('table_cell'); ?></li>
                                                        <?php $dropdowns[] = get_sub_field('table_cell'); ?>
                                                        <?php else: ?>
                                                        <li class='item <?php echo strtolower(preg_replace('/\s+/', '', get_the_title("",false))); ?>'><?php the_sub_field('table_cell'); ?></li>
                                                        <?php endif; ?>
                                                        <?php  $countthree++ ?>
                                                        <?php endwhile;  ?>
                                                        <?php  $countthree=0 ?>
                                                    </ul>
                                                    <?php endif; ?>
                                            </li>
                                            <?php endwhile; ?>
                                            <?php endif; ?>
                                            <?php endwhile; ?>
                                        </ul>
                                        <?php endif; ?>
                                    </div>
                                    <p class="sh">more</p>
                                </div>
                            </div>
                            <div class="flex-q-1 last">
                                <div class='payment <?php echo get_the_ID();?>'>
                                    <h4>Payment Options</h4>
                                    <?php if( have_rows('payment_options') ): ?>
                                    <ul>
                                        <?php while ( have_rows('payment_options') ) : the_row(); ?>
                                        <li><img src="https://moneybackfx.com/wp-content/uploads/2020/04/check-mark.png" alt="" /><?php the_sub_field('payment'); ?></li>
                                        <?php endwhile; ?>
                                    </ul>
                                    <?php endif; ?>
                                    <button id="send" class="send">Get CashBack</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <?php $dropdowns!=null?$dropdown[]=$dropdowns:null ?>
                    <?php $dropdowns = Array() ?>
                    
                    <?php endwhile; ?>

                    <div class="pagination">
                        <h2><?php echo paginate_links(array(
                    'total' => $the_query->max_num_pages
                    ));
                    ?></h2>
                    </div>

                    <?php else : ?>
                    <div class="not-found">
                        <p><?php  _e( 'Sorry, no brokers matched your criteria.'); ?></p>
                    </div>
                    <?php endif; ?>

                    <?php wp_reset_postdata(); ?>
                </div>
            </div>
            <?php echo do_shortcode('[elementor-template id="658"]'); ?>
            <?php echo do_shortcode('[elementor-template id="661"]'); ?>
            <!--end of my coding-->
            <style>
                select,
                select:focus {
                    font-size: 16px
                }

                body {
                    color: #333
                }

                h1,
                h2,
                h3,
                h4 {
                    font-family: Poppins, Sans-serif;
                    margin-bottom: 10px
                }

                p {
                    font-family: Montserrat, Sans-serif;
                    font-weight: 500;
                    line-height: 1.8em
                }

                .sh {
                    text-align: center;
                    font-size: 11px;
                    border-bottom: 1px dotted #24eaa4;
                    color: #24eaa4;
                    margin: 0px auto;
                    cursor: pointer;
                    font-weight:700;
                }

                .main-container {
                    background: #f7f7f7;
                    padding: 20px 15px
                }

                .intro {
                    background: #fff;
                    padding: 30px 20px;
                    box-shadow: 2px 4px 15px rgba(0, 0, 0, .1);
                    border-radius: 5px;
                    margin-bottom: 15px
                }

                .intro .flex-q-1 img {
                    max-width: 50%;
                    border-radius: 3px;
                }

                .intro .flex-q-1,
                .intro .flex-q-3 {
                    text-align: center
                }

                .intro .flex-q-3 h4 {
                    margin: 15px 0;
                    font-size: 15px;
                }

                .payment h4 {
                    margin: 10px 0 7px;
                    font-size: 15px;
                }

                .intro .flex-q-3 h4 span,
                .intro .flex-q-3 h4 a {
                    font-size: 13px;
                    font-weight: 400;
                }

                .intro .flex-q-3 h4 a {
                    border-bottom: 1px dotted #8482d6;
                }

                .payment ul {
                    list-style: none;
                    margin: 0 0 10px 0;
                }

                .payment ul li img {
                    display: inline;
                }

                .send {
                    font-weight: 600 !important;
                    border-radius: 31px 31px 31px 31px;
                    box-shadow: 4px 4px 10px 0 rgba(36, 234, 164, .38);
                    padding: 5px 30px 5px 30px;
                    border: none
                }

                .send:hover {
                    background: #24eaa4
                }

                .intro .main-flex {
                    list-style: none;
                    margin: 0
                }

                .intro .main-flex ul,
                .intro ul.ac {
                    list-style: none;
                    margin: 0
                }

                .intro .main-flex .main-flex-child {
                    flex-grow: 1;
                }

                .intro .main-flex ul li,
                .intro ul.ac li {
                    padding: 5px;
                    border: 1px solid #eee;
                    font-weight: 500;
                    font-size: 13px;
                    font-family: Montserrat, Sans-serif;
                }

                .payment ul li {
                    font-weight: 500;
                    font-size: 12px;
                    font-family: Montserrat, Sans-serif;
                }

                .intro .main-flex ul li:first-child,
                .intro ul.ac li:first-child {
                    color: #8482d6;
                    font-family: Poppins, Sans-serif;
                    background: rgba(132, 130, 214, .32);
                    font-weight: 500;
                    font-size: 13px;
                }

                .intro .flex-full {
                    display: flex;
                    flex-wrap: wrap;
                    width: 100%;
                }

                .intro .flex-full .ac,
                .intro .flex-full .main-flex {
                    flex-grow: 1;
                    max-width: 50%
                }

                .intro .flex-full .main-flex-child ul {
                    display: none
                }

                .intro .flex-full .main-flex-child ul.active {
                    display: block
                }

                .mob {
                    display: none
                }

                .intro .flex {
                    display: flex;
                    flex-wrap: wrap
                }

                .center-h.h {
                    margin-top: 20px
                }
                .paym{
                    order:1;
                }
                .paym p{
                    font-weight:bold;
                    margin:0 0 10px;
                }
                .payment{
                    display:flex;
                    flex-direction:column;
                }
                .payment .send{
                    order:2;
                }
                .paym p span{
                    position:relative;
                    display:inline-block;
                    border-radius:100%;
                    background:#333;
                    color:#fff;
                    width:18px;
                    height:18px;
                    line-height:18px;
                    font-size:11px;
                }
                .paym ul{
                    position:absolute;
                    list-style:none;
                    margin:0px;
                    padding:15px;
                    border-radius:5px;
                    box-shadow:2px 4px 10px rgba(0,0,0,.17);
                    display:inline;
                    background:#fff;
                    text-align:left;
                    display:none;
                    bottom:41px;
                    left:50%;
                    transform:translatex(-50%);
                    width:300px;
                    transition:.2s;
                    color:#333;
                }
                .payment .paym ul,.payment > ul{
                    display:none;
                }
                .paym p span:hover ul{
                    display:block;
                    bottom:38px;
                }
                /************************************search and filter**************************************/
                .filter-wrap{
                    overflow:hidden;
                    position:fixed;
                    z-index:3;
                    width:0%;
                    transition: 0.2s;
                    top:0;
                    left:0;
                    background:rgba(0, 0, 0, .11);
                }
                .filter{
                    background:#fff;
                    box-shadow: 2px 4px 15px rgba(0, 0, 0, .75);
                    border-radius: 5px;
                    margin-bottom:15px;
                    margin-top:85px;

                }
                .filter-wrap.open{
                    padding:0px 15px;
                    width:100%;
                    height:100%;
                }
                .filter .close{
                     float:right;
                     cursor:pointer;
                     font-size:25px;
                     color:#606060;
                     margin-top:0px;
                     margin-right:10px;
                 }
                .filter p{
                    background:#ebebeb;
                    color:#606060;
                    padding:10px;
                    margin-bottom:0;
                    border-radius:5px 5px 0 0;
                }
                .filter #search-filter-form-756{
                    padding:15px;
                }
                #search-filter-form-756 ul{
                    display:flex;
                    flex-wrap:wrap;
                    margin:0px;
                }
                #search-filter-form-756 ul li{
                    width:100%;
                }
                #search-filter-form-756 ul li input,#search-filter-form-756 ul li label{
                    display:block;
                }
                  ::-webkit-input-placeholder { /* Edge */
                  font-family: "Montserrat", Sans-serif;
                  font-size: 13px;
                }
                
                :-ms-input-placeholder { /* Internet Explorer 10-11 */
                  font-family: "Montserrat", Sans-serif;
                  font-size: 13px;
                }
                
                ::placeholder {
                  font-family: "Montserrat", Sans-serif;
                  font-size: 13px;
                }
                select:focus,select,input,option{
                  font-size: 13px;
                  font-family: "Montserrat", Sans-serif;
                  border-radius:5px;
                }
                form input[type="text"], form input[type="password"],
                form input[type="email"], form input[type="url"],
                form input[type="date"], form input[type="month"],
                form input[type="time"], form input[type="datetime"],
                form input[type="datetime-local"], form input[type="week"],
                form input[type="number"], form input[type="search"],
                form input[type="tel"], form input[type="color"],
                form select, form textarea{
                    min-height:30px;
                    line-height:30px;
                    font-size:13px;
                    padding:0px 12px;
                }
                .flot-filter{
                    text-align:center;
                    display:inline-block;
                    background:#121126;
                    border-radius:100%;
                    box-shadow: 4px 4px 10px 0px rgba(36, 234, 164, 0.38);
                    overflow:hidden;
                    position:fixed;
                    top:85px;
                    left:15px;
                    cursor:pointer;
                    width: 50px;
                    height: 50px;
                    border-radius: 100%;
                    z-index:2;
                }
                .flot-filter i{
                    color:#24eaa4;
                    font-size: 28px;
                    line-height: 50px;
                }
                /**************************pagination*******************************/
                .pagination{
                    margin:auto;
                    text-align:center;
                }
                .pagination h2{
                    font-weight:500;
                    font-size:15px;
                    padding:7px;
                    background:#fff;
                    box-shadow: 2px 4px 15px rgba(0, 0, 0, .1);
                    display:inline-block;
                    
                }
                .page-numbers{
                    padding:3px;
                    margin:0px 2px;
                    width:31px;
                    display:inline-block;
                }
                .page-numbers.current{
                    background:#24eaa4;
                    border-radius:2px;
                    color:#fff;
                }
                .next,.prev{
                    width:initial;
                }
                @media(min-width:768px) {
                    .flot-filter{
                        display:none;
                    }
                    .intro .flex-q-3 h2 {
                        margin-top: 0
                    }
                    .filter-wrap{
                        position:initial;
                        background:none;
                        width:100%;
                    }
                    .filter{
                        margin-top:0px;
                        box-shadow: 2px 4px 15px rgba(0, 0, 0, .1);
                    }
                    .close{
                        display:none;
                    }
                    #search-filter-form-756 ul li:nth-child(n+2) {
                        width:48%;
                    }
                    #search-filter-form-756 ul{
                        justify-content:space-around;
                    }
                }

                @media(min-width:992px) {
                    .payment > ul{
                        display:block;
                    }
                    .payment .paym{
                        display:none;
                    }
                    .intro .flex-container {
                        display: flex
                    }

                    .intro .flex-q-1 {
                        max-width: 15%;
                        width: 15%
                    }

                    .intro .flex-q-1 img {
                        display: block;
                        max-width: 90%
                    }

                    .intro .flex-q-1 ul li img {
                        display: inline;
                    }

                    .intro .flex-q-3 {
                        text-align: left;
                        align-self: center;
                        width: 65%
                    }

                    .intro .flex-q-1.last {
                        max-width: 20%;
                        width: 20%;
                        align-self: center;
                    }

                    .mob {
                        display: block
                    }

                    .desk {
                        display: none
                    }

                    .intro .flex {
                        display: flex;
                        justify-content: space-between;
                        flex-basis: 1
                    }

                    select[name="Platform"],
                    .ac {
                        display: none
                    }

                    .intro .flex-full .main-flex-child ul {
                        display: initial
                    }

                    .intro .main-flex {
                        display: flex
                    }

                    .intro .flex-full .ac,
                    .intro .flex-full .main-flex {
                        max-width: initial
                    }

                    .intro .main-flex .main-flex-child {
                        max-width: 40%;
                    }

                    .payment {
                        margin-left: 15px;
                    }

                    .td {
                        display: none;
                    }
                    .filter-wrap{
                        max-width: 1100px;
                        margin: auto;
                    }
                    #search-filter-form-756 ul li:nth-child(n+2) {
                        width:30%;
                    }
                    
                    .sf-field-sort_order{
                        margin-left:-10px !important;
                    }
                }

                @media(min-width:1200px) {
                    .sections {
                        max-width: 1100px;
                        margin: auto
                    }

                    .intro .flex-full {
                        overflow-x: initial
                    }

                    .intro- {
                        padding-left: 2%;
                        padding-right: 2%
                    }
                    #search-filter-form-756 ul li:nth-child(n+2) {
                        width:15%;
                    }
                }
            </style>

            <script>
                <?php 
            $js_pid = json_encode($posts);
            $js_dropdown = json_encode($dropdown);
            $js_items = json_encode($items);
            $js_item = json_encode($item);
            echo "var pID = ". $js_pid . ";\n";
            echo "var dropDown = ". $js_dropdown . ";\n";
            echo "var items = ". $js_items . ";\n";
            echo "var item = ". $js_item . ";\n";
            ?>
                for (t = 0; t < dropDown.length; t++) {
                    var select = jQuery('<select>').prop('name', 'Platform')
                        .prop('class', 'Plat');
                    for (k = 1; k < dropDown[t].length; k++) {
                        select.append(jQuery("<option>")
                            .prop('value', dropDown[t][k])
                            .text(dropDown[t][k]));
                    }
                    jQuery('.flex-full:eq(' + [t] + ')').prepend(select);
                }
                jQuery('.normal').each(function() {
                    var k = jQuery(this).children('.items:first-child').html().toLowerCase().replace(/[\])}[{(]/g, '').replace(/ /g, "_");
                    jQuery(this).addClass(k);
                });
                jQuery('.Plat').change(function() {
                    var o = jQuery(this).children("option:selected").val().toLowerCase().replace(/[\])}[{(]/g, '').replace(/ /g, "_");
                    var q = o.replace(/ /g, "_");
                    jQuery('.' + q).addClass('active').parents('.main-flex-child').siblings().children('.normal').removeClass('active')
                });
                for (i = 0; i < pID.length; i++) {
                    var v = jQuery('.payment.' + pID[i] + ' ul li').length;
                    var l = '<div class="paym"><p><span>' + v + '</span></p></div>';
                    jQuery('.payment.' + pID[i]).append(l);
                }
                jQuery('.paym').each(function(){
                    var xt = jQuery(this).closest('.payment').find('ul').html();
                   jQuery(this).find('p span').append('<ul>'+xt+'</ul>'); 
                });
                jQuery('.flot-filter').click(function(){
                    jQuery('.filter-wrap').addClass('open');
                });
                jQuery('.close').click(function(){
                    jQuery('.filter-wrap').removeClass('open');
                });
            </script>

            <script>
                function equalHeights(className) {
                    var findClass = document.getElementsByClassName(className);
                    var tallest = 0;
                    for (i = 0; i < findClass.length; i++) {
                        var ele = findClass[i];
                        var eleHeight = ele.offsetHeight;
                        tallest = (eleHeight > tallest ? eleHeight : tallest); 
                    }
                    for (i = 0; i < findClass.length; i++) {
                        findClass[i].style.height = tallest + "px";
                    }
                }
                for (p = 0; p < items.length; p++) {
                    equalHeights(items[p]);
                    equalHeights(item[p]);
                }
                function sH(){
                    jQuery('ul.ac').each(function() {
                        jQuery('li:gt(2)', this).hide()
                    });
                    jQuery('ul.normal').each(function() {
                        jQuery('li:gt(2)', this).hide();
                        var tx = jQuery('li', this).length;
                        if (tx <= 3) {
                            jQuery(this).closest('.flex').find('.sh').hide();
                        }
                    });
    
                    jQuery('.sh').on('click', function(e) {
                        e.preventDefault();
                        var ql = jQuery(this).closest('.flex').find('ul.normal');
                        jQuery(this).closest('.flex').find('ul.ac li:gt(2)').slideToggle();
                        ql.each(function() {
                            jQuery('li:gt(2)', this).slideToggle();
                        });
                    });
                }
                sH();
               (function($) {
                    "use strict";
                    jQuery(document).on("sf:ajaxfinish", ".searchandfilter", function() {
                        for (t = 0; t < dropDown.length; t++) {
                            var select = jQuery('<select>').prop('name', 'Platform')
                                .prop('class', 'Plat');
                            for (k = 1; k < dropDown[t].length; k++) {
                                select.append(jQuery("<option>")
                                    .prop('value', dropDown[t][k])
                                    .text(dropDown[t][k]));
                            }
                            jQuery('.flex-full:eq(' + [t] + ')').prepend(select);
                        }
                        jQuery('.normal').each(function() {
                            var k = jQuery(this).children('.items:first-child').html().toLowerCase().replace(/[\])}[{(]/g, '').replace(/ /g, "_");
                            jQuery(this).addClass(k);
                        });
                        jQuery('.Plat').change(function() {
                            var o = jQuery(this).children("option:selected").val().toLowerCase().replace(/[\])}[{(]/g, '').replace(/ /g, "_");
                            var q = o.replace(/ /g, "_");
                            jQuery('.' + q).addClass('active').parents('.main-flex-child').siblings().children('.normal').removeClass('active')
                        });
                        for (i = 0; i < pID.length; i++) {
                            var v = jQuery('.payment.' + pID[i] + ' ul li').length;
                            var l = '<div class="paym"><p><span>' + v + '</span></p></div>';
                            jQuery('.payment.' + pID[i]).append(l);
                        }
                        jQuery('.paym').each(function(){
                            var xt = jQuery(this).closest('.payment').find('ul').html();
                           jQuery(this).find('p span').append('<ul>'+xt+'</ul>'); 
                        });
                        sH();
                        for (p = 0; p < items.length; p++) {
                            equalHeights(items[p]);
                            equalHeights(item[p]);
                            equalHeights('instatorex_markets');
                            equalHeights('instatorexmarkets');
                            equalHeights('axitrader_markets');
                            equalHeights('axitradermarkets');
                            
                        }
                    });
                }(jQuery));
            </script>
            <?php do_action( 'ocean_after_content_inner' ); ?>

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

        <?php do_action( 'ocean_after_content' ); ?>

    </div><!-- #primary -->

    <?php do_action( 'ocean_after_primary' ); ?>

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

<?php do_action( 'ocean_after_content_wrap' ); ?>

<?php get_footer(); ?>

[Anonymous]

Hi,

I’m having trouble preventing the double load effect when there is only one page of results. When there are multiple pages, the span with the data attribute works well. Example: https://abe.stpaulmedia.net/ But when there is only one page, the spinner appears if you scroll. Example: https://abe.stpaulmedia.net/?_sft_focus=civics-citizenship

The display results method is custom, and I’m using the template engine Twig via the plugin Timber. Here are the relevant bits:

functions.php

function spm_modify_blog_homepage_query( $query ) {
	if ( ! is_admin() && $query->is_home() && $query->is_main_query() ) {
		$sf_id = get_field( 'sf_id', 'option' );

		$query->set( 'orderby', 'title' );
        	$query->set( 'order', 'asc' );
		$query->set( 'search_filter_id', $sf_id );
    }
}
add_action( 'pre_get_posts', 'spm_modify_blog_homepage_query' );

index.php

$context = Timber::context();

$context['catalog_search_form'] = Timber::get_widgets( 'catalog-search-form' );
$context['posts'] = new Timber\PostQuery();
$context['pagination'] = Timber::get_pagination();

$templates = array( 'index.twig' );

Timber::render( $templates, $context );

index.twig

<div class="ajax-container">
	<div class="is-container">
		{% if posts %}
			{% for post in posts %}
				{% include 'blocks/preview.twig' %}
			{% endfor %}
		{% endif %}

		{% if pagination.current == pagination.total %}
			<p data-search-filter-action="infinite-scroll-end">End of results</p>
		{% endif %}	
	</div>
</div>

I tried searching the forums but didn’t find this specific issue. Thanks for taking a look, and let me know if you need more info.

[Anonymous]

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]

I have looked at the file and indeed the structure of the HTMl is that of a non-infinite scroll results.php file.

It will need to be modified/edited to be usuable for infinite scroll.

If you look in the plugin folder, there is a templates sub folder with examples of normal pagination and infinite scroll, to help you re-code it.

For me it might look like this instead?

 * @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() )
{
    ?>
     
    <!-- ***********************************************************************************************************
    products
    ************************************************************************************************************* -->
    <div class="found">Found <?php echo $query->found_posts; ?> Results<br /></div>
     
    <div class="search-filter-results-list products-list-area">
        <?php
        while ($query->have_posts())
        {
            $query->the_post();
             
            ?>
 
            <div class="search-filter-result-item products-list-item w_addt_image">
                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
 
                    <!-- 1st image from gallery on hover -->
                    <?php $addt_image = get_field('nr_additional_images'); if( $addt_image ): ?>
                    <div class="products-list-item-img-wrap addt_image">
                        <img src="<?php echo $addt_image[0]["sizes"]["large"]; ?>">
                    </div>
                    <?php else: ?>
                    <div class="products-list-item-img-wrap addt_image">
                        <?php the_post_thumbnail(); ?>
                    </div>
                    <?php endif; ?>
 
                    <?php $product_thumb = get_the_post_thumbnail(''); if( !empty($product_thumb) ): ?>
                    <div class="products-list-item-img-wrap">
                        <?php the_post_thumbnail(); ?>
                    </div>
                    <?php else: ?>
                    <div class="products-list-item-img-wrap">
                        <img src="http://placehold.it/300x300/e5e5e5/ffffff?text=Image+Not+Available" alt="">
                    </div>
                    <?php endif; ?>
 
                </a>
                <div class="details">
                    <!-- <div class="product-material-and-collection"><?php the_field('nr_material'); ?> | <?php the_field('nr_collection'); ?></div> -->
                    <div class="product-material-and-collection">
                    <?php
                        $field1 = get_field_object('nr_material');
                        $materials = get_field('nr_material'); // array of selected values
                        $resultstr = array();
                        foreach ($materials as $material) {
                            $resultstr[] = $field1['choices'][ $material ];
                        }
                        echo implode(", ",$resultstr);
                    ?>
                     |
                    <?php
                        $field = get_field_object('nr_collection');
                        $value = $field['value'];
                        $label = $field['choices'][ $value ];
                    ?>
                    <?php echo $label; ?>
 
                        <?php the_favorites_button($post_id, $site_id); ?>
                    </div>
                    <div class="product-name">
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </div>
                </div>
            </div>
             
            <?php
        }
        ?>
    </div>
     
    <?php
}
else
{
	?>
	<div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'>
		<span>End of Results</span>
	</div>
	<?php
}
?>

[Anonymous]

This is my code, using a shortcode and a query. The display results option is Custom and using ajax.

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

<div class="clearfix"></div>
<div class="filtro-cars" data-wow-duration="1s" data-wow-delay="0.3s">

	<?php $args = array('post_type' => 'renting');
	$args['search_filter_id'] = 5437;
	$query = new WP_Query($args);?>

	<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); // run the loop ?>
	<div class="car main-car col-xs-12 col-sm-12 col-md-6 wow fadeIn no-padding" data-wow-duration="0.4s" data-wow-delay="0.3s">
		<a class="redirectClick" href="<?php the_permalink(); ?>">
			<div class="item item-price" >
				<div class="car-shadow">
					<div class="image"><?php the_post_thumbnail( 'car-related' ); ?></div>
				    <div class="data">
					    <div class="row">
						    <div class="col-md-7 col-lg-8">
						    	<span class="marca"><?php the_title (''); ?></span>
						    	<span class="vehicle-finish"><?php the_field ('modelo'); ?></span>
						    </div>
						    <div class="col-md-5 col-lg-4">
							    <div class="combustible hidden-xs hidden-sm">
					    			<?php
									$count = 0;
									$your_repeater = get_field('caracteristicas');
									if($your_repeater){
									while( have_rows('caracteristicas') ): the_row();
									$count++;
									$my_field = get_sub_field('icono');
									$my_content= get_sub_field('texto');
									if ($count == 4) { ?>
										<img width="14" src="<?php echo get_template_directory_uri(); ?>/inc/img/front/<?php echo $my_field; ?>.svg" /> <?php echo $my_content; ?>
									<?php }
									endwhile;  
									}
									?>
							    </div>
						    </div>
					    </div>
					    <div class="row">
						    <div class="col-sm-7">
							    <div class="precio-card"><?php the_field ('precio'); ?>€/mes<br>
							    	<span class="iva-incluidos">IVA incluido</span>
							    </div>
						    </div>
						    <div class="col-sm-5 info">
							    <div class="kilometros">
								    <?php the_field ('km_anuales'); ?><span class="km-anuales">km anuales |</span>
								</div>
							    <div class="meses">
								    <?php the_field ('meses'); ?><span class="meses">meses</span>
								</div>
						    </div>
					    </div>
				    </div>
				</div>
			</div>
		</a>
	</div>
	<?php endwhile;
	else: ?>
	<div class="no-results">No hemos encontrado resultados, prueba con otros criterios de filtro.</div>
	<?php endif; ?>
 
	<?php wp_reset_query(); ?>

</div>