为自定义Woocommerce商店页面加载更多按钮

时间:2017-03-14 19:28:22

标签: php ajax wordpress woocommerce

我为自定义商店页面创建了一个模板。我有加载更多 Ajax按钮以显示所有产品。我在template.php中的代码是:

 <div class="pageCAtWooct " id="content">
    <ul class="products">

        <?php

        $args = array( 'post_type' => 'product', 'posts_per_page' =>2, 'product_cat' =>$category_slug);
        $i=1;

        $loop = new WP_Query( $args );
        while ( $loop->have_posts() ) : $loop->the_post();
            global $product;

            <li class="product odd">
            <a class="aproduct" href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">

                <?php woocommerce_show_product_sale_flash( $post, $product ); ?>

                <?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="300px" height="300px" />'; ?>
                <div class="product-meta1">
                    <h3><?php the_title(); ?></h3>
                    <?php    do_action("woocommerce_before_add_to_cart_form"); ?>


                </div>

            </a>

            <div class="btnCart">
             <span class="price"><?php echo $product->get_price_html(); ?>

            </span>
                <?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
            </div>
            </li>

            <?php $i++; endwhile;wp_reset_query(); ?>

        <?php wp_reset_query(); global $wp_query;
        $max = $loop->max_num_pages;
        $paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1;
        $nextpage= get_permalink().'page/1';
        ?>
    </ul><!--/.products-->
    <input id="inputPagenumber"   value="<?php echo $paged ?>"  hidden>
    <input id="inputPagemax"   value="<?php echo $max ?>"  hidden>
    <input id="inputPagenext"   value="<?php echo $nextpage ?>" hidden>


  </div>

我的Ajax代码是:

jQuery(document).ready(function($) {

// The number of the next page to load (/page/x/).
var pageNum =parseInt($('#inputPagenumber').val()) ;

// The maximum number of pages the current query can return.
var max = $('#inputPagemax').val();

// The link of the next page of posts.
var nextLink =$('#inputPagenext').val();


/**
 * Replace the traditional navigation with our own,
 * but only if there is at least one page of new posts to load.
 */
if(pageNum <= max) {
    // Insert the "More Posts" link.
    $('#content')
        .append('<div class="test  pbd-alp-placeholder-'+ pageNum +'"></div>')
        .append('<p id="pbd-alp-load-posts"><a href="#">Load More Posts</a></p>');

    // Remove the traditional navigation.
    $('.navigation').remove();
}


/**
 * Load new posts when the link is clicked.
 */
$('#pbd-alp-load-posts a').click(function() {

    // Are there more posts to load?
    if(pageNum <= max) {

        // Show that we're working.
        $(this).text('Loading posts...');

        $('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post',
            function() {
                // Update page number and nextLink.
                pageNum++;
                nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);


                // Add a new placeholder, for when user clicks again.
                $('#pbd-alp-load-posts')
                    .before('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')

                // Update the button message.
                if(pageNum <= max) {
                    $('#pbd-alp-load-posts a').text('Load More Posts');
                } else {
                    $('#pbd-alp-load-posts a').text('No more posts to load.');
                }
            }
        );
    } else {
        $('#pbd-alp-load-posts a').append('.');
    }

    return false;
   });
   });

在function.php中:

function my_enqueue_assets() {

wp_enqueue_script( 'ajax-pagination',  get_stylesheet_directory_uri() . '/js/ajax-pagination.js', array( 'jquery' ), '1.0', true );
 }

  add_action('wp_enqueue_scripts','my_enqueue_assets');

但不显示我的产品。我是wordpress的新手。我非常谷歌搜索,但我无法找到我的问题。为什么我的Ajax查询无法成功?

0 个答案:

没有答案