Các phương thức mở modal đăng nhập trong Init User Engine

1. Click vào avatar mặc định

• Avatar hiển thị qua shortcode [init_user_engine], nếu chưa đăng nhập sẽ tự động hiển thị icon mặc định.
• Khi người dùng click vào avatar này, modal đăng nhập sẽ được kích hoạt.
• ID phần tử avatar: #init-user-engine-avatar

2. Sử dụng thuộc tính data-iue="login"

• Bất kỳ phần tử HTML nào có data-iue="login" sẽ tự động mở modal khi click.
• Thường dùng trong các nút gọi hành động (CTA) hoặc liên kết tùy chỉnh.

<a href="#" data-iue="login">Đăng nhập ngay</a>

3. Trigger qua URL: #init-user-engine

• Nếu người dùng truy cập trang với hash #init-user-engine, modal sẽ tự động bật.
• Thường dùng khi redirect từ một hành động khác, ví dụ sau khi đăng ký hoặc từ link giới thiệu.

https://example.com/any-page/#init-user-engine

4. Phím tắt Alt + L

• Khi người dùng nhấn tổ hợp phím Alt + L, modal sẽ mở nếu đang ở trạng thái đóng.
• Tính năng này giúp tăng trải nghiệm cho user thường xuyên thao tác.

5. Gọi trực tiếp qua JavaScript

Bạn có thể chủ động mở modal bằng cách gọi hàm toàn cục sau:

if (typeof openLoginModal === 'function') {
    openLoginModal();
}

Hữu ích khi bạn muốn tích hợp logic riêng hoặc gắn vào luồng xử lý tuỳ chỉnh.

6. Tự động điều chỉnh giao diện theo giao diện người dùng

• Modal tự nhận diện theme qua biến InitPluginSuiteUserEngineConfig.theme
• Các chế độ hỗ trợ: light, dark, auto (tự nhận hệ điều hành)
• CSS sẽ tự động thêm class .dark nếu điều kiện phù hợp

Lưu ý kỹ thuật

• Form đăng nhập sử dụng wp_login_form() chuẩn của WordPress nên đảm bảo bảo mật và tương thích.
• Không xử lý đăng nhập bằng JavaScript – chỉ mở modal và focus input.

Tổng kết

Init User Engine cung cấp nhiều phương thức để mở modal đăng nhập một cách linh hoạt, từ avatar mặc định, nút tuỳ chỉnh, URL đặc biệt, phím tắt cho đến gọi trực tiếp bằng JavaScript. Điều này giúp bạn dễ dàng tích hợp login flow vào mọi giao diện, giữ trải nghiệm liền mạch và tối ưu cho người dùng.