محل بيع الاحذيه

هذا المشروع هو متجر إلكتروني متكامل لبيع وشراء الأحذية مبني من الصفر باستخدام HTML، Tailwind CSS وجافاسكربت بسيط. فيما يلي وصفٌ دقيقٌ لكل مكوٍّّن ووظيفته:

شريط التنقل (Navbar)

يحتوي على اسم المتجر “ShoeMart” قابل للنقر للعودة للصفحة الرئيسية.

روابط سريعة لأقسام “المنتجات”، “تواصل معنا”، وعربة التسوق التي تعرض عدد المنتجات الحالية.

تصميمه بسيط وواضح مع ظل خفيف لخلفية بيضاء، ما يضمن ظهورًا احترافيًّا عند تحميل الصفحة.

شبكة عرض المنتجات (Products Grid)

قسم رئيسي يحمل معرف #products وعنوان “أفضل الأحذية”.

يُعرَض فيه جميع المنتجات على شكل بطاقات (Cards) في شبكة مرنة تستجيب لأحجام الشاشات (من عمود واحد على الهواتف إلى أربعة أعمدة على الشاشات الكبيرة).

كل بطاقة تضم:

صورة للحذاء (عنصر <img> بمقاس ثابت وبحواف مدورة).

اسم المنتج كعنوان بخط واضح.

السعر بالريال.

زر “أضف للعربة” بلون أخضر لافت.

عربة التسوق (Cart Modal)

مكون مخفي افتراضيًّا (display: none)، يظهر كنافذة عائمة فوق الصفحة عند الضغط على زر العربة.

خلفية سوداء شفافة تمتد على كامل الشاشة، مع صندوق أبيض مستدير الحواف في المنتصف.

يعرض:

عنوان “عربة التسوق”

قائمة بالعناصر المضافة (اسم المنتج + الكمية).

المجموع الكلي للطلب بالريال.

زر “إغلاق” لإخفاء النافذة.

البرمجة (JavaScript)

مصدر البيانات: مصفوفة products تضم كائنات لكل منتج (معرّف، اسم، سعر، رابط صورة).

دالة renderProducts(): تنشئ DOM ديناميكيًا لبطاقات المنتجات داخل العنصر ذي المعرف product-list.

دالة addToCart(id): تضيف العنصر المحدّد إلى مصفوفة cart أو تزيد الكمية إذا كانت موجودة مسبقًا.

دالة updateCartUI(): تحدّث عدد العناصر المعروض بجانب زر العربة، وتبني قائمة المشتريات والمجموع الكلي في النافذة.

إدارة العرض والإخفاء: روابط الحدث (Event Listeners) لفتح وإغلاق النافذة.

التصميم والاستجابة (Responsive Design)

استخدام Tailwind CSS لتسهيل كتابة الأصناف (classes) وزيادة إنتاجية التصميم.

تصميم مرن:

شبكة المنتجات تتكيف من عمود واحد إلى أربعة أعمدة حسب العرض.

النوافذ والصناديق تستخدم container, mx-auto, و flex لتحقيق التمركز والمساحات المتناسقة.

التوسعة المستقبلية

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

إضافة صفحات تفصيلية لكل منتج.

دمج بوابات الدفع الإلكتروني وخيارات تسجيل دخول المستخدم.

تحسينات بصرية: مؤثرات انتقال (transitions)، رسوم متحركة خفيفة، وفلتر للبحث والفرز.