WooCommerce定制商店页面带有Infinte负载

Question

嗨，我目前正在创建一个woocommerce自定义商店页面模板。

为此，我在主题页面中创建了一个新模板，称为Custom-Shop＆amp;我创建了名为"我的商店"的新页面，并分配了自定义购物中心模板。

我有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种产品，再次为汽车加载其他产品。因此，它也不是适当的解决方案。

请帮助，解决此问题。

Answer 1

实际上，如果您想自己做，我只建议您遵循本指南，CMMON单击我！ ->这将比这里的任何巨大答复更有帮助。这个家伙陷入了所有Ajax所需的您需要使用的所有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创建的指南，因为它将更容易理解该过程并适合您的目的。希望现在就足够了！

欢呼。