Thủ thuật wordpress

Hướng dẫn thêm nút dính để cập nhật sản phẩm trong WordPress

Đăng vào Tháng 10 15, 2024Tháng 10 27, 2024 bởi admin

admin

15/10/2024

7 Phút đọc

206 Lượt xem

Đánh giá

4.2/5 - (100 bình chọn)

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.

Nút dính để cập nhật sản phẩm trong WooCommerce được đặt cố định ở góc dưới bên phải màn hình quản trị, giúp người dùng dễ dàng lưu thay đổi sản phẩm nhanh chóng mà không cần cuộn trang nên đây sẽ là là bài Hướng dẫn thêm nút lưu sản phẩm WooCommerce — Thêm nút dính để cập nhật sản phẩm

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:

// 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');

// 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:

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');

function sweetalert2_submit_button() {

global $post_type;

if ( $post_type === 'product' ) {

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.

Cach Code Thong Bao Bang Sweet2 Wordpress Muathemewpgiare — Cách Code Thông Báo Bằng Sweet2 WordPress

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!

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Hướng dẫn cách Chặn Index Subpages Trong WordPress Để Tối Ưu SEO

Trong quá trình làm SEO cho website WordPress, việc để các subpages (trang con của phân trang) bị Google index có thể gây ra vấn...
Hướng dẫn tạo tài khoản Admin WordPress thông qua theme

Vì một lý do nào đó, bạn có thể bị mất quyền truy cập vào tài khoản Admin WordPress của mình. Nếu không am hiểu...
Sharecode Hướng Dẫn Tạo Shortcode Kiểm Tra Đơn Hàng Trong WordPress

Nếu bạn đang sử dụng WooCommerce và muốn khách hàng dễ dàng kiểm tra trạng thái đơn hàng của họ ngay trên website, hãy sử...
Hướng dẫn code chức năng xem đủ thời gian để hiển thị nội dung trong wordpress

Mục LụcTại sao nên sử dụng nút dính để cập nhật sản phẩm trong WordPress?Lợi ích của nút dính cập nhật:Cách thêm nút dính để...
Hướng Dẫn Tạo Chức Năng Gửi Link Tải Về Qua Email Trong WordPress

Trong bài viết này, chúng ta sẽ xây dựng một chức năng cho phép người dùng tải về một file hoặc tài liệu sau khi...
Loại bỏ Akismet CSS để tăng tốc độ load

Gần đây, Akismet đã âm thầm chèn một đoạn CSS trực tiếp vào mã HTML của WordPress nhằm hỗ trợ hiển thị widget thống kê...
Hướng Dẫn Bảo Mật Trang Quản Trị WordPress Bằng Popup Mã Bảo Mật

Trang quản trị WordPress (WP-Admin) là mục tiêu hàng đầu của các cuộc tấn công Brute Force, khiến website dễ bị xâm nhập. Để bảo...
Hướng dẫn làm menu đa cấp cho Flatsome

Hôm nay MUATHEMEGIAGIE sẽ Hướng dẫn làm menu đa cấp cho Flatsome, css cho menu có đa cấp trong flatsome dạng dọc: Thêm css sau...
Hướng dẫn chi tiết cách thêm nút Like và Share Facebook cho website WordPress

Việc tạo nút Like và Share Facebook cho WordPress là cách hiệu quả giúp tăng tương tác, cải thiện trải nghiệm người dùng và hỗ...
Hướng Dẫn Tạo Tính Năng “Sản Phẩm Đã Xem” Cho Flatsome & Tất Cả Các Theme WordPress

Mục LụcTại sao nên sử dụng nút dính để cập nhật sản phẩm trong WordPress?Lợi ích của nút dính cập nhật:Cách thêm nút dính để...
Sharecode cách code chống spam đơn hàng bằng OTP gmail vào WooCommerce

Bạn đã bao giờ gặp tình trạng đơn hàng ảo xuất hiện tràn lan trên WooCommerce chưa? Bạn đau đầu vì những đơn hàng spam...
Cách Ẩn Tab Downloads Trong My Account Của WooCommerce Một Cách Gọn Gàng

Mục LụcTại sao nên sử dụng nút dính để cập nhật sản phẩm trong WordPress?Lợi ích của nút dính cập nhật:Cách thêm nút dính để...
Share code Header top đơn giản

Share code Header top đơn giản dành cho các bạn mới nhé. Code header này để dùng hiển thị các thông tin như liên hệ,...
Cách chèn thêm sản phẩm vào trong bài viết wordpress giống levantoan

Mục LụcTại sao nên sử dụng nút dính để cập nhật sản phẩm trong WordPress?Lợi ích của nút dính cập nhật:Cách thêm nút dính để...
Sharecode cách Chuyển 0đ hoặc không điền thành chữ “Liên hệ”

Nếu bạn đang quản lý một cửa hàng trực tuyến với WooCommerce và muốn thay thế giá trị “0đ” bằng chữ “Liên hệ” cho những...
Thủ thuật wordpress – Code thêm nút Edit nhanh cho Admin trên Mobile WordPress

Nếu bạn là một quản trị viên của website WordPress và đang tìm kiếm cách code thêm nút Edit nhanh cho Admin trên Mobile WordPress...