مشروع عميل · تجارة إلكترونية

Bs Wash

طوّرنا لشركة Bs Wash التي تنتج مواد غسيل السيارات والعناية بها في غيرسون متجراً إلكترونياً للبيع بالتجزئة والجملة ولوحة إدارة له. تتصدر منتجات الشركة كل القوائم، وتُباع العلامات الاحترافية الأخرى إلى جانبها. تُحسب أجرة الشحن من مجموع اللترات في السلة، وكل 3000 ليرة تركية من المشتريات تمنح فرصة لتدوير عجلة الهدايا. تُولَّد الصفحات بلغة HTML عادية، وتظهر تغييرات الأسعار في الموقع دون انتظار النشر.

  • JavaScript (وحدات ES)
  • صفحات HTML مُولَّدة مسبقاً عبر Node.js
  • Netlify Functions وNetlify Blobs
  • iyzico
  • Sürat Kargo
  • الفوترة الإلكترونية عبر MySoft
  • Resend / Brevo
  • Google Analytics 4 وSearch Console وGoogle Ads
  • WebAudio (أصوات العجلة)
  • اختبارات شاملة عبر Playwright
الصفحة الرئيسية للمتجر
الصفحة الرئيسية للمتجر
المنتجات
منتجات Bs Wash وعلامات احترافية
الدفع
بالبطاقة (iyzico) والتحويل البنكي
الشحن
Sürat Kargo، والأجرة حسب لترات السلة
الهدية
فرصة تدوير لكل 3000 ليرة

التُقطت لقطات الشاشة من نسخة محلية للموقع. أسماء العملاء والطلبات وتجار الجملة وأرقام اللوحة بيانات تجريبية، أما المنتجات والأسعار فمن كتالوج المتجر.

01

متجر يقدّم منتجاته أولاً

تتصدر منتجات Bs Wash كل القوائم، وتُباع العلامات الاحترافية الأخرى إلى جانبها. كل حجم منتج مستقل في اللوحة، ويظهر في الموقع ضمن بطاقة واحدة بأزرار الأحجام.

  • لكل حجم صوره وسعره؛ عند اختيار الحجم تتحول البطاقة إلى ذلك المنتج، وفي صفحة المنتج ترتبط الأحجام بصفحاتها
  • رسم تلقائي للعبوة بألوان العلامة لمنتجات Bs Wash التي لم تُصوَّر بعد
  • فلاتر حسب الفئة والعلامة، وبحث وترتيب
  • عبارة «اتصل لمعرفة السعر» للمنتجات التي لا سعر لها
  • «اشترِ الآن»: طلب سريع بخطوة واحدة دون حساب
  • عدّاد للشحن في اليوم نفسه: الطلبات حتى الساعة 14:00 في أيام الأسبوع و12:00 يوم السبت تُشحن في اليوم نفسه
  • زر دعم في الزاوية السفلية يضيف اسم المنتج إلى الرسالة الجاهزة في صفحة المنتج
  • صفحة «من نحن» تفاعلية: عدّادات، وخط زمني، وبطاقات ISO تنقلب
المنتجات والفلاتر
المنتجات والفلاتر
صفحة المنتج وخيارات الحجم
صفحة المنتج وخيارات الحجم
المتجر على الهاتف
المتجر على الهاتف
02

شحن حسب اللتر، ودفع بالبطاقة والتحويل

أجرة الشحن غير مشمولة في الأسعار؛ تُحسب من مجموع لترات المنتجات في السلة وتُضاف إلى الطلب، ويعيد الخادم حساب المبلغ دائماً.

  • قاعدة الشحن تُعدَّل من اللوحة: طرد صغير حتى 5 لترات، وطرد كبير لكل 20 لتراً كاملة، وطرد صغير أو كبير للباقي حسب القاعدة
  • تعرض السلة أجرة الشحن وطريقة حسابها، وتلميح «أضف X ليرة» لعجلة الهدايا مع شريط يمتلئ
  • الدفع بالبطاقة عبر صفحة iyzico، مع مطابقة المبلغ ورقم الطلب والنتيجة لدى iyzico
  • التحويل البنكي: البنك وصاحب الحساب ورقم IBAN قابل للنسخ، ورقم الطلب في الوصف
  • لكل طلب صفحة خاصة برابط سري: خطوات متحركة برموز تعبيرية، ورقم التتبع وحركات الشحنة
  • إذا فشل الدفع تتيح صفحة الطلب المحاولة بالبطاقة مجدداً أو التحويل إلى الدفع البنكي
  • رسائل بريد للطلب وتأكيد الدفع والشحن والتسليم
السلة: الشحن حسب اللتر وتلميح العجلة
السلة: الشحن حسب اللتر وتلميح العجلة
صفحة الطلب وخطواته
صفحة الطلب وخطواته
03

عجلة الهدايا

