Tạo giao diện kết quả tùy biến theo loại nội dung trong Init Live Search

Bài viết này hướng dẫn cách sử dụng sự kiện JavaScript để can thiệp và làm mới từng kết quả hiển thị mà không cần sửa mã nguồn gốc của plugin.

1. Mỗi kết quả đều mang theo data-type và data-category

Khi Init Live Search render mỗi item, nó sẽ tự động thêm các thuộc tính như:

• data-type: post, product, review, page…
• data-category: tên chuyên mục nếu có

Bạn có thể tận dụng những thuộc tính này để thay đổi giao diện dựa theo loại nội dung.

2. Hook vào sự kiện ils:results-loaded

Sự kiện ils:results-loaded sẽ được phát ra sau khi kết quả được render. Đây là điểm vàng để bạn thực hiện tùy biến DOM.

Dưới đây là đoạn mã ví dụ:

window.addEventListener('ils:results-loaded', () => {
  const items = document.querySelectorAll('.ils-item');

  items.forEach(item => {
    const type = item.getAttribute('data-type');

    if (type === 'product') {
      item.classList.add('ils-type-product');
      const badge = document.createElement('span');
      badge.textContent = 'Sản phẩm';
      badge.className = 'ils-custom-badge';
      item.querySelector('.ils-title')?.prepend(badge);
    }

    if (type === 'review') {
      item.classList.add('ils-type-review');
      item.style.backgroundColor = '#f0f8ff';
    }

    if (type === 'page') {
      item.classList.add('ils-type-page');
      const thumb = item.querySelector('.ils-thumb img');
      if (thumb) {
        thumb.style.filter = 'grayscale(1)';
      }
    }
  });
});

Bạn có thể thay đổi màu nền, thêm biểu tượng, hoặc ẩn hiện các thành phần tùy ý dựa trên điều kiện này.

3. Áp dụng class CSS cho từng loại

Từ đoạn code trên, bạn có thể viết CSS tương ứng để làm đẹp thêm:

.ils-type-product .ils-title {
  color: #d32f2f;
}

.ils-type-review {
  border-left: 4px solid #2196f3;
}

.ils-custom-badge {
  background: #eee;
  color: #333;
  font-size: 11px;
  padding: 2px 6px;
  margin-right: 5px;
  border-radius: 3px;
}

4. Giao diện tự động phản ánh nội dung

Với cách làm này, giao diện kết quả tìm kiếm sẽ phản ánh chính xác loại nội dung mà người dùng đang thấy. Ví dụ:

• Sản phẩm WooCommerce có viền đỏ và icon giỏ hàng
• Trang giới thiệu hiện ảnh đen trắng
• Bài đánh giá nổi bật bằng nền xanh nhạt

Toàn bộ xử lý đều nằm ở phía frontend, giữ cho plugin dễ cập nhật và bảo trì.

Kết luận

Init Live Search hỗ trợ hệ thống sự kiện mạnh mẽ, giúp bạn can thiệp toàn diện vào kết quả hiển thị. Chỉ với sự kiện ils:results-loaded, bạn đã có thể tùy biến từng item theo loại nội dung, tạo trải nghiệm tìm kiếm nhất quán và sinh động mà không đụng vào code gốc.