در این بخش از آموزش جت اسمارت فیلتر یاد می گیریم چطور فیلترها را برای حالت موبایل و تبلت به صورت حرفه ای نمایش دهیم. معمولا وقتی تعداد فیلترها زیاد است، اگر مستقیم در صفحه موبایل قرار بگیرند فضای زیادی اشغال می کنند و جلوی دیدن لیستینگ را می گیرند. بهترین راه حل این است که فیلترها را داخل یک پاپ آپ جداگانه قرار دهیم تا هم ظاهر مرتب تری داشته باشیم و هم تجربه کاربری بهتری ایجاد کنیم. در این جلسه دقیقا همین روش را مرحله به مرحله پیاده سازی می کنیم.
ایجاد پاپ آپ و قرار دادن فیلترها در نسخه ریسپانسیو
در ابتدا یک پاپ آپ می سازیم و داخل آن تمام فیلترهایی را قرار می دهیم که می خواهیم در موبایل نمایش داده شوند. این پاپ آپ می تواند اسلایدی از کنار باز شود یا به صورت لایه ای وسط صفحه ظاهر گردد. مزیت این روش این است که بخش فیلتر از فضای صفحه اصلی جدا می شود و کاربر تنها زمانی آن را می بیند که روی دکمه «فیلترها» کلیک کند. در ادامه با تنظیمات ریسپانسیو المنتور تعیین می کنیم که فیلترهای اصلی در حالت دسکتاپ نمایش داده شوند و همین فیلترهای داخل پاپ آپ مخصوص موبایل و تبلت باشند. به این شکل کنترل کاملی روی نمایش فیلترها در هر دستگاه خواهید داشت.
دکمه باز کردن پاپ آپ و شخصی سازی ظاهر فیلترها
در مرحله بعد یک دکمه اختصاصی برای باز کردن پاپ آپ طراحی می کنیم مثل «نمایش فیلترها» یا «جستجوی پیشرفته». این دکمه فقط روی موبایل و تبلت فعال می شود و هنگام کلیک، پاپ آپ حاوی تمام فیلترها باز خواهد شد. همچنین در این جلسه نحوه تنظیم فاصله ها، اندازه نوشته ها، دکمه بستن پاپ آپ، اسکرول داخلی و سبک نمایش فیلترها در موبایل نیز توضیح داده می شود. هدف این است که فیلترها هم در دسکتاپ درست نمایش داده شوند و هم در موبایل کم جا، کاربردی و مرتب باشند. نتیجه نهایی یک طراحی حرفه ای و استاندارد است که با بهترین سایت های فروشگاهی و لیستینگ برابری می کند.