واجهة موقع منتجات إلكترونية مع نظام فلترة ديناميكي

تطوير واجهة لموقع إلكتروني يعرض مجموعة من المنتجات مع إمكانية تصفية (فلترة) المنتجات حسب الفئات (Categories) بشكل ديناميكي وسلس. تم تصميم المشروع بواجهة عصرية متجاوبة تدعم مختلف الأجهزة، مع نظام قوائم منسدلة (Dropdown Navigation) وقائمة جانبية للهواتف المحمولة.

تفاصيل وآلية العمل:

عرض المنتجات: يتم عرض المنتجات داخل شبكة (Grid) تحتوي على صور تمثل كل منتج.

نظام الفلترة: عند النقر على أي فئة (Branding – Illustration – Logo – All) يتم تحديث العرض ديناميكيًا باستخدام JavaScript لإظهار المنتجات المطابقة فقط.

انتقالات سلسة: عند الفلترة، يتم تطبيق تأثيرات انتقال (Fade & Scale) باستخدام أصناف CSS (hiding, hide) لتحسين تجربة المستخدم.

تصميم متجاوب (Responsive): باستخدام Media Queries وFlex/Grid ليعمل الموقع بكفاءة على الشاشات الصغيرة والكبيرة.

قائمة تنقل تفاعلية:

نسخة للـ Desktop مع قوائم منسدلة متعددة المستويات.

نسخة Mobile (Sidebar) قابلة للفتح والإغلاق بزر التبديل (Hamburger Menu).

زر الصعود للأعلى: يظهر عند النزول أسفل الصفحة ويعيد المستخدم إلى الأعلى بسلاسة.

تفاصيل الكود:

HTML5: لتقسيم الهيكل الرئيسي (Header, Main, Sections, Footer).

CSS3: لتصميم الشبكة، القوائم المنسدلة، الأنيميشن، والتجاوب مع مختلف الشاشات.

Vanilla JavaScript:

التحكم بالفلترة باستخدام querySelectorAll, classList ودوال مثل forEach() وsetTimeout() لإدارة التأثيرات.

إدارة القوائم الجانبية Dropdown في نسخة الموبايل.

إضافة زر الصعود للأعلى باستخدام scrollTo() مع behavior: "smooth".

مميزات قابلة للتطوير:

إضافة خاصية البحث النصي بجانب الفلترة.

دعم فلترة متعددة المعايير (Category + Price + Rating).

ربط الموقع بقاعدة بيانات أو API حقيقية لجلب المنتجات.