پروژه فروشگاه اینترنتی با جاوااسکریپت - جستجو و فیلتر محصولات

🎯 اهداف یادگیری

پیاده سازی سیستم جستجوی محصولات
ایجاد فیلترهای مختلف برای محصولات
استفاده از رویدادهای صفحه کلید برای جستجوی لحظه‌ای
بهینه‌سازی عملکرد فیلترها

📌 پیاده‌سازی جستجوی محصولات

در این بخش می‌خواهیم امکان جستجوی محصولات بر اساس نام را به فروشگاه اضافه کنیم:

javascript

            const searchProducts = (searchTerm) => {
  return products.filter(product => {
    return product.name.toLowerCase().includes(searchTerm.toLowerCase());
  });
};

            

توضیحات کد:

تابع searchProducts: یک تابع که عبارت جستجو را دریافت و محصولات منطبق را برمی‌گرداند
متد filter: برای فیلتر کردن آرایه محصولات بر اساس شرط مورد نظر
toLowerCase: برای عدم حساسیت به حروف بزرگ و کوچک در جستجو

📌 اتصال جستجو به رابط کاربری

حالا باید این تابع را به فیلد جستجو در صفحه متصل کنیم:

javascript

            const searchInput = document.getElementById('search-input');
searchInput.addEventListener('input', (e) => {
  const filteredProducts = searchProducts(e.target.value);
  renderProducts(filteredProducts);
});

            

بهینه‌سازی عملکرد:

Debounce: برای کاهش تعداد درخواست‌ها هنگام تایپ سریع
جستجوی ترکیبی: امکان جستجو در چند فیلد مختلف (نام، دسته‌بندی، توضیحات)

📌 فیلتر کردن محصولات

حالا می‌خواهیم امکان فیلتر کردن محصولات بر اساس قیمت و دسته‌بندی را اضافه کنیم:

javascript

            const filterProducts = (filters) => {
  return products.filter(product => {
    const matchesCategory = !filters.category || product.category === filters.category;
    const matchesPrice = !filters.maxPrice || product.price <= filters.maxPrice;
    return matchesCategory && matchesPrice;
  });
};

            

اتصال فیلترها به رابط کاربری:

javascript

            const applyFilters = () => {
  const category = document.getElementById('category-filter').value;
  const maxPrice = parseInt(document.getElementById('price-filter').value);
  const filteredProducts = filterProducts({category, maxPrice});
  renderProducts(filteredProducts);
};

            

📌 ترکیب جستجو و فیلترها

برای عملکرد بهتر، باید جستجو و فیلترها را با هم ترکیب کنیم:

javascript

            const updateProductList = () => {
  const searchTerm = document.getElementById('search-input').value;
  const category = document.getElementById('category-filter').value;
  const maxPrice = parseInt(document.getElementById('price-filter').value);
  let filteredProducts = products;
  if (searchTerm) filteredProducts = searchProducts(searchTerm);
  filteredProducts = filterProducts({category, maxPrice}, filteredProducts);
  renderProducts(filteredProducts);
};

            

بهینه‌سازی‌های پیشرفته:

حافظه‌گیری (Memoization): برای جلوگیری از محاسبات تکراری
Web Workers: برای پردازش فیلترها در پس‌زمینه و جلوگیری از مسدود شدن رابط کاربری
Virtual Scrolling: برای نمایش لیست‌های بزرگ محصولات بدون افت عملکرد

📌 تمرین عملی

سیستم فیلتر را با اضافه کردن فیلترهای زیر تکمیل کنید:

javascript

            const filters = {
  minRating: 4, // حداقل امتیاز محصول
  inStock: true, // فقط محصولات موجود
  discounted: true // فقط محصولات تخفیف‌دار
};

            

راهنمای تمرین:

تابع filterProducts را برای پشتیبانی از فیلترهای جدید گسترش دهید
عناصر HTML لازم برای فیلترهای جدید ایجاد کنید
تابع updateProductList را برای مدیریت فیلترهای جدید به‌روزرسانی کنید
رابط کاربری را برای نمایش وضعیت فیلترها بهبود بخشید

📌 قدم بعدی

در درس بعدی با سیستم سبد خرید و پرداخت آشنا خواهیم شد!

❮ بخش قبلی بخش بعدی ❯