Tại sao nên sử dụng nút dính để cập nhật sản phẩm trong WordPress?
Trong quá trình quản lý sản phẩm trên WordPress, việc cập nhật nội dung có thể trở nên phức tạp khi phải cuộn trang để tìm nút lưu. Giải pháp tối ưu là thêm một nút dính, luôn hiển thị ở góc màn hình, giúp bạn nhanh chóng lưu thay đổi. Ngoài ra, để tăng tính trải nghiệm người dùng, chúng ta có thể tích hợp thêm SweetAlert2, một thư viện thông báo pop-up hiện đại và trực quan.

Lợi ích của nút dính cập nhật:
- Giảm thiểu thời gian tìm kiếm nút cập nhật.
- Cải thiện trải nghiệm người dùng quản trị.
- Tránh việc mất dữ liệu khi quên lưu.
Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm nút dính để cập nhật sản phẩm trong WordPress cùng với pop-up thông báo xác nhận từ SweetAlert2.
Xem thêm:Hướng Dẫn Tạo Popup SweetAlert2 Yêu Cầu Đăng Nhập Trong WordPress
Cách thêm nút dính để cập nhật sản phẩm trong WordPress
Bước 1: Thêm thư viện SweetAlert2 vào trang admin
SweetAlert2 là một thư viện JS giúp bạn tạo các thông báo pop-up thân thiện với người dùng. Để tích hợp thư viện này vào trang quản trị sản phẩm của WordPress, bạn cần thêm đoạn mã sau:
1 2 3 4 5 6 7 8 9 | // Thêm SweetAlert2 vào trang admin function add_sweetalert2_to_admin() { global $post_type; if ( $post_type === 'product' ) { // Thêm script SweetAlert2 từ CDN echo '<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>'; } } add_action('admin_enqueue_scripts', 'add_sweetalert2_to_admin'); |
Mã này đảm bảo rằng SweetAlert2 sẽ chỉ được tải khi bạn chỉnh sửa sản phẩm, tránh làm chậm trang quản trị khác.
Xem thêm: Hướng Dẫn Code Plugin WordPress Dễ Dàng
Bước 2: Tạo nút dính để cập nhật sản phẩm
Sau khi đã thêm thư viện SweetAlert2, chúng ta sẽ tạo một nút dính cố định ở góc dưới bên phải của màn hình:
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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | function sweetalert2_submit_button() { global $post_type; if ( $post_type === 'product' ) { ?> <script type="text/javascript"> jQuery(document).ready(function($) { // Tạo nút submit mới var submitButton = $('<input type="button" id="publish-sticky" class="button button-primary button-large" value="Cập nhật">'); // Thêm nút vào body $('body').append(submitButton); // CSS để cố định nút ở dưới bên phải màn hình $('#publish-sticky').css({ 'position': 'fixed', 'bottom': '20px', 'right': '20px', 'z-index': '9999' }); // Khi click vào nút mới, hiển thị SweetAlert2 trước khi lưu $('#publish-sticky').on('click', function(e) { e.preventDefault(); Swal.fire({ title: 'Bạn có chắc muốn cập nhật sản phẩm?', text: "Hành động này sẽ lưu lại thay đổi!", icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Có, cập nhật ngay!', cancelButtonText: 'Hủy bỏ' }).then((result) => { if (result.isConfirmed) { // Thông báo tiến trình lưu Swal.fire({ title: 'Đang lưu...', text: 'Vui lòng đợi trong giây lát.', timerProgressBar: true, didOpen: () => { Swal.showLoading() }, allowOutsideClick: false }); // Kích hoạt submit nút lưu chính setTimeout(function() { $('#publish').click(); }, 1000); // Đợi 1 giây để hiển thị thông báo trước khi submit } }); }); }); </script> <?php } } add_action('admin_footer', 'sweetalert2_submit_button'); |
Giải thích mã:
- Tạo nút cập nhật: Mã này sẽ tạo một nút mới với dòng chữ “Cập nhật” và gắn nó ở góc dưới bên phải của màn hình.
- Thêm sự kiện click: Khi người dùng nhấp vào nút, một thông báo từ SweetAlert2 sẽ hiện ra, hỏi xem họ có chắc chắn muốn lưu thay đổi không.
- Hiển thị quá trình lưu: Sau khi người dùng xác nhận, hệ thống sẽ hiển thị thông báo “Đang lưu…” trước khi thực sự gửi yêu cầu cập nhật sản phẩm.

Xem thêm: Trang chủ SweetAlert2
Tối ưu trải nghiệm quản trị sản phẩm với nút dính và SweetAlert2
Khi thực hiện xong, bạn sẽ có một nút dính hiện đại và tối ưu cho việc cập nhật sản phẩm. Nút này không chỉ giúp tiết kiệm thời gian mà còn cải thiện sự tiện lợi khi quản lý hàng loạt sản phẩm trong WooCommerce.
Nếu bạn đang tìm kiếm một cách cải thiện giao diện quản trị WordPress, việc tích hợp nút dính cùng thông báo xác nhận là lựa chọn tuyệt vời. Đặc biệt với SweetAlert2, giao diện quản trị của bạn sẽ trở nên chuyên nghiệp và trực quan hơn.
Việc thêm nút dính để cập nhật sản phẩm và tích hợp SweetAlert2 vào WordPress không chỉ tăng cường trải nghiệm người dùng mà còn giúp giảm rủi ro do quên lưu thay đổi. Hy vọng qua bài viết này, bạn đã có cái nhìn tổng quan về cách thực hiện tính năng này. Nếu gặp khó khăn hoặc có câu hỏi, đừng ngần ngại để lại bình luận!
- Nên chọn thiết kế website ở K-TECH và NINA không? Lý do tại vì sao?
- Code chức năng tự động thêm bình luận cho bài viết
- SEO là gì? Tổng hợp tất cả kiến thức về Search Engine Optimize
- [Thủ Thuật WordPress] Code thu gọn bài viết trong WordPress cực đẹp, đơn giản
- Hướng dẫn cách làm khung khuyến mãi giống muathemewp cực đẹp