[Thủ Thuật Flatsome] Tạo button Load More ajax trong theme flatsome

[Thủ Thuật Flatsome] Tạo button Load more - Xem Thêm bằng ajax trong theme Flatsome - Flatsome là template WordPress phổ biển hiện nay, dưới đây là hướng dẫn tạo button "Load More" - "Xem Thêm" bằng AJAX nhanh chóng để bạn có thể dễ làm được ...

Bước 1: Dùng UxBuilder tạo products

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

Image

Bước 2: Tạo tính năng Load More bằng AJAX 

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

2.1. Thêm JavaScript để tạo sự kiện gọi AJAX khi click button "Load More"

<?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ị
        $('.btn-loadmore').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           
}
?>

2.2. Thêm script PHP để xử lý Request từ JavaScript gửi lên

<?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: Tạo button "Load More" - Xem Thêm

Thêm đoạn html bên dưới để sử dụng tính năng "Load More" bằng Ajax

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