Cách hiển thị thông báo khi nhấp vào nút bất kì giúp website wordpress trở nên chuyên nghiệp hơn

Ngày hôm nay, chothemewp xin hướng dẫn các bạn cách làm thông báo nhấp vào nút bất kì nhé

Dạng sẽ như thế này, khi các bạn nhấp vào nút tài khoản, nó sẽ hiển thị thông báo như phía dưới màn hình bạn đang xem

thông báo khi nhấp vào nút tài khoản
thông báo khi nhấp vào nút tài khoản

 

Và khi các bạn đã ở trang tài khoản, nhưng lại nhấp tiếp tục vào nút tài khoản, thì nó sẽ hiển thị thông báo như sau

Thông báo khi nhấp vào nút thanh toán khi đã ở trang thanh toán
Thông báo khi nhấp vào nút thanh toán khi đã ở trang thanh toán

 

Cách làm như thế nào? Rất đơn giản, các bạn chỉ cần coppy và bỏ đoạn code sau vào funtion.php của các bạn là được

Giải thích code 1 xíu nhé:

 

Đoạn code này thực hiện một số việc trong WordPress để thêm các script và xử lý sự kiện trong trang tài khoản. Hãy xem xét từng bước:

  1. enqueue_custom_scripts_account() :
    • Sử dụng hàm này để đăng ký các script cần thiết cho trang tài khoản.
    • Enqueue thư viện SweetAlert2 từ một CDN và một file JavaScript tùy chỉnh.
    • Sử dụng wp_localize_script để truyền dữ liệu tới file JavaScript để sử dụng, trong trường hợp này là đường dẫn URL hiện tại của trang.
  2. add_custom_script_inline_account() :
    • Đây là một hàm được thêm vào phần footer của trang web (wp_footer).
    • Chứa script JavaScript được nhúng trực tiếp vào file custom-account-script.js.
    • Sử dụng jQuery để thực hiện các hành động khi tài liệu đã sẵn sàng (ready).
    • Bắt sự kiện click cho các phần tử có lớp là 'account-item' và là một thẻ a có class là 'account-link'.
    • Khi một liên kết được click, script này kiểm tra URL hiện tại và hiển thị thông báo bằng thư viện SweetAlert2 dựa trên điều kiện:
      • Nếu URL hiện tại là '/tai-khoan/' (tức là trang tài khoản), sẽ hiển thị một thông báo cảnh báo.
      • Nếu không, sẽ hiển thị một thông báo thành công và chuyển hướng đến '/tai-khoan/'.

Tóm lại, đoạn mã này cung cấp chức năng xác định URL hiện tại và thực hiện hành động khác nhau dựa trên URL đó khi người dùng nhấn vào một liên kết trong trang tài khoản.

Ưu điểm của đoạn mã này:
1. **Tích hợp SweetAlert2:** Sử dụng thư viện SweetAlert2 để hiển thị các thông báo tương tác trực quan hơn.
2. **Xử lý sự kiện click một cách linh hoạt:** Code xử lý sự kiện click cho các liên kết trong trang tài khoản, kiểm tra URL và thực hiện hành động tương ứng.
3. **Sử dụng localize script của WordPress:** Truyền dữ liệu từ phía server (URL hiện tại) tới phía client (JavaScript) thông qua wp_localize_script.
Tuy nhiên, có một số nhược điểm nhất định:
1. **Phụ thuộc vào JavaScript:** Mã JavaScript này sẽ chỉ hoạt động khi JavaScript được bật trên trình duyệt của người dùng. Nếu JavaScript bị vô hiệu hóa, các chức năng không hoạt động.
2. **Phụ thuộc vào jQuery:** Việc sử dụng jQuery có thể tăng dung lượng tải trang và làm chậm hiệu suất trang web, đặc biệt là khi chỉ sử dụng một số tính năng nhỏ của thư viện này.
3. **Phụ thuộc vào SweetAlert2 từ CDN:** Nếu phiên bản cụ thể của thư viện SweetAlert2 từ CDN không khả dụng hoặc thay đổi, có thể gây ra sự cố hoặc thay đổi trong hành vi hiển thị thông báo.
4. **Cấu trúc logic phức tạp:** Cấu trúc logic của mã có thể trở nên phức tạp và khó hiểu, đặc biệt khi mã phức tạp hơn và cần bảo trì sau này.
Việc cân nhắc giữa tính tương tác và hiệu suất là điều quan trọng khi phát triển trang web.
Kết thúc hướng dẫn Cách hiển thị thông báo khi nhấp vào nút bất kì giúp website wordpress trở nên chuyên nghiệp hơn. Chothemewp cảm ơn mọi người đã đọc bài viết
Đọc thêm một số bài viết khác tại đây:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *


0766734539
Tổng Đài Miễn Phí Cước Gọi
Yêu cầu tư vấn