Isotope 필터링 및 InfiniteScroll과 중복되는 페이지/콘텐츠 로딩

Question

먼저 저는 PHP와 Javascript 초보자이며 WordPress와 함께 작업 할 수 있도록이 코드를 만드는 데 도움을 준 사람이 있습니다. 내가 겪고있는 문제는 그것이 바닥에 도달하면 게시물의 중복 집합을로드한다는 것입니다. 나는 코드에 무엇이 잘못 됐는지를 알기 위해 hi와 low를 검색했다.

게시 유형을로드하는 PHP입니다.

<script language='javascript' > 
    jQuery(function($){ 
    //IMPLEMENTING THE ISOTOPE PLUGIN 
// modify Isotope's absolute position method 
var $container = $('#container'); 

var $optionSets = $('#options .option-set'), 
$optionLinks = $optionSets.find('a'); 

$optionLinks.click(function(){ 
    var $this = $(this); 

    if (!$this.hasClass('iam_child_category')) { 
     if(!$this.hasClass('iam_child_of_child_category')) { 
       $('.child_filters li').removeClass('child_active_class').addClass('child_inactive_class'); 
       $('.iam_child_category').removeClass('selected'); 
     } 
    } 

    if (!$this.hasClass('iam_child_of_child_category')) { 
     $('.child_filters_child li').removeClass('child_active_class').addClass('child_inactive_class'); 
     $('.iam_child_of_child_category').removeClass('selected'); 
    } 

    // don't proceed if already selected 
    /*if ($this.hasClass('selected')) { 
     return false; 
    }*/ 

    var $optionSet = $this.parents('.option-set'); 
    $optionSet.find('.selected').removeClass('selected'); 
    $this.addClass('selected'); 

    // filter items when filter link is clicked 
    var selector = $(this).attr('data-filter'); 

    $(selector + '_child_li').removeClass('child_inactive_class').addClass('child_active_class'); 

    if(selector == '*') { 
     $('.products').css('visibility','visible').hide().delay(200).fadeIn('slow'); 
    } 
    else { 
     $('.products').hide(); 
     $(selector).css('visibility','visible').hide().delay(200).fadeIn('slow'); 
    } 
    return false; 

}); 



var currentPage = 1; 
var lastPage = (<?php echo $totalPages; ?> == 0)?1:<?php echo $totalPages; ?>; 

//call the Infinite Scroll plugin via jQuery 

$container.infinitescroll({ 
    navSelector : '#page_nav', // selector for the paged navigation 
    nextSelector : '#page_nav a', // selector for the NEXT link (to page 2) 
    itemSelector : '.products',  // selector for all items you'll retrieve 
    loading: { 
     finishedMsg: 'No more products to load.', 
     img: '<?php bloginfo('template_directory') ?>/images/ajax-loader.gif', 
     msgText : 'Loading...' 

     } 
    }, 



    function(newElements) { 
     currentPage++;    
     if(currentPage == lastPage) { 
     jQuery(window).unbind('.infscr'); 
     return false; 
     } 

     // hide new items while they are loading 
     var $newElems = $(newElements).css({ opacity: 0 }); 
     // ensure that images load before adding to Isotope layout 
     $newElems.imagesLoaded(function() { 
     // show elems now they're ready 
     $newElems.animate({ opacity: 1 }); 
     $container('.insert', $newElems); 
     }); 
    } 
); 

}); 


//IMPLEMENTING THE INVIEW PLUGIN 

jQuery(document).on("inview", ".products", function(e) { 

    $("#container .products").each(function(e) { 
    var $this = $(this); 
    if(!$this.hasClass('loaded')) { 
     $this.addClass('loaded'); 
     $this.css('visibility','visible').hide().delay(1*e).fadeIn('medium'); 

    } 
    }); 

}); 
</script> 

Answer 1

신경 끄시 :

<?php 
$paged = isset($_REQUEST['page'])?$_REQUEST['page']: 1; 
$args = array('post_type' => 'wpsc-product', 'posts_per_page' => 24, 'post_status' =>  'publish', 'paged' => $paged, 'orderby' => 'title','order' => 'ASC'); 
if($search) { 
$productIds = $wpdb->get_col("select DISTINCT ID from {$wpdb->posts} where post_type =  'wpsc-product' AND post_title LIKE '%".$search."%' "); 
$args{'post__in'} = ($productIds)?$productIds:'no-data'; 
} 
?> 
<div id="container"> 
<?php  
$loop = query_posts($args); 
if(have_posts()) { 
while (have_posts()) : the_post(); 
//wpsc_the_product_permalink(). 
$wpsc_product_category = get_the_product_category($post->ID); 
$temporary = ''; 
$classname = ''; 
if($wpsc_product_category): 
foreach($wpsc_product_category as $value) { 
$ParentCategory = $tempParentStorage["{$value->parent}"]; 
$temporary .= "{$value->slug} "; 
$classname .= ($ParentCategory)? " $ParentCategory {$value->slug} ":" {$value->slug}"; 
} 
endif; 
?> 

<div style='display:none' class="products<?php echo $classname; ?>" data-symbol="<?php  the_title(); ?>" data-category="<?php echo $temporary; ?>" ><a href="<?php echo   wpsc_the_product_permalink(); ?>" > 
<p><?php echo get_the_post_thumbnail($post->ID, 'medium'); ?></p> 
<p class='product_title' ><?php the_title(); ?></p> 
</a>  
</div> 

<?php 
endwhile; 
?> 
</div><!--//container--> 


<?php if(!$search) { ?> 
<div id='page_nav' > 
<a href='?page=2'></a> 
</div> 
<?php } ?> 
<?php } 
else { 
echo '<div class="products>No Product found</div>'; 
} 
$totalPages = $wp_query->max_num_pages; 
wp_reset_query(); 
?> 

여기에 지금까지 자바 스크립트 코드입니다. 나는 그것을 알아. 내가 읽기 설정에서 "게시물 페이지"를 지정해야했습니다.