Ý tưởng tổng thể

Thông thường khi mở Init Live Search, người dùng sẽ thấy một hộp tìm kiếm trống hoặc được đẩy thẳng vào slash command mặc định như /recent. Nhưng nếu bạn muốn tạo một ấn tượng đầu tiên thật “đỉnh” — một màn hình khởi động mang tính gợi mở, hấp dẫn — thì đây là lúc để tuỳ biến.

Chúng ta sẽ tận dụng hook ils:modal-opened để chờ đúng khoảnh khắc người dùng mở modal, rồi thực hiện fetch dữ liệu qua các REST API như danh mục, thẻ, bài mới. Kết quả là một màn hình chào mừng năng động, hiện đại, giúp dẫn dắt người dùng đi sâu hơn vào nội dung trang.

Các REST API được sử dụng

Init Live Search đã tích hợp sẵn nhiều endpoint hữu ích mà bạn có thể gọi trực tiếp, không cần viết thêm backend:

• GET /initlise/v1/taxonomies?taxonomy=category – danh sách chuyên mục
• GET /initlise/v1/taxonomies?taxonomy=post_tag – các thẻ phổ biến
• GET /initlise/v1/recent – các bài viết mới nhất

Toàn bộ danh sách endpoint đã được tổng hợp tại danh sách Endpoint REST API trong Init Live Search.

Mã JavaScript mẫu

window.addEventListener('ils:modal-opened', async function () {
    const input = document.querySelector('#init-live-search-input');
    if (!input || input.value.trim()) return;

    const container = document.querySelector('.ils-results');
    container.innerHTML = '<p class="ils-loading">Đang tải gợi ý...</p>';

    const [categories, tags, recent] = await Promise.all([
        fetch('/wp-json/initlise/v1/taxonomies?taxonomy=category').then(r => r.json()),
        fetch('/wp-json/initlise/v1/taxonomies?taxonomy=post_tag').then(r => r.json()),
        fetch('/wp-json/initlise/v1/recent').then(r => r.json()),
    ]);

    container.innerHTML = `
        <div class="ils-welcome">
            <h3>Chủ đề phổ biến</h3>
            <ul>${categories.slice(0, 6).map(c => `<li><a href="${c.url}" target="_blank">${c.name}</a></li>`).join('')}</ul>

            <h3>Thẻ nổi bật</h3>
            <ul>${tags.slice(0, 6).map(t => `<li><a href="${t.url}" target="_blank">#${t.name}</a></li>`).join('')}</ul>

            <h3>Bài viết mới</h3>
            <ul>${recent.slice(0, 5).map(p => `<li><a href="${p.url}" target="_blank">${p.title}</a></li>`).join('')}</ul>
        </div>
    `;
});

CSS nhẹ nhàng

.ils-welcome { padding: 1rem; line-height: 1.6; }
.ils-welcome h3 { margin-top: 1.5rem; }
.ils-welcome ul { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ils-welcome li { background: #f2f2f2; padding: 0.4rem 0.6rem; border-radius: 4px; }

Tại sao chỉ fetch khi modal được mở?

Việc fetch dữ liệu được thực hiện ngay khi người dùng mở modal, chứ không từ đầu trang, mang lại nhiều lợi ích rõ rệt:

• Tiết kiệm tài nguyên: không phải tải ồ ạt các endpoint khi người dùng chưa cần.
• Chính xác về ngữ cảnh: chỉ khi người dùng mở tìm kiếm là lúc họ thực sự có nhu cầu.
• Hiệu suất tối ưu: giữ site nhẹ và nhanh, tránh gây tải cho server.

Đây chính là triết lý “Lazy Load on Intent” — chỉ phản hồi khi hành vi thực sự xảy ra, không đoán mò, không thừa thãi.

Mở rộng thêm

Bạn có thể dễ dàng nâng cấp màn hình chào mừng bằng cách bổ sung thêm các REST API khác:

• Gợi ý sản phẩm từ WooCommerce: GET /initlise/v1/product
• Bài viết theo ngày đăng: GET /initlise/v1/date
• Nội dung ngẫu nhiên hoặc phổ biến: GET /initlise/v1/random, /popular nếu có định nghĩa

Tất cả đều có thể gắn link để người dùng click, hoặc tự động điền slash command tương ứng vào input — cực kỳ linh hoạt, tuỳ UI/UX bạn thiết kế.