في طلبات التجزئة تمنح كل 3000 ليرة من المنتجات فرصة تدوير واحدة. يحدد المتجر الهدايا، ويدوّر العميل العجلة في صفحة طلبه.

  • تُفتح الفرصة عند تأكيد الدفع: فوراً بالبطاقة عبر iyzico، وفي التحويل البنكي بعد أن يؤكد المتجر وصول المبلغ
  • يختار الخادم الهدية، ولا يمكن استخدام الفرصة نفسها مرتين
  • تُدار العجلة بالسحب أو بالزر الأوسط، مع أضواء وأصوات وقصاصات احتفالية في بطاقة النتيجة
  • إذا دُوّرت العجلة قبل خروج الطرد تُرسل الهدية في الصندوق نفسه، وإلا فمع الطلب التالي
  • تذكير في زاوية الموقع لمن لديه فرص، وفي اللوحة قائمة بالهدايا وعلامة «أُرسلت الهدية»
عجلة الهدايا في صفحة الطلب
عجلة الهدايا في صفحة الطلب
04

حسابات العملاء وتجار الجملة

في الموقع نوعان من الدخول: عملاء التجزئة وتجار الجملة. بعد الموافقة على طلب الجملة في اللوحة يرى التاجر أسعاره المخفضة في الموقع.

  • دخول العملاء والتسجيل في شاشة واحدة، ورمز من 6 أرقام بالبريد عند نسيان كلمة المرور
  • حسابي: الطلبات، وخطوات الشحن، ورقم التتبع، وفرص العجلة، وبيانات التسليم المحفوظة
  • طلب الانضمام للجملة: الشركة والبيانات الضريبية والحاجة الشهرية
  • خصم عام لتاجر الجملة، وخصم منفصل على منتجات Bs Wash، وحد أدنى لقيمة الطلب
  • يرى التاجر بعد الدخول كل الأسعار مخفضة، ويحسب الخادم مبلغ الطلب دائماً
حسابي: الطلبات وخطوات الشحن
حسابي: الطلبات وخطوات الشحن
دخول العملاء وتجار الجملة
دخول العملاء وتجار الجملة
حساب تاجر الجملة والخصومات
حساب تاجر الجملة والخصومات
05

لوحة الإدارة

يدير المتجر كل أعماله من لوحة واحدة، وتجتمع في تفاصيل الطلب تأكيد الدفع وإبلاغ الشحنة والفاتورة الإلكترونية.

  • الملخص: الطلبات المنتظرة، وطلبات اليوم، وإيرادات آخر 30 يوماً، وطلبات الوكلاء، والمنتجات الناقصة صوراً أو أسعاراً
  • الطلبات: فلاتر الحالة والبحث، وفي التفاصيل «وصل المبلغ، أكّد» وأزرار WhatsApp والاتصال وإرسال رابط الطلب
  • المنتجات: كل حجم في سطر مع وسم العائلة، وعدّاد للصور، واختيار الصورة الرئيسية، والبحث عن الصور في موقع العلامة
  • اللافتات وتجار الجملة والعملاء والتقارير في تبويبات منفصلة، مع تقارير Google Analytics وSearch Console وGoogle Ads
  • تصل تغييرات الأسعار إلى الموقع دون نشر، وزر «انشر» يعيد توليد الصفحات
ملخص اللوحة
ملخص اللوحة
الطلبات
الطلبات
تفاصيل الطلب: الدفع والشحن والفاتورة
تفاصيل الطلب: الدفع والشحن والفاتورة
المنتجات
المنتجات
06

الشحن والفوترة الإلكترونية وتكاملات أخرى

تعمل التكاملات على الخادم، وتُدخل المفاتيح السرية في اللوحة مرة واحدة ولا تُعاد إلى المتصفح.

  • Sürat Kargo: إبلاغ الشحنة بزر «أرسل إلى Sürat»، والاستعلام عن الحالة، ويصبح الطلب «قيد الشحن» تلقائياً عند وصول رقم التتبع
  • الفاتورة الإلكترونية عبر MySoft: فاتورة إلكترونية إن كان المشتري مسجلاً لها وإلا أرشيف إلكتروني، وملف PDF من اللوحة
  • الدفع بالبطاقة عبر iyzico، ورسائل الطلبات عبر Resend أو Brevo
  • قاعدة الشحن وعجلة الهدايا وبيانات التحويل وشريط الإعلانات تُعدَّل من اللوحة
  • الموافقة على طلبات الجملة وتحديد خصوماتها
إعداد الشحن: الأجرة حسب اللتر
إعداد الشحن: الأجرة حسب اللتر
إعداد عجلة الهدايا
إعداد عجلة الهدايا
طلب جملة والخصومات
طلب جملة والخصومات

هل تفكر في مشروع مشابه؟

حدّثنا عن حاجتك؛ نحدد النطاق والمدة والتكلفة معاً. الاستشارة الأولى مجانية.

حدّثنا عن مشروعك