WooCommerce： “加载更多相关产品 ”Ajax 按钮 @ 单个产品页面
众所周知，WooCommerce 单个产品页面会显示一定数量的相关产品（通常为 4 个）。但是，尽管您可以通过代码自定义相关产品的数量，却没有任何设置允许您用 “载入更多 ”按钮来代替。
因此，我的目标是在不重新加载页面的情况下尽可能多地显示用户想要的相关产品，这样他们就能找到更多潜在的匹配产品，增加下订单的机会。
我必须说，这花了我一上午的时间，而且还没有完成。有两个小问题：（1）一旦没有更多相关产品，“加载更多 ”按钮就不会隐藏；（2）一旦当前产品的相关产品显示完毕（因此，在点击加载更多按钮 1 次或更多次后），Ajax 会一直显示最后一个相关产品，而不是一个都不显示。如果您希望提供帮助，请随时提出！
说完这些，让我们来看看如何实现 Ajax “加载更多 ”功能。您还可以在不同的项目中重复使用这个功能（例如 “加载更多博文”），因为一旦您了解了 Ajax 的工作原理，您就可以在不刷新页面的情况下做很多很酷的事情。
PHP 代码段： “加载更多 ”Ajax 按钮 @ WooCommerce 单个产品页面相关产品
我试着对代码段的每一部分进行注释，这样你就能学到一两点关于 Ajax 的知识。
注意：您可能还需要使用一些代码，以便在加载时始终显示同一组相关产品，否则 “加载更多 ”功能可能会在点击时显示完全错误的结果。
add_filter( 'woocommerce_product_loop_end', 'bbloomer_related_products_load_more_button' );
function bbloomer_related_products_load_more_button( $html ) {
// ONLY TARGET THE RELATED PRODUCTS LOOP
if ( wc_get_loop_prop( 'name' ) === 'related' ) {
// SHOW BUTTON
$html .= '<a class="button loadmore">Load More Related Products</a>';
// TRIGGER AJAX 'loadmore' ACTION ON CLICK
// AND APPEND MORE RELATED PRODUCTS
wc_enqueue_js( "
var page = 2;
var ajaxurl = '" . admin_url( 'admin-ajax.php' ) . "';
$('body').on('click', '.loadmore', function(evt) {
var data = {
'action': 'loadmore',
'page': page,
'product_id': " . get_queried_object_id() . ",
};
$.post(ajaxurl, data, function(response) {
if(response != '') {
$('.related .products ').append(response);
page++;
}
});
});
" );
}
return $html;
}
// DEFINE WHAT HAPPENS WHEN 'loadmore' ACTION TRIGGERS
add_action( 'wp_ajax_nopriv_loadmore', 'bbloomer_related_products_load_more_event' );
add_action( 'wp_ajax_loadmore', 'bbloomer_related_products_load_more_event' );
function bbloomer_related_products_load_more_event() {
// GET PARAMETERS FROM POSTED DATA
$paged = $_POST['page'];
$product_id = $_POST['product_id'];
// DEFINE USEFUL QUERY ARGS:
// 1. CURRENT PRODUCT
$product = wc_get_product( $product_id );
// 2. PAGINATION AND SORTING
$args = array(
'posts_per_page' => 3,
'paged' => $paged,
'orderby' => 'id',
'order' => 'desc',
);
// 3. IDS TO EXCLUDE: ON LOAD MORE, WE DONT WANT THE FIRST 3 RELATED PRODUCTS AGAIN
// SO WE APPLY AN OFFSET TO GET THE "NEXT 3" PRODUCTS
$exclude = array_slice( array_map( 'absint', array_values( wc_get_related_products( $product->get_id(), -1 ) ) ), 0 , $args['posts_per_page'] * ( $paged - 1 ) );
// LETS CALCULATE AND SORT RELATED PRODUCTS
$related_products = array_filter( array_map( 'wc_get_product', wc_get_related_products( $product->get_id(), $args['posts_per_page'], $exclude + $product->get_upsell_ids() ) ), 'wc_products_array_filter_visible' );
$related_products = wc_products_array_orderby( $related_products, $args['orderby'], $args['order'] );
// LETS DISPLAY THEM
foreach ( $related_products as $related_product ) {
$post_object = get_post( $related_product->get_id() );
setup_postdata( $GLOBALS['post'] =& $post_object );
wc_get_template_part( 'content', 'product' );
}
wp_die();
}
