وصف الخدمة

تصميم وتطوير متجر إلكتروني احترافي باستخدام JavaScript و Local Storage

هل تحتاج إلى متجر إلكتروني بسيط واحترافي بدون الحاجة إلى قاعدة بيانات خارجية؟
أقدم لك تطبيق ويب ديناميكي بالكامل يعمل بتقنيات JavaScript, HTML, CSS مع تخزين البيانات باستخدام Local Storage، مما يجعله سريعًا وسهل الاستخدام

ملاحظات:
الخدمة تشمل تصميم صفحة واحدة

مميزات الخدمة

صفحة تسجيل المستخدم (User Registration Page)

-تمكّن المستخدم من إدخال الاسم، البريد الإلكتروني، كلمة المرور، وتأكيد كلمة المرور.
-يتم التحقق من صحة البيانات ومقارنتها مع البيانات المخزنة في Local Storage.
-زر إظهار/إخفاء كلمة المرور لمساعدة المستخدم على التأكد من صحة الإدخال.

الصفحة الرئيسية (Home Page)

- تحتوي على Navbar ديناميكي يضم (Home - Contact - About - اسم المستخدم - زر تسجيل الخروج).
-سلايدر صور متحرك (Photos Slider) يسمح بالتنقل بين الصور مع تأثيرات أنيميشن جذابة.
-عرض التصنيفات (Categories)، بحيث يمكن للمستخدم التنقل بين الفئات بسهولة لعرض المنتجات المرتبطة بكل فئة.
-عرض جميع المنتجات ببطاقات أنيقة (Product Cards)، وتحتوي كل بطاقة على:
-- صورة المنتج لعرضه بوضوح.
-- زر "View Details" لعرض تفاصيل المنتج بشكل كامل.
-- زر "Add to Cart" لإضافة المنتج إلى السلة بسرعة.
- Footer ثابت في أسفل الصفحة يحتوي على معلومات المتجر وروابط مهمة.
-جميع البيانات (التصنيفات + المنتجات) يتم حفظها وإدارتها داخل Local Storage.

صفحة تفاصيل المنتج (Product Details Page)

- تعرض معلومات المنتج بشكل واضح وجذاب، بما في ذلك:
-- الصورة والسعر والكمية المتاحة والتصنيف(Category)
- يمكن للمستخدم تحديد الكمية المطلوبة قبل إضافتها إلى السلة.
- عند إدخال كمية غير صحيحة أو أكبر من المتوفر في Local Storage، يظهر تنبيه مخصص (Custom Alert) لتنبيه المستخدم.
- تحتوي الصفحة أيضًا على Navbar و Footer للحفاظ على تناسق التصميم.

صفحة السلة (Cart Page):

- تعرض جميع المنتجات التي قام المستخدم بإضافتها إلى السلة مع التفاصيل التالية:
-- اسم المنتج
-- السعر
-- الكمية المحددة
-- إجمالي السعر لكل منتج
- حساب المبلغ الإجمالي (Total Amount) لجميع المنتجات داخل السلة.
- إمكانية تعديل الكمية لكل منتج داخل السلة.
- إمكانية حذف منتج معين أو حذف جميع المنتجات دفعة واحدة.
- عند محاولة إتمام عملية الشراء بدون تسجيل الدخول، يظهر تنبيه مخصص (Custom Alert) يخبر المستخدم بضرورة تسجيل الدخول أولًا.

صفحة الطلب (Order Page)

-عند إتمام الطلب بنجاح، تظهر رسالة "Order Shipped" لتأكيد عملية الشراء.
- تساعد هذه الصفحة المستخدم على معرفة حالة الطلب بعد إتمامه.

كود نظيف ومنظم لسهولة التعديل والتطوير لاحقًا.

كتابة كود واضح، سهل القراءة، وقابل للتعديل والتطوير لاحقًا.

تنبيهات مخصصة (Custom Alerts) لتحسين تجربة المستخدم.

- تحسين تجربة المستخدم عبر عرض تنبيهات ذكية عند حدوث أي خطأ مثل:
-- إدخال بيانات خاطئة أثناء التسجيل.
-- طلب كمية غير متاحة من المنتج.
-- محاولة إتمام الشراء دون تسجيل الدخول.

ما الذي ستستلمه

ملفات المشروع الكاملة تحتوي على:

ملفات HTML, CSS, JavaScript مع كود نظيف ومنظم.
تصميم متجاوب (Responsive Design) يعمل على جميع الأجهزة.
تخزين البيانات في Local Storage بحيث تبقى المنتجات والسلة محفوظة بعد تحديث الصفحة وهى تكون بديلا عن قاعدة البيانات
تنبيهات مخصصة (Custom Alerts) لتحسين تجربة المستخدم.
كود قابل للتعديل والتطوير بسهولة مع تعليقات توضيحية لشرح الأجزاء المهمة.

الدعم الفني بعد التسليم:

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