Hướng dẫn thêm load more product cho flatsome

Sau đây là hướng dẫn tạo float more xem thêm sản phẩm cho theme flatsome

Xoá mặc định phân trang sản phẩm của flatsome

remove_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );

Thêm action add loadmore sản phẩm

add_action( 'woocommerce_after_shop_loop', 'yt_woocommerce_pagination', 10 );
function yt_woocommerce_pagination(){
    global $wp_query;
    $current_page = max(1, get_query_var('paged')); // Trang hiện tại
    $max_pages = $wp_query->max_num_pages; // Tổng số trang

    if ($current_page < $max_pages) : ?>
    <div class="load-more-wrap text-center">
    <!-- load more -->
    <button
        data-page="<?php echo $current_page; ?>" 
        data-max-pages="<?php echo $max_pages; ?>"
        data-query='<?php echo json_encode($wp_query->query); ?>'
        class="button primary load-more-products" 
        type="button">Xem thêm</button>
    </div>
    <?php endif;
}

Tạo mã javascript action khi nhấn vào load more

add_action('wp_footer', function(){
    if( is_tax('product_cat') || is_tax('product_tag') || is_shop() ){
        ?>
        <script type="text/javascript">
        // load more posts
        jQuery('body').on('click', '.shop-container .load-more-products', function(e){
            e.preventDefault();
            var button = jQuery(this);
            var currentPage = parseInt(button.data('page'));
            var maxPages = parseInt(button.data('max-pages'));
            var nextPage = currentPage + 1;
        
            jQuery.ajax({
                url: flatsomeVars.ajaxurl,
                type: 'POST',
                data: {
                    action: 'yt_load_more_products',
                    page: nextPage,
                    query: button.data('query'),
                },
                beforeSend: function() {
                    button.text('Loading...').prop('disabled', true);
                },
                success: function(response) {
                    if(response.success){
                        jQuery('.shop-container .products').append(response.data.posts);
                        button.data('page', nextPage);
                        // Ẩn nút nếu đã tải hết bài viết
                        if (nextPage >= maxPages) {
                            button.hide();
                        }
                    }
                },
                complete: function() {
                    button.text('Xem thêm').prop('disabled', false);
                }
            });
        });
        </script>
        <?php
    }
});

Thêm code php loadmore vào functions.php

function yt_load_more_products() {
    $page = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $query_vars = isset($_POST['query']) ? $_POST['query'] : array();

    // Tạo query mới dựa trên query hiện tại
    $args = array_merge($query_vars, array(
        'post_type' => 'product',
        'paged' => $page,
        'post_status' => 'publish'
    ));

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        ob_start();
        while ($query->have_posts()) {
            $query->the_post();
            do_action( 'woocommerce_shop_loop' );
            wc_get_template_part( 'content', 'product' );
        }
        $posts_html = ob_get_clean();
        wp_reset_postdata();
        wp_send_json_success(array('posts' => $posts_html));
        
    } else {
        wp_send_json_error();
    }
    wp_die();
}
add_action('wp_ajax_yt_load_more_products', 'yt_load_more_products');
add_action('wp_ajax_nopriv_yt_load_more_products', 'yt_load_more_products');

Trọn bộ code nút tải thêm sản phẩm

// for products

remove_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );

add_action( 'woocommerce_after_shop_loop', 'yt_woocommerce_pagination', 10 );
function yt_woocommerce_pagination(){
    global $wp_query;
    $current_page = max(1, get_query_var('paged')); // Trang hiện tại
    $max_pages = $wp_query->max_num_pages; // Tổng số trang

    if ($current_page < $max_pages) : ?>
    <div class="load-more-wrap text-center">
    <!-- load more -->
    <button
        data-page="<?php echo $current_page; ?>" 
        data-max-pages="<?php echo $max_pages; ?>"
        data-query='<?php echo json_encode($wp_query->query); ?>'
        class="button primary load-more-products" 
        type="button">Xem thêm</button>
    </div>
    <?php endif;
}


add_action('wp_footer', function(){
    if( is_tax('product_cat') || is_tax('product_tag') || is_shop() ){
        ?>
        <script type="text/javascript">
        // load more posts
        jQuery('body').on('click', '.shop-container .load-more-products', function(e){
            e.preventDefault();
            var button = jQuery(this);
            var currentPage = parseInt(button.data('page'));
            var maxPages = parseInt(button.data('max-pages'));
            var nextPage = currentPage + 1;
        
            jQuery.ajax({
                url: flatsomeVars.ajaxurl,
                type: 'POST',
                data: {
                    action: 'yt_load_more_products',
                    page: nextPage,
                    query: button.data('query'),
                },
                beforeSend: function() {
                    button.text('Loading...').prop('disabled', true);
                },
                success: function(response) {
                    if(response.success){
                        jQuery('.shop-container .products').append(response.data.posts);
                        button.data('page', nextPage);
                        // Ẩn nút nếu đã tải hết bài viết
                        if (nextPage >= maxPages) {
                            button.hide();
                        }
                    }
                },
                complete: function() {
                    button.text('Xem thêm').prop('disabled', false);
                }
            });
        });
        </script>
        <?php
    }
});

function yt_load_more_products() {
    $page = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $query_vars = isset($_POST['query']) ? $_POST['query'] : array();

    // Tạo query mới dựa trên query hiện tại
    $args = array_merge($query_vars, array(
        'post_type' => 'product',
        'paged' => $page,
        'post_status' => 'publish'
    ));

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        ob_start();
        while ($query->have_posts()) {
            $query->the_post();
            do_action( 'woocommerce_shop_loop' );
            wc_get_template_part( 'content', 'product' );
        }
        $posts_html = ob_get_clean();
        wp_reset_postdata();
        wp_send_json_success(array('posts' => $posts_html));
        
    } else {
        wp_send_json_error();
    }
    wp_die();
}
add_action('wp_ajax_yt_load_more_products', 'yt_load_more_products');
add_action('wp_ajax_nopriv_yt_load_more_products', 'yt_load_more_products');