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

实际上，如果您想自己动手，我建议您关注this guide, cmmon click me! - ＆gt;它会比这里的任何重大回复更有帮助。这家伙通过你需要使用的所有ajax程序。你也可以解析他的一段代码并完成所有工作。 很快，您只需要ajax。更明确 - ＆gt;你可以在这个视频中看到

我将在此处粘贴指南的代码结果，绕过所有小程序以便更好地理解

首先，他创建了一个模板来输出看起来像这样的内容

<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创建的指南进行操作，因为更容易理解该过程并使其适合您的目的。希望现在足够了！

干杯。

Woocommerce自定义商店页面，带有infinte加载

1 个答案: