Question

有一个WordPress网站。在此项目中，博客文章和产品的输出是使用ajax实现的。这是此页面：

博客页面-[1]：https://tirador.anvi.team/blog/

产品页面-[2]：https://tirador.anvi.team/products/

如果在博客页面上单击“下载更多”按钮，则新文章将越来越多地显示，直到所有条目都结束为止。

但是在产品页面上，有不同的行为。如果单击下载更多按钮，则只需替换旧产品即可。

我尚未开发此站点，并且我对ajax的了解不足，无法解决此问题。我需要新产品以与博客页面相同的方式出现在产品页面上。

这里是指向回答记录输出的代码的链接。在我看来。

function more_post_ajax(){
    $pages = get_pages(array(
        'meta_key' => '_wp_page_template',
        'meta_value' => 'tpl-blog.php'
    ));
    foreach($pages as $page){
        $page_id = $page->ID;
    }
$offset = $ppp = get_field('all_blog_posts_count', $page_id);
$page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
 header("Content-Type: text/html");

$args = array(
    'suppress_filters' => true,
    'post_type' => 'post',
    'posts_per_page' => $ppp,
    'paged'    => $page,
);

$loop = new WP_Query($args);

$out = '';

if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();
    $out .= get_template_part('loop/latest-post-item');

    endwhile;
    endif;
    wp_reset_postdata();
    die($out);
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

加载产品Ajax：https://codeshare.io/5NBJrJ

 function load_products() {

    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
    $producer_id = (isset($_POST['producer_id'])) ? $_POST['producer_id'] : 0;
    $cats = ( isset( $_POST['categories'] ) ) ? $_POST['categories'] : false;
    $colors = ( isset( $_POST['product_colors'] ) ) ? $_POST['product_colors'] : false;
    $price_range = ( isset( $_POST['price_range'] ) ) ? $_POST['price_range'] : false;

    header("Content-Type: text/html");  

        $args = array(
            'suppress_filters' => true,
            'post_type' => 'products',
            'posts_per_page' => 6,
            'paged'    => $page,

        );


    $loop = new WP_Query($args);

    $out = '';

    if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();
         $out .= get_template_part( 'loop/product', 'grid' );

         endwhile;
         endif;
         wp_reset_postdata();
         die($out);
}
add_action('wp_ajax_nopriv_load_products', 'load_products');
add_action('wp_ajax_load_products', 'load_products');

这是空ajax.php文件：https://codeshare.io/21QXjB

我无法解决此问题，请帮助我找到问题。

Answer 1

在您的main.js文件中找到load_products_all_products_page()函数并在以下行更改：

$('.list-products').html($data);

使用以下内容：

$('.list-products').append($data);

如何修复在WordPress上显示的不正确的Ajax自定义帖子类型

1 个答案: