Thủ thuật wordpress, Woocommerce

Hướng Dẫn Tùy Chỉnh Form Đăng Nhập và Đăng Ký WooCommerce Với SweetAlert2 (Không Cần Plugin)

Đăng vào Tháng chín 27, 2024Tháng mười 3, 2024 bởi admin

admin

27/09/2024

7 Phút đọc

150 Lượt xem

Đánh giá

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

Giới Thiệu

Trong bài viết này, chúng ta sẽ học cách loại bỏ form đăng nhập và đăng ký mặc định của WooCommerce, sau đó thay thế bằng form đăng nhập tùy chỉnh sử dụng SweetAlert2. Việc tùy chỉnh này không cần sử dụng plugin mà chỉ dựa vào code, giúp tối ưu hóa hiệu suất và tính linh hoạt cho website. Các bước hướng dẫn dưới đây sẽ chi tiết và dễ hiểu, phù hợp với cả những người không chuyên về lập trình.

Form Đăng Nhập và Đăng Ký WooCommerce Với SweetAlert2

Yêu Cầu Trước Khi Thực Hiện

Website của bạn đã cài đặt và kích hoạt WooCommerce.
Có kiến thức cơ bản về PHP, WordPress, và jQuery để có thể chỉnh sửa code theo nhu cầu.

Hướng Dẫn Chi Tiết

1. Bỏ Form Đăng Nhập Và Đăng Ký Mặc Định Của WooCommerce

Để loại bỏ form đăng nhập và đăng ký mặc định của WooCommerce, chèn đoạn mã dưới đây vào file functions.php của theme đang sử dụng:

// Bỏ form đăng nhập và đăng ký mặc định của WooCommerce
function bo_dang_nhap_dang_ky_mac_dinh() {
    remove_action('woocommerce_before_customer_login_form', 'woocommerce_output_all_notices');
    remove_action('woocommerce_account_content', 'woocommerce_account_content');
}
add_action('init', 'bo_dang_nhap_dang_ky_mac_dinh');

// Bỏ form đăng nhập và đăng ký mặc định của WooCommerce

function bo_dang_nhap_dang_ky_mac_dinh() {

remove_action('woocommerce_before_customer_login_form', 'woocommerce_output_all_notices');

remove_action('woocommerce_account_content', 'woocommerce_account_content');

}

add_action('init', 'bo_dang_nhap_dang_ky_mac_dinh');

2. Thêm SweetAlert2 Và Script Tùy Chỉnh

Sau khi đã loại bỏ form mặc định, chúng ta sẽ thêm thư viện SweetAlert2 và script tùy chỉnh để tạo popup đăng nhập và đăng ký. Chèn đoạn mã dưới đây vào functions.php:

// Thêm SweetAlert2 và script tùy chỉnh
function them_script_sweetalert2() {
    wp_enqueue_script('sweetalert2', 'https://cdn.jsdelivr.net/npm/sweetalert2@11', array('jquery'), null, true);
    wp_enqueue_script('tuy_chinh_auth', get_template_directory_uri() . '/js/tuy_chinh_auth.js', array('jquery', 'sweetalert2'), null, true);
    wp_localize_script('tuy_chinh_auth', 'auth_tuy_chinh', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'them_script_sweetalert2');

// Thêm SweetAlert2 và script tùy chỉnh

function them_script_sweetalert2() {

wp_enqueue_script('sweetalert2', 'https://cdn.jsdelivr.net/npm/sweetalert2@11', array('jquery'), null, true);

wp_enqueue_script('tuy_chinh_auth', get_template_directory_uri() . '/js/tuy_chinh_auth.js', array('jquery', 'sweetalert2'), null, true);

wp_localize_script('tuy_chinh_auth', 'auth_tuy_chinh', array('ajax_url' => admin_url('admin-ajax.php')));

}

add_action('wp_enqueue_scripts', 'them_script_sweetalert2');

3. Tạo Popup Đăng Nhập và Đăng Ký Với SweetAlert2

Form Đăng Ký và Đăng Ký WooCommerce Với SweetAlert2

Phần tiếp theo là tạo các popup đăng nhập và đăng ký sử dụng SweetAlert2 bằng jQuery. Đoạn mã này cũng cần thêm vào file functions.php:

// Script tùy chỉnh cho đăng nhập và đăng ký
function tuy_chinh_script_js() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // Hiển thị popup đăng nhập SweetAlert2
            $('.nut-dang-nhap-sweet').on('click', function() {
                Swal.fire({
                    title: 'Đăng nhập',
                    html: 
                        '<div style="display: flex; flex-direction: column; gap: 10px; align-items: center;">' +
                            '<input type="text" id="ten-dang-nhap" class="swal2-input" placeholder="Tên đăng nhập">' +
                            '<input type="password" id="mat-khau" class="swal2-input" placeholder="Mật khẩu">' +
                        '</div>',
                    showCancelButton: true,
                    confirmButtonText: 'Đăng nhập',
                    cancelButtonText: 'Đăng ký',
                    preConfirm: () => {
                        const username = Swal.getPopup().querySelector('#ten-dang-nhap').value.trim();
                        const password = Swal.getPopup().querySelector('#mat-khau').value.trim();

                        if (!username || !password) {
                            Swal.showValidationMessage('Vui lòng nhập tên đăng nhập và mật khẩu.');
                        } else if (!validatePassword(password)) {
                            Swal.showValidationMessage('Mật khẩu phải có ít nhất 10 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt.');
                        }
                        
                        return { username, password };
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.post(auth_tuy_chinh.ajax_url, {
                            action: 'tuy_chinh_dang_nhap',
                            username: result.value.username,
                            password: result.value.password
                        }, function(response) {
                            if (response.success) {
                                Swal.fire('Thành công', 'Đăng nhập thành công!', 'success').then(() => location.reload());
                            } else {
                                Swal.fire('Lỗi', response.data, 'error');
                            }
                        });
                    } else if (result.dismiss === Swal.DismissReason.cancel) {
                        hienThiPopupDangKy();
                    }
                });
            });

            // Hàm hiển thị popup đăng ký
            function hienThiPopupDangKy() {
                Swal.fire({
                    title: 'Đăng ký',
                    html: 
                        '<div style="display: flex; flex-direction: column; gap: 10px; align-items: center;">' +
                            '<input type="text" id="ho-ten" class="swal2-input" placeholder="Họ tên">' +
                            '<input type="text" id="ten-dang-ky" class="swal2-input" placeholder="Tên đăng nhập">' +
                            '<input type="text" id="so-dien-thoai" class="swal2-input" placeholder="Số điện thoại">' +
                            '<input type="password" id="mat-khau-dang-ky" class="swal2-input" placeholder="Mật khẩu">' +
                            '<input type="password" id="nhap-lai-mat-khau" class="swal2-input" placeholder="Nhập lại mật khẩu">' +
                            '<input type="email" id="email" class="swal2-input" placeholder="Email">' +
                        '</div>',
                    showCancelButton: true,
                    confirmButtonText: 'Đăng ký',
                    preConfirm: () => {
                        const name = Swal.getPopup().querySelector('#ho-ten').value.trim();
                        const username = Swal.getPopup().querySelector('#ten-dang-ky').value.trim();
                        const phone = Swal.getPopup().querySelector('#so-dien-thoai').value.trim();
                        const password = Swal.getPopup().querySelector('#mat-khau-dang-ky').value.trim();
                        const passwordConfirm = Swal.getPopup().querySelector('#nhap-lai-mat-khau').value.trim();
                        const email = Swal.getPopup().querySelector('#email').value.trim();

                        if (!name || !username || !phone || !password || !passwordConfirm || !email) {
                            Swal.showValidationMessage('Vui lòng nhập đầy đủ thông tin.');
                        } else if (!validatePhone(phone)) {
                            Swal.showValidationMessage('Số điện thoại không hợp lệ.');
                        } else if (!validatePassword(password)) {
                            Swal.showValidationMessage('Mật khẩu phải có ít nhất 10 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt.');
                        } else if (password !== passwordConfirm) {
                            Swal.showValidationMessage('Mật khẩu không khớp.');
                        } else if (!validateEmail(email)) {
                            Swal.showValidationMessage('Email không hợp lệ.');
                        }

                        return { name, username, phone, password, email };
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.post(auth_tuy_chinh.ajax_url, {
                            action: 'tuy_chinh_dang_ky',
                            name: result.value.name,
                            username: result.value.username,
                            phone: result.value.phone,
                            password: result.value.password,
                            email: result.value.email
                        }, function(response) {
                            if (response.success) {
                                Swal.fire('Thành công', 'Đăng ký thành công!', 'success').then(() => location.reload());
                            } else {
                                Swal.fire('Lỗi', response.data, 'error');
                            }
                        });
                    }
                });
            }

            // Hàm kiểm tra định dạng email
            function validateEmail(email) {
                const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return re.test(email);
            }

            // Hàm kiểm tra mật khẩu
            function validatePassword(password) {
                const re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{10,}$/;
                return re.test(password);
            }

            // Hàm kiểm tra số điện thoại Việt Nam
            function validatePhone(phone) {
                const re = /^(09|08|07|05|03)[0-9]{8}$/;
                return re.test(phone);
            }

            // Kiểm tra người dùng đã đăng nhập hay chưa
            $.post(auth_tuy_chinh.ajax_url, { action: 'kiem_tra_dang_nhap' }, function(response) {
                if (response.logged_in) {
                    $('li.account-item.has-icon').show();
                    $('.nut-dang-nhap-sweet').hide();
                } else {
                    $('li.account-item.has-icon').hide();
                    $('.nut-dang-nhap-sweet').show();
                }
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'tuy_chinh_script_js');

// Xử lý đăng nhập bằng AJAX
function tuy_chinh_dang_nhap() {
    $username = sanitize_text_field($_POST['username']);
    $password = $_POST['password'];

    if (empty($username) || empty($password)) {
        wp_send_json_error('Vui lòng nhập đầy đủ thông tin.');
    }

    $user = wp_authenticate($username, $password);
    if (is_wp_error($user)) {
        wp_send_json_error('Tên đăng nhập hoặc mật khẩu không đúng.');
    } else {
        wp_set_current_user($user->ID);
        wp_set_auth_cookie($user->ID);
        wp_send_json_success();
    }
}
add_action('wp_ajax_tuy_chinh_dang_nhap', 'tuy_chinh_dang_nhap');
add_action('wp_ajax_nopriv_tuy_chinh_dang_nhap', 'tuy_chinh_dang_nhap');

// Xử lý đăng ký bằng AJAX
function tuy_chinh_dang_ky() {
    $username = sanitize_user($_POST['username']);
    $password = $_POST['password'];
    $email = sanitize_email($_POST['email']);
    $name = sanitize_text_field($_POST['name']);
    $phone = sanitize_text_field($_POST['phone']);

    if (empty($username) || empty($password) || empty($email) || empty($name) || empty($phone)) {
        wp_send_json_error('Vui lòng nhập đầy đủ thông tin.');
    } elseif (!preg_match('/^(09|08|07|05|03)[0-9]{8}$/', $phone)) {
        wp_send_json_error('Số điện thoại không hợp lệ.');
    } elseif (!preg_match('/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{10,}$/', $password)) {
        wp_send_json_error('Mật khẩu phải có ít nhất 10 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt.');
    } elseif (!is_email($email)) {
        wp_send_json_error('Email không hợp lệ.');
    } elseif (username_exists($username) || email_exists($email)) {
        wp_send_json_error('Tên đăng nhập hoặc Email đã tồn tại.');
    } else {
        $user_id = wp_create_user($username, $password, $email);

        if (is_wp_error($user_id)) {
            wp_send_json_error($user_id->get_error_message());
        } else {
            // Cập nhật tên hiển thị và số điện thoại
            wp_update_user(array(
                'ID' => $user_id,
                'display_name' => $name,
            ));
            
            // Gán vai trò là 'customer' cho người dùng mới (WooCommerce)
            $user = new WP_User($user_id);
            $user->set_role('customer');

            // Lưu số điện thoại vào metadata của người dùng
            update_user_meta($user_id, 'phone', $phone);

            wp_send_json_success('Đăng ký thành công!');
        }
    }
}
add_action('wp_ajax_tuy_chinh_dang_ky', 'tuy_chinh_dang_ky');
add_action('wp_ajax_nopriv_tuy_chinh_dang_ky', 'tuy_chinh_dang_ky');

// Kiểm tra người dùng đã đăng nhập hay chưa
function kiem_tra_dang_nhap() {
    wp_send_json(array('logged_in' => is_user_logged_in()));
}
add_action('wp_ajax_kiem_tra_dang_nhap', 'kiem_tra_dang_nhap');
add_action('wp_ajax_nopriv_kiem_tra_dang_nhap', 'kiem_tra_dang_nhap');

// Shortcode hiển thị nút đăng nhập bằng SweetAlert2
function nut_dang_nhap_sweetalert2() {
    if (!is_user_logged_in()) {
        return '<button class="nut-dang-nhap-sweet">Đăng nhập</button>';
    }
}
add_shortcode('dang_nhap_sweet', 'nut_dang_nhap_sweetalert2');

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

// Script tùy chỉnh cho đăng nhập và đăng ký

function tuy_chinh_script_js() {

jQuery(document).ready(function($) {

// Hiển thị popup đăng nhập SweetAlert2

$('.nut-dang-nhap-sweet').on('click', function() {

Swal.fire({

title: 'Đăng nhập',

html:

'<div style="display: flex; flex-direction: column; gap: 10px; align-items: center;">' +

'<input type="text" id="ten-dang-nhap" class="swal2-input" placeholder="Tên đăng nhập">' +

'<input type="password" id="mat-khau" class="swal2-input" placeholder="Mật khẩu">' +

'</div>',

showCancelButton: true,

confirmButtonText: 'Đăng nhập',

cancelButtonText: 'Đăng ký',

preConfirm: () => {

const username = Swal.getPopup().querySelector('#ten-dang-nhap').value.trim();

const password = Swal.getPopup().querySelector('#mat-khau').value.trim();

if (!username || !password) {

Swal.showValidationMessage('Vui lòng nhập tên đăng nhập và mật khẩu.');

} else if (!validatePassword(password)) {

Swal.showValidationMessage('Mật khẩu phải có ít nhất 10 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt.');

}

return { username, password };

}

}).then((result) => {

if (result.isConfirmed) {

$.post(auth_tuy_chinh.ajax_url, {

action: 'tuy_chinh_dang_nhap',

username: result.value.username,

password: result.value.password

}, function(response) {

if (response.success) {

Swal.fire('Thành công', 'Đăng nhập thành công!', 'success').then(() => location.reload());

} else {

Swal.fire('Lỗi', response.data, 'error');

}

});

} else if (result.dismiss === Swal.DismissReason.cancel) {

hienThiPopupDangKy();

}

});

// Hàm hiển thị popup đăng ký

function hienThiPopupDangKy() {

Swal.fire({

title: 'Đăng ký',

html:

'<div style="display: flex; flex-direction: column; gap: 10px; align-items: center;">' +

'<input type="text" id="ho-ten" class="swal2-input" placeholder="Họ tên">' +

'<input type="text" id="ten-dang-ky" class="swal2-input" placeholder="Tên đăng nhập">' +

'<input type="text" id="so-dien-thoai" class="swal2-input" placeholder="Số điện thoại">' +

'<input type="password" id="mat-khau-dang-ky" class="swal2-input" placeholder="Mật khẩu">' +

'<input type="password" id="nhap-lai-mat-khau" class="swal2-input" placeholder="Nhập lại mật khẩu">' +

'<input type="email" id="email" class="swal2-input" placeholder="Email">' +

'</div>',

showCancelButton: true,

confirmButtonText: 'Đăng ký',

preConfirm: () => {

const name = Swal.getPopup().querySelector('#ho-ten').value.trim();

const username = Swal.getPopup().querySelector('#ten-dang-ky').value.trim();

const phone = Swal.getPopup().querySelector('#so-dien-thoai').value.trim();

const password = Swal.getPopup().querySelector('#mat-khau-dang-ky').value.trim();

const passwordConfirm = Swal.getPopup().querySelector('#nhap-lai-mat-khau').value.trim();

const email = Swal.getPopup().querySelector('#email').value.trim();

if (!name || !username || !phone || !password || !passwordConfirm || !email) {

Swal.showValidationMessage('Vui lòng nhập đầy đủ thông tin.');

} else if (!validatePhone(phone)) {

Swal.showValidationMessage('Số điện thoại không hợp lệ.');

} else if (!validatePassword(password)) {

Swal.showValidationMessage('Mật khẩu phải có ít nhất 10 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt.');

} else if (password !== passwordConfirm) {

Swal.showValidationMessage('Mật khẩu không khớp.');

} else if (!validateEmail(email)) {

Swal.showValidationMessage('Email không hợp lệ.');

}

return { name, username, phone, password, email };

}

}).then((result) => {

if (result.isConfirmed) {

$.post(auth_tuy_chinh.ajax_url, {

action: 'tuy_chinh_dang_ky',

name: result.value.name,

username: result.value.username,

phone: result.value.phone,

password: result.value.password,

email: result.value.email

}, function(response) {

if (response.success) {

Swal.fire('Thành công', 'Đăng ký thành công!', 'success').then(() => location.reload());

} else {

Swal.fire('Lỗi', response.data, 'error');

}

});

}

});

}

// Hàm kiểm tra định dạng email

function validateEmail(email) {

const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

return re.test(email);

}

// Hàm kiểm tra mật khẩu

function validatePassword(password) {

const re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{10,}$/;

return re.test(password);

}

// Hàm kiểm tra số điện thoại Việt Nam

function validatePhone(phone) {

const re = /^(09|08|07|05|03)[0-9]{8}$/;

return re.test(phone);

}

// Kiểm tra người dùng đã đăng nhập hay chưa

$.post(auth_tuy_chinh.ajax_url, { action: 'kiem_tra_dang_nhap' }, function(response) {

if (response.logged_in) {

$('li.account-item.has-icon').show();

$('.nut-dang-nhap-sweet').hide();

} else {

$('li.account-item.has-icon').hide();

$('.nut-dang-nhap-sweet').show();

}

});

</script>

<?php

}

add_action('wp_footer', 'tuy_chinh_script_js');

// Xử lý đăng nhập bằng AJAX

function tuy_chinh_dang_nhap() {

$username = sanitize_text_field($_POST['username']);

$password = $_POST['password'];

if (empty($username) || empty($password)) {

wp_send_json_error('Vui lòng nhập đầy đủ thông tin.');

}

$user = wp_authenticate($username, $password);

if (is_wp_error($user)) {

wp_send_json_error('Tên đăng nhập hoặc mật khẩu không đúng.');

} else {

wp_set_current_user($user->ID);

wp_set_auth_cookie($user->ID);

wp_send_json_success();

}

add_action('wp_ajax_tuy_chinh_dang_nhap', 'tuy_chinh_dang_nhap');

add_action('wp_ajax_nopriv_tuy_chinh_dang_nhap', 'tuy_chinh_dang_nhap');

// Xử lý đăng ký bằng AJAX

function tuy_chinh_dang_ky() {

$username = sanitize_user($_POST['username']);

$password = $_POST['password'];

$email = sanitize_email($_POST['email']);

$name = sanitize_text_field($_POST['name']);

$phone = sanitize_text_field($_POST['phone']);

if (empty($username) || empty($password) || empty($email) || empty($name) || empty($phone)) {

wp_send_json_error('Vui lòng nhập đầy đủ thông tin.');

} elseif (!preg_match('/^(09|08|07|05|03)[0-9]{8}$/', $phone)) {

wp_send_json_error('Số điện thoại không hợp lệ.');

} elseif (!preg_match('/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{10,}$/', $password)) {

wp_send_json_error('Mật khẩu phải có ít nhất 10 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt.');

} elseif (!is_email($email)) {

wp_send_json_error('Email không hợp lệ.');

} elseif (username_exists($username) || email_exists($email)) {

wp_send_json_error('Tên đăng nhập hoặc Email đã tồn tại.');

} else {

$user_id = wp_create_user($username, $password, $email);

if (is_wp_error($user_id)) {

wp_send_json_error($user_id->get_error_message());

} else {

// Cập nhật tên hiển thị và số điện thoại

wp_update_user(array(

'ID' => $user_id,

'display_name' => $name,

));

// Gán vai trò là 'customer' cho người dùng mới (WooCommerce)

$user = new WP_User($user_id);

$user->set_role('customer');

// Lưu số điện thoại vào metadata của người dùng

update_user_meta($user_id, 'phone', $phone);

wp_send_json_success('Đăng ký thành công!');

}

add_action('wp_ajax_tuy_chinh_dang_ky', 'tuy_chinh_dang_ky');

add_action('wp_ajax_nopriv_tuy_chinh_dang_ky', 'tuy_chinh_dang_ky');

// Kiểm tra người dùng đã đăng nhập hay chưa

function kiem_tra_dang_nhap() {

wp_send_json(array('logged_in' => is_user_logged_in()));

}

add_action('wp_ajax_kiem_tra_dang_nhap', 'kiem_tra_dang_nhap');

add_action('wp_ajax_nopriv_kiem_tra_dang_nhap', 'kiem_tra_dang_nhap');

// Shortcode hiển thị nút đăng nhập bằng SweetAlert2

function nut_dang_nhap_sweetalert2() {

if (!is_user_logged_in()) {

return '<button class="nut-dang-nhap-sweet">Đăng nhập</button>';

}

add_shortcode('dang_nhap_sweet', 'nut_dang_nhap_sweetalert2');

4. Tích Hợp AJAX Cho Đăng Nhập Và Đăng Ký

Trong đoạn mã trên, chúng ta đã sử dụng các action hooks của WordPress để tạo hai chức năng: tuy_chinh_dang_nhap và tuy_chinh_dang_ky. Hai hàm này sẽ xử lý quá trình đăng nhập và đăng ký của người dùng thông qua AJAX.

Đăng Nhập AJAX

Sử dụng wp_authenticate() để kiểm tra tên đăng nhập và mật khẩu.
Nếu thông tin hợp lệ, sử dụng wp_set_current_user() và wp_set_auth_cookie() để đăng nhập người dùng.

Đăng Ký AJAX

Kiểm tra thông tin đăng ký: tên đăng nhập, mật khẩu, email, số điện thoại phải hợp lệ.
Tạo người dùng mới bằng wp_create_user().
Cập nhật thông tin người dùng, bao gồm số điện thoại và vai trò mặc định là ‘customer’ của WooCommerce.

Kiểm Tra Trạng Thái Đăng Nhập

Hàm kiem_tra_dang_nhap() kiểm tra xem người dùng đã đăng nhập hay chưa và trả về kết quả thông qua AJAX.

5. Tạo Shortcode Cho Nút Đăng Nhập SweetAlert2

Shortcode nut_dang_nhap_sweetalert2() tạo một nút “Đăng nhập” bằng SweetAlert2, chỉ hiển thị khi người dùng chưa đăng nhập. Bạn có thể thêm shortcode dưới đây vào bất kỳ vị trí nào trong website để hiển thị đăng nhập.

[dang_nhap_sweet]

1	[dang_nhap_sweet]

6. Sử Dụng Các Hàm Kiểm Tra Và Bảo Mật

sanitize_text_field(): Dùng để làm sạch dữ liệu đầu vào, ngăn chặn các lỗ hổng bảo mật.
wp_send_json_error() và wp_send_json_success(): Trả về phản hồi dưới dạng JSON để xử lý kết quả AJAX.
validatePassword(), validateEmail(), validatePhone(): Kiểm tra tính hợp lệ của mật khẩu, email và số điện thoại.

7. Demo và Mã hoàn chỉnh

Demo của chức năng đăng nhập bằng sweet2 ( Chỉ hoạt động với những user chưa đăng nhập vào tài khoản website mình thôi nhé):

Mã hoàn chỉnh chức năng này, các bạn chỉ cần bỏ vào funtion.php là xong thôi nhé.

// Bỏ form đăng nhập và đăng ký mặc định của WooCommerce
function bo_dang_nhap_dang_ky_mac_dinh() {
    remove_action('woocommerce_before_customer_login_form', 'woocommerce_output_all_notices');
    remove_action('woocommerce_account_content', 'woocommerce_account_content');
}
add_action('init', 'bo_dang_nhap_dang_ky_mac_dinh');

// Thêm SweetAlert2 và script tùy chỉnh
function them_script_sweetalert2() {
    wp_enqueue_script('sweetalert2', 'https://cdn.jsdelivr.net/npm/sweetalert2@11', array('jquery'), null, true);
    wp_enqueue_script('tuy_chinh_auth', get_template_directory_uri() . '/js/tuy_chinh_auth.js', array('jquery', 'sweetalert2'), null, true);
    wp_localize_script('tuy_chinh_auth', 'auth_tuy_chinh', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'them_script_sweetalert2');

// Script tùy chỉnh cho đăng nhập và đăng ký
function tuy_chinh_script_js() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // Hiển thị popup đăng nhập SweetAlert2
            $('.nut-dang-nhap-sweet').on('click', function() {
                Swal.fire({
                    title: 'Đăng nhập',
                    html: 
                        '<div style="display: flex; flex-direction: column; gap: 10px; align-items: center;">' +
                            '<input type="text" id="ten-dang-nhap" class="swal2-input" placeholder="Tên đăng nhập">' +
                            '<input type="password" id="mat-khau" class="swal2-input" placeholder="Mật khẩu">' +
                        '</div>',
                    showCancelButton: true,
                    confirmButtonText: 'Đăng nhập',
                    cancelButtonText: 'Đăng ký',
                    preConfirm: () => {
                        const username = Swal.getPopup().querySelector('#ten-dang-nhap').value.trim();
                        const password = Swal.getPopup().querySelector('#mat-khau').value.trim();

                        if (!username || !password) {
                            Swal.showValidationMessage('Vui lòng nhập tên đăng nhập và mật khẩu.');
                        } else if (!validatePassword(password)) {
                            Swal.showValidationMessage('Mật khẩu phải có ít nhất 10 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt.');
                        }
                        
                        return { username, password };
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.post(auth_tuy_chinh.ajax_url, {
                            action: 'tuy_chinh_dang_nhap',
                            username: result.value.username,
                            password: result.value.password
                        }, function(response) {
                            if (response.success) {
                                Swal.fire('Thành công', 'Đăng nhập thành công!', 'success').then(() => location.reload());
                            } else {
                                Swal.fire('Lỗi', response.data, 'error');
                            }
                        });
                    } else if (result.dismiss === Swal.DismissReason.cancel) {
                        hienThiPopupDangKy();
                    }
                });
            });

            // Hàm hiển thị popup đăng ký
            function hienThiPopupDangKy() {
                Swal.fire({
                    title: 'Đăng ký',
                    html: 
                        '<div style="display: flex; flex-direction: column; gap: 10px; align-items: center;">' +
                            '<input type="text" id="ho-ten" class="swal2-input" placeholder="Họ tên">' +
                            '<input type="text" id="ten-dang-ky" class="swal2-input" placeholder="Tên đăng nhập">' +
                            '<input type="text" id="so-dien-thoai" class="swal2-input" placeholder="Số điện thoại">' +
                            '<input type="password" id="mat-khau-dang-ky" class="swal2-input" placeholder="Mật khẩu">' +
                            '<input type="password" id="nhap-lai-mat-khau" class="swal2-input" placeholder="Nhập lại mật khẩu">' +
                            '<input type="email" id="email" class="swal2-input" placeholder="Email">' +
                        '</div>',
                    showCancelButton: true,
                    confirmButtonText: 'Đăng ký',
                    preConfirm: () => {
                        const name = Swal.getPopup().querySelector('#ho-ten').value.trim();
                        const username = Swal.getPopup().querySelector('#ten-dang-ky').value.trim();
                        const phone = Swal.getPopup().querySelector('#so-dien-thoai').value.trim();
                        const password = Swal.getPopup().querySelector('#mat-khau-dang-ky').value.trim();
                        const passwordConfirm = Swal.getPopup().querySelector('#nhap-lai-mat-khau').value.trim();
                        const email = Swal.getPopup().querySelector('#email').value.trim();

                        if (!name || !username || !phone || !password || !passwordConfirm || !email) {
                            Swal.showValidationMessage('Vui lòng nhập đầy đủ thông tin.');
                        } else if (!validatePhone(phone)) {
                            Swal.showValidationMessage('Số điện thoại không hợp lệ.');
                        } else if (!validatePassword(password)) {
                            Swal.showValidationMessage('Mật khẩu phải có ít nhất 10 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt.');
                        } else if (password !== passwordConfirm) {
                            Swal.showValidationMessage('Mật khẩu không khớp.');
                        } else if (!validateEmail(email)) {
                            Swal.showValidationMessage('Email không hợp lệ.');
                        }

                        return { name, username, phone, password, email };
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.post(auth_tuy_chinh.ajax_url, {
                            action: 'tuy_chinh_dang_ky',
                            name: result.value.name,
                            username: result.value.username,
                            phone: result.value.phone,
                            password: result.value.password,
                            email: result.value.email
                        }, function(response) {
                            if (response.success) {
                                Swal.fire('Thành công', 'Đăng ký thành công!', 'success').then(() => location.reload());
                            } else {
                                Swal.fire('Lỗi', response.data, 'error');
                            }
                        });
                    }
                });
            }

            // Hàm kiểm tra định dạng email
            function validateEmail(email) {
                const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return re.test(email);
            }

            // Hàm kiểm tra mật khẩu
            function validatePassword(password) {
                const re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{10,}$/;
                return re.test(password);
            }

            // Hàm kiểm tra số điện thoại Việt Nam
            function validatePhone(phone) {
                const re = /^(09|08|07|05|03)[0-9]{8}$/;
                return re.test(phone);
            }

            // Kiểm tra người dùng đã đăng nhập hay chưa
            $.post(auth_tuy_chinh.ajax_url, { action: 'kiem_tra_dang_nhap' }, function(response) {
                if (response.logged_in) {
                    $('li.account-item.has-icon').show();
                    $('.nut-dang-nhap-sweet').hide();
                } else {
                    $('li.account-item.has-icon').hide();
                    $('.nut-dang-nhap-sweet').show();
                }
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'tuy_chinh_script_js');


// Xử lý đăng nhập bằng AJAX
function tuy_chinh_dang_nhap() {
    $username = sanitize_text_field($_POST['username']);
    $password = $_POST['password'];

    if (empty($username) || empty($password)) {
        wp_send_json_error('Vui lòng nhập đầy đủ thông tin.');
    }

    $user = wp_authenticate($username, $password);
    if (is_wp_error($user)) {
        wp_send_json_error('Tên đăng nhập hoặc mật khẩu không đúng.');
    } else {
        wp_set_current_user($user->ID);
        wp_set_auth_cookie($user->ID);
        wp_send_json_success();
    }
}
add_action('wp_ajax_tuy_chinh_dang_nhap', 'tuy_chinh_dang_nhap');
add_action('wp_ajax_nopriv_tuy_chinh_dang_nhap', 'tuy_chinh_dang_nhap');


// Xử lý đăng ký bằng AJAX
function tuy_chinh_dang_ky() {
    $username = sanitize_user($_POST['username']);
    $password = $_POST['password'];
    $email = sanitize_email($_POST['email']);
    $name = sanitize_text_field($_POST['name']);
    $phone = sanitize_text_field($_POST['phone']);

    if (empty($username) || empty($password) || empty($email) || empty($name) || empty($phone)) {
        wp_send_json_error('Vui lòng nhập đầy đủ thông tin.');
    } elseif (!preg_match('/^(09|08|07|05|03)[0-9]{8}$/', $phone)) {
        wp_send_json_error('Số điện thoại không hợp lệ.');
    } elseif (!preg_match('/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{10,}$/', $password)) {
        wp_send_json_error('Mật khẩu phải có ít nhất 10 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt.');
    } elseif (!is_email($email)) {
        wp_send_json_error('Email không hợp lệ.');
    } elseif (username_exists($username) || email_exists($email)) {
        wp_send_json_error('Tên đăng nhập hoặc Email đã tồn tại.');
    } else {
        $user_id = wp_create_user($username, $password, $email);

        if (is_wp_error($user_id)) {
            wp_send_json_error($user_id->get_error_message());
        } else {
            // Cập nhật tên hiển thị và số điện thoại
            wp_update_user(array(
                'ID' => $user_id,
                'display_name' => $name,
            ));
            update_user_meta($user_id, 'phone', $phone);
            
                        // Gán vai trò là 'customer' cho người dùng mới (WooCommerce)
            $user = new WP_User($user_id);
            $user->set_role('customer');

            // Lưu số điện thoại vào metadata của người dùng
            update_user_meta($user_id, 'phone', $phone);

            wp_send_json_success('Đăng ký thành công!');
        }
    }
}
add_action('wp_ajax_tuy_chinh_dang_ky', 'tuy_chinh_dang_ky');
add_action('wp_ajax_nopriv_tuy_chinh_dang_ky', 'tuy_chinh_dang_ky');


// Kiểm tra người dùng đã đăng nhập hay chưa
function kiem_tra_dang_nhap() {
    wp_send_json(array('logged_in' => is_user_logged_in()));
}
add_action('wp_ajax_kiem_tra_dang_nhap', 'kiem_tra_dang_nhap');
add_action('wp_ajax_nopriv_kiem_tra_dang_nhap', 'kiem_tra_dang_nhap');

// Shortcode hiển thị nút đăng nhập bằng SweetAlert2
function nut_dang_nhap_sweetalert2() {
    if (!is_user_logged_in()) {
        return '<button class="nut-dang-nhap-sweet">Đăng nhập</button>';
    }
}
add_shortcode('dang_nhap_sweet', 'nut_dang_nhap_sweetalert2');

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237