MỤC LỤC BÀI VIẾT
[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 – Tạo button Load More ajax
Vào UxBuilder của page chọn product và thêm class: product-loadmore
![[Thủ Thuật Flatsome] Tạo button Load More ajax trong theme flatsome](https://blog.az9s.com/wp-content/uploads/2022/08/Tao-nut-loadmore-ajax-tren-theme-flatsome.jpg "[Thủ Thuật Flatsome] Tạo button Load More ajax trong theme flatsome")
Bước 2: Tạo tính năng Load More 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”
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | [php]<?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 } ?>[/php] |
2.2. Thêm script PHP để xử lý Request từ JavaScript gửi lên
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | [php]<?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(); }[/php] |
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
1 | [php]<a href=”javascript:void(0)” class=”btn-loadmore”>Xem thêm</a>[/php] |
