Tạo nút loadmore ajax trên theme flatsome

Tạo nút xem thêm sản phẩm ngay tại trang chủ bằng ajax load, không cần load lại trang trên theme flatsome

Bước 1: Vào UxBuilder của page chọn product và thêm class: product-loadmore

Bước 2: Bạn thêm đoạn code bên dưới vào file functions.php của theme đang sử dụng.

 

<?php 
add_action( 'wp_footer','nmn_loadmore' );

function nmn_loadmore(){?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
	$(document).ready(function(){
		var offset = 4; // khái báo số lượng bài viết đã hiển thị
	    $('.next-xemthem').click(function(event) {
	    	$.ajax({ // Hàm ajax
	            type : "post", //Phương thức truyền post hoặc get
	            dataType : "html", //Dạng dữ liệu trả về xml, json, script, or html
	            async: false,
	            url : '<?php echo admin_url('admin-ajax.php');?>', // Nơi xử lý dữ liệu
	            data : {
	                action: "loadmore", //Tên action, dữ liệu gởi lên cho server
	                offset: offset, // gởi số lượng bài viết đã hiển thị cho server
	            },
	            beforeSend: function(){
	               
	            },
	            success: function(response) {
	                $('.product-loadmore').append(response);
	                offset = offset + 4 // tăng bài viết đã hiển thị
	            },
	            error: function( jqXHR, textStatus, errorThrown ){
	                //Làm gì đó khi có lỗi xảy ra
	                console.log( 'The following error occured: ' + textStatus, errorThrown );
	            }
	       });
	    });
		
		
		});
</script>


<?php		   
}
add_action('wp_ajax_loadmore', 'get_post_loadmore');
add_action('wp_ajax_nopriv_loadmore', 'get_post_loadmore');
function get_post_loadmore() {
    $offset = isset($_POST['offset']) ? (int)$_POST['offset'] : 0; // lấy dữ liệu phái client gởi
    $getposts = new WP_query(); $getposts->query('post_type=product&post_status=publish&showposts=4&offset='.$offset);  // post_type=post để chọn hiển thị vài viết, showpost=  số bài viết cần hiển thị
    global $wp_query; $wp_query->in_the_loop = true; 
    while ($getposts->have_posts()) : $getposts->the_post(); ?>
    	<div class="product-small col has-hover product type-product status-publish first instock has-post-thumbnail shipping-taxable product-type-simple">
    <div class="col-inner">
        <div class="badge-container absolute left top z-1"></div>
        <div class="product-small box">
            <div class="box-image">
                <div class="image-fade_in_back">
                    <a href="<?php echo get_the_permalink(); ?>">
                       <?php echo '<img src="'.get_the_post_thumbnail_url().'">'; ?>
                    </a>
                </div>
                <div class="image-tools is-small top right show-on-hover"></div>
                <div class="image-tools is-small hide-for-small bottom left show-on-hover"></div>
            </div>

            <div class="box-text box-text-products">
                <div class="title-wrapper">
                    <p class="name product-title woocommerce-loop-product__title" style="height: 40px;">
                        <a href="<?php echo get_the_permalink(); ?>"><?php echo get_the_title(); ?></a>
                    </p>
                </div>
                <div class="price-wrapper" style="height: 0px;"></div>
            </div>
        </div>
    </div>
</div>

    <?php endwhile; wp_reset_postdata();
	die(); 
}

 

Bước 3: Thêm nút xem thêm vào dưới bài viết

<a href=”javascript:void(0)” class=”next-xemthem”>Xem thêm</a>