嗨，目前我正在创建一个woocommerce自定义商店页面模板。
为此，我在我的主题页面中创建了一个名为custom-shop的新模板，我创建了一个名为我的商店的新页面并分配了自定义商店模板。
我有3个主要类别叫汽车，公共汽车，船。现在，我将显示每个类别及其描述和产品详细信息
所以我在cutom-shop模板中编写以下代码（custom-shop.php）
custom-shop.php
/*
Template name: custom-shop
*/
BLOCKS OF CODE
<div class="category-block">
<h2>Car</h2>
<p class="description">Car Description</p>
<?php echo do_shortcode('[products limit="40" columns="4" category="car"]'); ?>
</div>
<div class="category-block">
<h2>Bus</h2>
<p class="description">Bus Description</p>
<?php echo do_shortcode('[products limit="40" columns="4" category="bus"]'); ?>
</div>
<div class="category-block">
<h2>Boat</h2>
<p class="description">Boat Description</p>
<?php echo do_shortcode('[products limit="40" columns="4" category="boat"]'); ?>
</div>
这里一切都很好。但问题是页面加载时间很长，因为每个产品都加载在一起。我该如何解决这个问题，如何实现无限负载？
我需要的是首先展示汽车，它是4个产品，然后用户向下滚动显示汽车中的其他产品。汽车产品完成后显示总线，它是4个产品，像这样
我试过的是
搜索后，我发现了一个插件https://wordpress.org/plugins/ajax-load-more/，我帮助解决一些问题，我使用了这个插件代码
<div class="category-block">
<h2>Car</h2>
<p class="description">Car Description</p>
<?php do_shortcode('[ajax_load_more post_type="product" columns="4" css_classes="products" posts_per_page="4" transition="fade" taxonomy="product_cat" taxonomy_terms="car" taxonomy_operator="IN" button_label=""]'); ?>
</div>
<div class="category-block">
<h2>Bus</h2>
<p class="description">Bus Description</p>
<?php do_shortcode('[ajax_load_more post_type="product" columns="4" css_classes="products" posts_per_page="4" transition="fade" taxonomy="product_cat" taxonomy_terms="car" taxonomy_operator="IN" button_label=""]'); ?>
</div>
<div class="category-block">
<h2>Car</h2>
<p class="description">Boat Description</p>
<?php do_shortcode('[ajax_load_more post_type="product" columns="4" css_classes="products" posts_per_page="4" transition="fade" taxonomy="product_cat" taxonomy_terms="car" taxonomy_operator="IN" button_label=""]'); ?>
</div>
但问题在于，当我向下滚动时，它将首先显示汽车，它是4个产品，然后是公共汽车，它的4个产品再次装载其他产品用于汽车。所以这也不是正确的解决方案。
请帮忙，解决这个问题。
实际上，如果你想自己做，我会建议你关注this guide, cmmon click me! - >这将比这里的任何重大回复更有帮助。这家伙通过你需要使用的所有ajax程序。你也可以解析他的一段代码并完成所有工作。不久，你只需要ajax。更明确 - >你可以在这个视频中看到
我将在此处粘贴指南的代码结果，绕过所有小程序以便更好地理解
首先，他创建了一个模板来输出看起来像这样的内容
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header text-center">
<?php the_title( '<h1 class="entry-title"><a href="'. esc_url( get_permalink() ) .'" rel="bookmark">', '</a></h1>'); ?>
<div class="entry-meta">
<?php echo sunset_posted_meta(); ?>
</div>
</header>
<div class="entry-content">
<?php if( sunset_get_attachment() ): ?>
<a class="standard-featured-link" href="<?php the_permalink(); ?>">
<div class="standard-featured background-image" style="background-image: url(<?php echo sunset_get_attachment(); ?>);"></div>
</a>
<?php endif; ?>
<div class="entry-excerpt">
<?php the_excerpt(); ?>
</div>
<div class="button-container text-center">
<a href="<?php the_permalink(); ?>" class="btn btn-sunset"><?php _e( 'Read More' ); ?></a>
</div>
</div><!-- .entry-content -->
<footer class="entry-footer">
<?php echo sunset_posted_footer(); ?>
</footer>
</article>
下一步是在wp中验证ajax函数
add_action( 'wp_ajax_nopriv_sunset_load_more', 'sunset_load_more' );
add_action( 'wp_ajax_sunset_load_more', 'sunset_load_more' );
function sunset_load_more() {
$paged = $_POST["page"]+1;
$prev = $_POST["prev"];
$archive = $_POST["archive"];
if( $prev == 1 && $_POST["page"] != 1 ){
$paged = $_POST["page"]-1;
}
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'paged' => $paged
);
if( $archive != '0' ){
$archVal = explode( '/', $archive );
$type = ( $archVal[1] == "category" ? "category_name" : $archVal[1] );
$args[ $type ] = $archVal[2];
$page_trail = '/' . $archVal[1] . '/' . $archVal[2] . '/';
} else {
$page_trail = '/';
}
$query = new WP_Query( $args );
if( $query->have_posts() ):
echo '<div class="page-limit" data-page="' . $page_trail . 'page/' . $paged . '">';
while( $query->have_posts() ): $query->the_post();
get_template_part( 'template-parts/content', get_post_format() );
endwhile;
echo '</div>';
else:
echo 0;
endif;
wp_reset_postdata();
die();
}
function sunset_check_paged( $num = null ){
$output = '';
if( is_paged() ){ $output = 'page/' . get_query_var( 'paged' ); }
if( $num == 1 ){
$paged = ( get_query_var( 'paged' ) == 0 ? 1 : get_query_var( 'paged' ) );
return $paged;
} else {
return $output;
}
}
最后一步将是AJAX函数本身。
/* Ajax functions */
$(document).on('click','.sunset-load-more:not(.loading)', function(){
var that = $(this);
var page = $(this).data('page');
var newPage = page+1;
var ajaxurl = that.data('url');
var prev = that.data('prev');
var archive = that.data('archive');
if( typeof prev === 'undefined' ){
prev = 0;
}
if( typeof archive === 'undefined' ){
archive = 0;
}
that.addClass('loading').find('.text').slideUp(320);
that.find('.sunset-icon').addClass('spin');
$.ajax({
url : ajaxurl,
type : 'post',
data : {
page : page,
prev : prev,
archive : archive,
action: 'sunset_load_more'
},
error : function( response ){
console.log(response);
},
success : function( response ){
if( response == 0 ){
$('.sunset-posts-container').append( '<div class="text-center"><h3>You reached the end of the line!</h3><p>No more posts to load.</p></div>' );
that.slideUp(320);
} else {
setTimeout(function(){
if( prev == 1 ){
$('.sunset-posts-container').prepend( response );
newPage = page-1;
} else {
$('.sunset-posts-container').append( response );
}
if( newPage == 1 ){
that.slideUp(320);
} else {
that.data('page', newPage);
that.removeClass('loading').find('.text').slideDown(320);
that.find('.sunset-icon').removeClass('spin');
}
revealPosts();
}, 1000);
}
}
});
});
/* scroll function */
$(window).scroll( function(){
var scroll = $(window).scrollTop();
if( Math.abs( scroll - last_scroll ) > $(window).height()*0.1 ) {
last_scroll = scroll;
$('.page-limit').each(function( index ){
if( isVisible( $(this) ) ){
history.replaceState( null, null, $(this).attr("data-page") );
return(false);
}
});
}
});
/* helper functions */
function revealPosts(){
var posts = $('article:not(.reveal)');
var i = 0;
setInterval(function(){
if( i >= posts.length ) return false;
var el = posts[i];
$(el).addClass('reveal').find('.sunset-carousel-thumb').carousel();
i++
}, 200);
}
function isVisible( element ){
var scroll_pos = $(window).scrollTop();
var window_height = $(window).height();
var el_top = $(element).offset().top;
var el_height = $(element).height();
var el_bottom = el_top + el_height;
return ( ( el_bottom - el_height*0.25 > scroll_pos ) && ( el_top < ( scroll_pos+0.5*window_height ) ) );
}
});
我建议你按照alecadd创建的指南，因为它会更容易理解这个过程并适合你的目的。希望现在就够了！
干杯。