آموزش رایگان ساخت فیلتر محصولات سایت دیجی کالا با Html | Css | Bootstrap | Jquery | Nouislider | Wnumb

آموزش رایگان و پروژه محور ساخت فیلتر محصولات

فیلتر محصولات یکی از اجزای مهم صفحه دسته‌بندی فروشگاه‌های اینترنتیه که به کاربر کمک می‌کنه سریع‌تر به محصول مورد نظرش برسه. در این مینی پروژه قراره با HTML، CSS، Bootstrap و چند پلاگین جاوااسکریپت، یه فیلتر محصولات مشابه دیجی کالا بسازیم.

بالای فرم فیلتر، یه باکس جستجو قرار داره. کاربر می‌تونه اسم محصول یا برند مورد نظرش رو بنویسه تا نتایج محدودتر بشه. کنار باکس جستجو، دکمه‌ای با آیکون ذره‌بین قرار گرفته که ظاهر جستجو رو کامل می‌کنه.

بخش اصلی فیلتر شامل چند آکاردئونه. دسته‌بندی، برند، فروشنده و رنگ‌ها هر کدوم توی یه کارت جدا قرار گرفتن که با کلیک باز و بسته می‌شن. توی هر آکاردئون، چک‌باکس‌هایی برای انتخاب گزینه‌ها وجود داره. بخش رنگ‌ها علاوه بر چک‌باکس، یه دایره رنگی کنار هر گزینه داره که انتخاب رو بصری‌تر می‌کنه.

برای فیلتر قیمت، از noUiSlider استفاده شده. این پلاگین یه اسلایدر دوطرفه می‌سازه که کاربر می‌تونه بازه قیمت مورد نظرش رو با جابه‌جا کردن دو دستگیره مشخص کنه. مقدار انتخاب‌شده به صورت زنده پایین اسلایدر نمایش داده می‌شه.

زیر اسلایدر قیمت، یه سوییچ برای نمایش فقط کالاهای موجود قرار داره. این سوییچ با CSS سفارشی طراحی شده و حالت روشن و خاموش داره. وقتی کاربر فعالش می‌کنه، فقط محصولاتی که موجودی دارن نمایش داده می‌شن.

استایل‌دهی فرم کاملاً سفارشیه. عنوان‌ها با یه آیکون تزئینی کنارشون مشخص شدن، آکاردئون‌ها گوشه‌های گرد دارن و آیکون فلششون با باز شدن ۱۸۰ درجه می‌چرخه. اسلایدر قیمت هم رنگ قرمز ملایمی داره که با بقیه بخش‌ها هماهنگه.

نکته کاربردی این پروژه، ترکیب چند پلاگین جاوااسکریپت با همدیگه‌ست. noUiSlider برای اسلایدر قیمت، wNumb برای فرمت اعداد و Bootstrap برای آکاردئون‌ها کنار هم قرار گرفتن تا یه فیلتر کامل ساخته بشه.

در نهایت یه فیلتر محصولات کاربردی داری که می‌تونی ازش در پروژه‌های شخصی خودت استفاده کنی. سورس کامل پروژه به صورت رایگان در دسترسه تا کدها رو بررسی کنی و دید عمیق‌تری پیدا کنی.

اگه می‌خوای این بخش‌ها رو در قالب یه پروژه فروشگاهی کامل پیاده کنی، آموزش گام‌به‌گام طراحی قالب دیجی کالا انتخاب مناسبیه.