Hiển thị kết quả sản phẩm WooCommerce có điều kiện ngay khi bật modal tìm kiếm

1. Kịch bản: Hiển thị sản phẩm đang giảm giá

Giả sử bạn muốn mỗi khi người dùng mở modal tìm kiếm, sẽ thấy ngay danh sách sản phẩm WooCommerce đang giảm giá (/on-sale). Điều này giúp tăng khả năng click, cải thiện trải nghiệm mua sắm và dẫn người dùng tới các sản phẩm nổi bật nhất.

2. Cách thực hiện bằng JavaScript

Chỉ cần lắng nghe sự kiện ils:modal-opened và gán slash command vào ô tìm kiếm là đủ. Đây là đoạn mã hoàn chỉnh:

window.addEventListener('ils:modal-opened', () => {
  const inputSearch = document.querySelector('#init-live-search-input');
  if (inputSearch && !inputSearch.value) {
    inputSearch.value = '/on-sale';
    inputSearch.dispatchEvent(new Event('input', { bubbles: true }));
  }
});

3. Tùy chỉnh nâng cao với nhiều điều kiện

Bạn có thể mở rộng đoạn code trên để tự động hiển thị các kết quả khác, ví dụ:

• Sản phẩm trong khoảng giá: /price 100 500
• Tìm theo mã SKU: /sku ABC
• Chỉ hiển thị sản phẩm còn hàng: /stock

Bạn chỉ cần thay đổi giá trị trong inputSearch.value theo nhu cầu.

4. Tại sao nên dùng slash command thay vì gọi API trực tiếp?

Slash command là tính năng mạnh mẽ của Init Live Search, giúp bạn thực thi truy vấn REST API phức tạp mà không cần viết lại logic hiển thị. Khi bạn gán slash command vào input, toàn bộ cơ chế tìm kiếm, loading, và render kết quả sẽ được plugin xử lý tự động, chuẩn chỉ và đồng bộ.

5. Gợi ý mở rộng

• Hiển thị sản phẩm khác nhau theo thời điểm (sáng thì /on-sale, tối thì /price 1000 5000)
• Ngẫu nhiên mỗi lần mở modal: ['/on-sale', '/stock', '/price 100 1000']
• Tự fetch dữ liệu sản phẩm bằng endpoint /product để hiển thị theo giao diện hoàn toàn riêng, không cần dùng slash command

Bạn có thể sử dụng JavaScript để gọi trực tiếp REST API như /wp-json/initlise/v1/product?on_sale=1&in_stock=1, sau đó tự xử lý dữ liệu và hiển thị theo giao diện tùy thích (grid, slider, hoặc bất kỳ layout nào bạn muốn). Đây là cách tận dụng plugin như một lớp dữ liệu (data layer) cho frontend của bạn, đồng thời giữ nguyên khả năng cập nhật từ plugin gốc.

Nếu muốn tùy biến sâu hơn kết quả trả về từ API (ví dụ lọc theo trường ACF, giá trị tùy chỉnh…), bạn có thể sử dụng filter PHP – xem hướng dẫn chi tiết tại bài viết hướng dẫn sử dụng các filter trong Init Live Search.

Kết luận

Với Init Live Search, bạn không chỉ dừng lại ở việc “tìm kiếm theo từ khóa”. Nhờ vào hệ thống slash command linh hoạt và các sự kiện JavaScript hỗ trợ, bạn có thể biến giao diện tìm kiếm thành một trải nghiệm mua sắm chủ động, hấp dẫn và hoàn toàn tùy biến theo ý mình. Tất cả chỉ với vài dòng mã đơn giản.