Danh sách sự kiện hỗ trợ

Các sự kiện được phát ra bằng window.dispatchEvent() hoặc new CustomEvent() trong quá trình người dùng sử dụng modal tìm kiếm:

ils:modal-opened

Kích hoạt khi modal tìm kiếm được mở. Không có event.detail.

ils:modal-closed

Kích hoạt khi modal được đóng. Không có event.detail.

ils:search-started

Kích hoạt khi người dùng bắt đầu gõ từ khóa. event.detail là một đối tượng:

{
  "term": "string"
}

ils:results-loaded

Kích hoạt khi kết quả tìm kiếm được render. event.detail:

{
  "count": 10,
  "append": false,
  "command": {
    "cmd": "recent",
    ...
  }
}

ils:result-clicked

Kích hoạt khi người dùng click vào một kết quả. event.detail chứa:

{
  "id": 123,
  "url": "https://example.com/post",
  "title": "Tiêu đề bài viết",
  "type": "post",
  "category": "tin-tuc",
  "command": "recent"
}

Cách sử dụng

Bạn có thể gắn các listener vào window hoặc document để bắt sự kiện:

window.addEventListener('ils:modal-opened', () => {
  console.log('Modal đã mở');
});

window.addEventListener('ils:search-started', e => {
  console.log('Đang tìm:', e.detail.term);
});

window.addEventListener('ils:results-loaded', e => {
  console.log(`Có ${e.detail.count} kết quả từ lệnh:`, e.detail.command);
});

window.addEventListener('ils:result-clicked', e => {
  console.log('Người dùng đã chọn:', e.detail.title);
});

Ứng dụng nâng cao

Gửi từ khóa tìm kiếm đến Google Analytics

window.addEventListener('ils:search-started', (e) => {
  if (typeof gtag === 'function') {
    gtag('event', 'search', {
      search_term: e.detail.term,
      method: 'Init Live Search'
    });
  }
});

Tracking kết quả được click

window.addEventListener('ils:result-clicked', (e) => {
  if (typeof gtag === 'function') {
    gtag('event', 'click_result', {
      event_category: 'Live Search',
      event_label: e.detail.title,
      post_id: e.detail.id,
      post_type: e.detail.type,
      command: e.detail.command
    });
  }
});

Thêm hiệu ứng khi modal được mở

window.addEventListener('ils:modal-opened', () => {
  document.body.classList.add('ils-modal-visible');
});
window.addEventListener('ils:modal-closed', () => {
  document.body.classList.remove('ils-modal-visible');
});

Hiển thị hoặc ẩn loading riêng

window.addEventListener('ils:search-started', () => {
  document.querySelector('#my-spinner')?.classList.remove('hidden');
});
window.addEventListener('ils:results-loaded', () => {
  document.querySelector('#my-spinner')?.classList.add('hidden');
});

Gợi ý nếu không có kết quả

window.addEventListener('ils:results-loaded', (e) => {
  if (e.detail.count === 0) {
    const el = document.querySelector('#ils-suggestion');
    if (el) {
      el.innerHTML = 'Không có kết quả. Hãy thử với <kbd>/popular</kbd> hoặc <kbd>/random</kbd>.';
    }
  }
});

Phân tích giá sản phẩm nếu là WooCommerce

window.addEventListener('ils:results-loaded', (e) => {
  if (e.detail.command === 'product') {
    document.querySelectorAll('.ils-item').forEach(el => {
      const price = parseFloat(el.dataset.price);
      if (!isNaN(price) && price <= 100) {
        el.classList.add('ils-low-price');
      }
    });
  }
});

Tự động cuộn đến vùng kết quả

window.addEventListener('ils:results-loaded', () => {
  const target = document.querySelector('.ils-results');
  if (target) {
    const top = target.getBoundingClientRect().top + window.scrollY - 50;
    window.scrollTo({ top, behavior: 'smooth' });
  }
});

Lưu ý

• Các sự kiện chỉ được phát khi modal đang hoạt động.
• Có thể dùng để đồng bộ UI ngoài plugin hoặc phục vụ tracking.
• Hệ thống mở, có thể bổ sung thêm sự kiện nếu cần.

Tổng kết

Hệ thống sự kiện ils:* trong Init Live Search là công cụ mạnh mẽ cho developer mở rộng chức năng tìm kiếm mà không cần sửa mã gốc. Từ việc tracking, thêm hiệu ứng, đến tùy chỉnh giao diện — bạn có thể kiểm soát toàn bộ luồng tương tác của người dùng một cách linh hoạt.