1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة عرض واستكشاف للقراءة فقط مع نقاط انتقال تفاعلية (Read-Only Storefront Discovery Hub)
تمثل نقطة الانطلاق الرئيسية لعملاء الجملة (B2B) لاستكشاف القطاعات التجارية المعتمدة، العروض الموسمية، العلامات التجارية، والأصناف الأكثر طلباً، مع شريط بحث ذكي فوري وتبديل لحظي للغة (AR/EN) والوضع اللوني (فاتح/داكن).
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: زائر عام (بدون تسجيل دخول)، مشتري، مدير مشتريات، مالك منشأة
الصلاحيات والقيود: عام لجميع الزوار لاستعراض البلوكات والقطاعات؛ يتطلب تسجيل الدخول بحساب منشأة نشطة لإضافة الأصناف إلى السلة أو عرض الأسعار التعاقدية الخاصة
المتطلبات المسبقة: وجود إصدار منشور (Published Version) من باني الصفحة الرئيسية للموقع أو تفعيل العرض الافتراضي الآمن للكتالوج
مسار التنقل الفعلي: الدخول المباشر عبر الرابط الرئيسي https://antlaqasahm.sa/ أو الضغط على شعار «انطلاقة سهم» في الشريط العلوي (/)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| الشريط العلوي الموحد (Global Header) |
أعلى الشاشة (ثابت) |
شعار انطلاقة سهم، روابط التنقل (الرئيسية، المنتجات، التصنيفات، العلامات التجارية، المدونة، الأسئلة الشائعة)، شريط البحث الفوري، مبدل اللغة (EN/AR)، مبدل المظهر (فاتح/داكن)، أيقونة السلة المصغرة، وزر تسجيل الدخول / بوابة العميل. |
| شريط التنبيه الترويجي والبانر الرئيسي (Promo Strip & Hero Banner) |
القسم العلوي تحت الترويسة |
رسائل التوريد المعتمدة للجملة، البانر الترويجي الرئيسي من باني الصفحة الرئيسية مع أزرار الدعوة للإجراء (CTA) لتصفح الكتالوج أو الانضمام كمنشأة. |
| شبكة القطاعات والتصنيفات المعتمدة (Featured Categories Grid) |
وسط الصفحة |
بطاقات التصنيفات الرئيسية مع عدد الأصناف المؤهلة للطلب بالجملة في كل قطاع. |
| حلقات عرض المنتجات والعلامات التجارية (Product Carousels & Brands) |
القسم السفلي وتذييل الصفحة (Footer) |
بطاقات المنتجات المميزة (توضح الكود SKU والحد الأدنى للطلب MOQ والسعر بالريال)، شعارات العلامات التجارية، وتذييل الصفحة الذي يضم الروابط القانونية وبيانات التواصل. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
حقل البحث السريع في الترويسة (q) |
نصي — اختياري |
يقبل اسم المنتج بالعربية أو الإنجليزية، رمز الصنف (SKU)، أو رقم الباركود (GTIN من 8 إلى 14 رقماً). |
مثال صحيح: SKU-1001 أو أرز بسمتي. عند الإرسال الفارغ ينقل المستخدم لصفحة البحث الشامل /search. |
يوجه المتصفح إلى /search?q=... لعرض الأصناف المطابقة دون أي تعديل على قاعدة البيانات. |
مبدل اللغة (Locale Switcher) |
زر تبديل سياقي |
يبدل بين العربية (RTL على المسار /) والإنجليزية (LTR على المسار /en). |
لا يتطلب إدخالاً؛ يحافظ على سياق التصفح الحالي. |
يحدّث لغة العرض واتجاه الصفحة في الجلسة والرابط. |
مبدل المظهر (Theme Toggle) |
زر تبديل بصري |
يبدل بين الوضع الفاتح (light) والوضع الداكن (dark). |
يحفظ التفضيل في متصفح المستخدم (localStorage). |
يطبق رموز الألوان المعتمدة فوراً دون إعادة تحميل الخادم. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| زر «تصفح كتالوج الجملة» (Hero CTA) |
جميع الزوار والمشترين |
انتقال مباشر بدون نافذة تأكيد |
ينقل المستخدم إلى صفحة كتالوج المنتجات الكامل /products. |
| بطاقة تصنيف أو علامة تجارية |
جميع الزوار والمشترين |
انتقال مباشر |
يفتح صفحة التصنيف /categories/{slug} أو العلامة /brands/{slug} مفلترة بالأصناف التابعة لها. |
| أيقونة «السلة المصغرة» (Mini-Cart Drawer Trigger) |
المشتري المسجل دخوله |
فتح فوري للدرج الجانبي |
يعرض محتويات سلة المنشأة النشطة مع إمكانية تعديل الكميات أو الانتقال لإرسال طلب شراء (RFQ). |
- افتح الرابط الرئيسي
https://antlaqasahm.sa/ بالوضع العربي (RTL) وتأكد من ظهور الشريط العلوي والبانر الرئيسي.
- استعرض البلوكات المنشورة من باني الصفحة الرئيسية (القطاعات التجارية، العروض الموسمية، والمنتجات المميزة).
- استخدم شريط البحث العلوي للبحث الفوري بالاسم أو رمز
SKU أو الباركود، أو اضغط على أحد القطاعات للانتقال إلى أصنافه.
- اضغط على زر «تسجيل الدخول» في أعلى اليسار للانتقال إلى
/login عند الرغبة في الشراء باسم المنشأة.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة عرض للقراءة فقط (Read-Only): تصفح الصفحة الرئيسية لا يجري أي كتابة في قاعدة البيانات الخلفية، وتُجلب البلوكات من الإصدار المنشور المعتمد في جدول homepage_versions مع تخزين تفضيل الوضع اللوني محلياً في المتصفح.
حالات الشاشة (States): حالة التحميل: تظهر هياكل البطاقات المتطابقة هندسياً (Skeletons)؛ حالة الفراغ: عند عدم وجود إصدار منشور يعرض النظام واجهة الكتالوج الافتراضية الآمنة؛ حالة الخطأ: لا تكسر الصفحة أي بلوك غير مكتمل بفضل الحماية المسبقة في المحرك.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يدخل المشتري [email protected] إلى /، فيشاهد بانر عروض التوريد الغذائية لشهر أكتوبر، ويضغط على قطاع «الزيوت والسمن التجاري» للانتقال مباشرة إلى الأصناف المتاحة بالحد الأدنى للطلب (MOQ).
استكشاف الأخطاء: إذا لم يظهر تعديل جديد أجراه فريق التسويق على البانر الرئيسي، تحقق في /admin/website-homepage-builder من الضغط على «نشر الإصدار (Publish)» وليس «حفظ كمسودة» فقط.
الصفحة الرئيسية للمتجر العام (النسخة العربية RTL) (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Public Storefront Homepage (Arabic RTL — StorefrontHomepageController) (AR / light) | Route: / | Journey: DISC-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة عرض واستكشاف للقراءة فقط باتجاه من اليسار لليمين (Read-Only LTR Storefront)
تقدم تجربة المتجر العام الكاملة باللغة الإنجليزية وباتجاه LTR متناظر لفرق المشتريات متعددة الجنسيات، مع روابط قانونية (Canonical وHreflang) متوافقة مع محركات البحث.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: زائر عام، مشتري، مدير مشتريات، مالك منشأة
الصلاحيات والقيود: عام لجميع الزوار بدون تسجيل دخول
المتطلبات المسبقة: توفر المحتوى الإنجليزي المترجم للبلوكات والتصنيفات في باني الصفحة الرئيسية
مسار التنقل الفعلي: الضغط على زر «English» في الشريط العلوي من الصفحة الرئيسية أو فتح المسار /en مباشرة (/en)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| ترويسة المتجر باتجاه LTR |
أعلى الشاشة |
الشعار في أقصى اليسار، قائمة التنقل الإنجليزية (Products, Categories, Brands, Blog, FAQ)، ومبدل العودة للعربية في أقصى اليمين. |
| بانر العروض والقطاعات بالإنجليزية |
وسط الصفحة |
العناوين والأوصاف الإنجليزية المعتمدة للقطاعات والمنتجات مع العملة الموحدة (SAR). |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
حقل البحث الإنجليزي (q) |
نصي — اختياري |
يبحث في الأسماء الإنجليزية والعربية وأكواد SKU والباركود. |
مثال صحيح: Basmati Rice أو SKU-1001. |
ينقل المستخدم إلى /en/search?q=.... |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| زر «العربية» (Locale Switcher) |
جميع المستخدمين |
فوري |
يعيد توجيه الواجهة إلى النسخة العربية / باتجاه RTL. |
| زر «Sign In» |
جميع المستخدمين |
فوري |
يفتح بوابة الدخول الإنجليزية /en/login. |
- اضغط على مبدل اللغة «English» في الشريط العلوي للتحول إلى المسار
/en.
- تحقق من انعكاس اتجاه الشبكة والمحاذاة إلى
LTR وظهور ترجمات القطاعات والأصناف.
- استخدم شريط البحث أو روابط القوائم لتصفح الكتالوج باللغة الإنجليزية.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة قراءة فقط (Read-Only): لا تعدل أي سجل في قاعدة البيانات؛ يتم فقط تحديث لغة الجلسة (locale = en) ومسار الرابط.
حالات الشاشة (States): تدعم الوضعين الفاتح والداكن بالكامل مع سقوط آمن للنص الافتراضي في حال غياب ترجمة فرعية.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يفتح مسؤول مشتريات يتحدث الإنجليزية المسار /en، فيستعرض القطاعات باللغة الإنجليزية مع بقاء الأسعار بالريال السعودي (SAR) وشروط MOQ الموحدة.
استكشاف الأخطاء: في حال ظهور عنوان بلوك باللغة العربية داخل /en، يقوم مدير المحتوى بإضافة النص الإنجليزي للبلوك من /admin/website-homepage-builder.
الصفحة الرئيسية للمتجر العام (النسخة الإنجليزية LTR) (الواجهة الإنجليزية (EN LTR) / الوضع الفاتح (Light Mode)) — Public Storefront Homepage (English LTR — /en) (EN / light) | Route: /en | Journey: DISC-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة تصفح وفلترة للقراءة فقط مع أزرار إضافة سريعة للسلة (Catalog Listing & Faceted Filter View)
تتيح للمشترين استعراض جميع أصناف الجملة المتاحة في المنصة مع أدوات تصفية دقيقة حسب التصنيف، العلامة التجارية، حالة التوفر في المخزون، والترتيب حسب السعر أو الأحدث، مع عرض الكود التجاري (SKU) والحد الأدنى للطلب (MOQ) على كل بطاقة.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: زائر عام، مشتري، مدير مشتريات، مالك منشأة
الصلاحيات والقيود: عام للتصفح والفلترة؛ يتطلب تسجيل الدخول لإضافة المنتجات للسلة
المتطلبات المسبقة: وجود منتجات منشورة (status = active) ومربوطة بأرصدة وأسعار نظام ABC
مسار التنقل الفعلي: الشريط العلوي ← الضغط على «المنتجات (Products)» أو الانتقال إلى /products (/products)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| شريط عنوان الكتالوج وعداد النتائج |
أعلى منطقة المحتوى |
عنوان «كتالوج منتجات الجملة»، إجمالي عدد الأصناف المطابقة للفلاتر، وقائمة الترتيب المنسدلة. |
| لوحة الفلاتر الجانبية (Faceted Filters Sidebar) |
الجانب الأيمن في RTL |
فلتر البحث النصي، قائمة التصنيفات التجارية، قائمة العلامات التجارية، نطاق السعر، وخيار «المتوفر في المخزون فقط». |
| شبكة بطاقات المنتجات (Product Cards Grid) |
منطقة العرض الوسطى واليسرى |
بطاقات المنتجات وتشمل: صورة الصنف، شارة التوفر، اسم المنتج، رمز SKU، حجم العبوة والحد الأدنى للطلب (MOQ)، السعر الأساسي بالريال، وزر عرض التفاصيل / الإضافة للسلة. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
فلتر التصنيف (category) |
قائمة اختيار / رابط فلترة |
يقبل المعرف النصي (slug) للتصنيف المعتمد. |
عند اختيار تصنيف غير موجود يتم تجاهله وعرض الكتالوج الكامل. |
يحدّث رابط الصفحة /products?category=... ويعيد عرض الأصناف التابعة للتصنيف. |
فلتر العلامة التجارية (brand) |
قائمة اختيار |
يقبل المعرف النصي (slug) للعلامة التجارية. |
يدعم الجمع مع فلتر التصنيف والبحث. |
يقصر النتائج على منتجات العلامة التجارية المختارة. |
الترتيب (sort) |
قائمة منسدلة |
القيم المدعومة: الأحدث (newest)، السعر من الأقل للأعلى (price_asc)، السعر من الأعلى للأقل (price_desc)، الاسم (name_asc). |
قيمة افتراضية آمنة عند عدم التحديد. |
يعيد ترتيب بطاقات المنتجات المعروضة فوراً. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| زر «تطبيق الفلاتر» / اختيار فلتر |
جميع الزوار والمشترين |
فوري |
تحديث قائمة المنتجات المعروضة ورابط الصفحة بمعاملات الفلترة. |
| زر «إعادة تعيين الفلاتر» (Reset Filters) |
جميع الزوار والمشترين |
فوري |
يمسح جميع الفلاتر ويعيد عرض الكتالوج الكامل على /products. |
| الضغط على بطاقة المنتج / «عرض التفاصيل» |
جميع الزوار والمشترين |
انتقال مباشر |
ينقل المستخدم إلى صفحة تفاصيل المنتج وشرائح الأسعار /products/{slug}. |
- انتقل إلى
/products من القائمة العلوية لاستعراض كتالوج أصناف الجملة.
- من لوحة الفلاتر الجانبية، حدد التصنيف المطلوب أو العلامة التجارية أو فعّل خيار «المتوفر في المخزون فقط».
- راجع بطاقات المنتجات المطابقة وتحقق من رمز
SKU والحد الأدنى للطلب (MOQ) والسعر لكل وحدة.
- اضغط على اسم المنتج أو صورته للانتقال إلى صفحة تفاصيله واستعراض جدول شرائح الخصم الكمي.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة تصفح للقراءة فقط (Read-Only): الفلترة والترتيب لا تكتب أي بيانات في قاعدة البيانات؛ تُحفظ معاملات التصفية في عنوان الرابط (Query String) بحيث يمكن مشاركة الرابط المفلتر مع أعضاء فريق المشتريات.
حالات الشاشة (States): حالة الفراغ: عند عدم تطابق أي صنف مع الفلاتر المختارة تظهر رسالة «لا توجد منتجات مطابقة لمعايير البحث الحالية» مع زر مسح الفلاتر؛ حالة نفاد المخزون: تظهر شارة «غير متوفر حالياً» بناءً على رصيد ABC الفعلي.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يفتح المشتري [email protected] صفحة /products، ويختار تصنيف «المعلبات والمواد الغذائية» مع ترتيب price_asc، فيحصل فوراً على الأصناف المتوفرة مرتبة من الأقل سعراً مع وضوح MOQ لكل صنف.
استكشاف الأخطاء: إذا ظهر صنف بشارة «غير متوفر»، فهذا يعكس الرصيد الكمي الفعلي (stock = 0) الوارد من نظام الشركة ABC ولا يمكن إضافته للسلة حتى ورود دفعة تحديث مخزون جديدة.
كتالوج منتجات الجملة والفلترة المتقدمة (PLP — العربية RTL) (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Wholesale Product Listing Page (PLP — /products) (AR / light) | Route: /products | Journey: DISC-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة تصفح وفلترة للقراءة فقط باتجاه LTR (Read-Only English Catalog Listing)
تمكّن المشترين الناطقين بالإنجليزية من تصفح كتالوج الجملة واستخدام الفلاتر القطاعية والعلامات التجارية في تخطيط LTR متكامل.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: زائر عام، مشتري، مدير مشتريات، مالك منشأة
الصلاحيات والقيود: عام للتصفح والفلترة
المتطلبات المسبقة: توفر المنتجات المنشورة وترجماتها الإنجليزية
مسار التنقل الفعلي: الشريط العلوي في النسخة الإنجليزية ← الضغط على «Products» (/en/products) (/en/products)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| لوحة الفلاتر اليسرى (Left Filter Sidebar) |
الجانب الأيسر في LTR |
فلاتر Category وBrand وAvailability باللغة الإنجليزية. |
| شبكة بطاقات المنتجات (Right Product Grid) |
الجانب الأيمن في LTR |
بطاقات المنتجات بالأسماء الإنجليزية ورموز SKU وشروط MOQ وأسعار SAR. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
| Category / Brand / Sort Filters |
عناصر تصفية في الرابط |
تعمل بنفس قواعد النسخة العربية مع عرض التسميات الإنجليزية. |
تجاهل آمن للقيم غير المعرفة. |
تحديث القائمة المعروضة في /en/products. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| Apply / Reset Filters |
جميع الزوار والمشترين |
فوري |
تصفية أو إعادة ضبط قائمة المنتجات بالإنجليزية. |
- افتح
/en/products لاستعراض الكتالوج باللغة الإنجليزية.
- استخدم الفلاتر الجانبية على اليسار لتحديد القطاع أو العلامة التجارية.
- اضغط على أي منتج لفتح صفحة تفاصيله الإنجليزية
/en/products/{slug}.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة قراءة فقط (Read-Only): التصفية والترتيب تنعكس في عنوان الرابط فقط ولا تعدل قاعدة البيانات.
حالات الشاشة (States): تدعم حالات التحميل والفراغ والوضعين الفاتح والداكن بتخطيط LTR سليم.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يستخدم فريق المشتريات الأجنبي المسار /en/products لمراجعة أسعار الجملة بالريال السعودي ومقارنة عبوات التوريد.
استكشاف الأخطاء: لتغيير اللغة إلى العربية مع البقاء في نفس صفحة الكتالوج، اضغط على زر «العربية» في أعلى الصفحة.
كتالوج منتجات الجملة والفلترة المتقدمة (PLP — الإنجليزية LTR) (الواجهة الإنجليزية (EN LTR) / الوضع الفاتح (Light Mode)) — Wholesale Product Listing Page (English LTR — /en/products) (EN / light) | Route: /en/products | Journey: DISC-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة تفصيلية تفاعلية مع نموذج اختيار الكمية والإضافة للسلة (Interactive Product Detail & Tier Selector)
تعرض البطاقة الفنية والتجارية الكاملة للصنف، بما يشمل معرض الصور عالية الدقة، رمز SKU، الباركود GTIN، حالة التوفر من مستودعات ABC، الحد الأدنى للطلب (MOQ)، مضاعفات العبوة (Pack Size)، وجدول شرائح الخصم الكمي (Volume Tiers) مع إمكانية الإضافة المباشرة إلى سلة المنشأة.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: زائر عام (استعراض)، مشتري / مدير مشتريات / مالك منشأة (إضافة للسلة وحفظ في القوائم)
الصلاحيات والقيود: عام لعرض المواصفات والأسعار العامة؛ يتطلب حساب منشأة نشطة لإضافة الصنف إلى السلة
المتطلبات المسبقة: صنف منشور ومربوط ببيانات ABC التجارية (السعر الأساسي، الرصيد، العبوة، وشرائح الكميات)
مسار التنقل الفعلي: كتالوج المنتجات /products أو نتائج البحث ← الضغط على بطاقة المنتج (/products/{slug})
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| مسار التصفح التسلسلي (Breadcrumbs) |
أعلى الصفحة |
الرئيسية ← التصنيف الرئيسي ← التصنيف الفرعي ← اسم المنتج الحالي. |
| معرض صور المنتج (Product Media Gallery) |
الجانب الأيمن (في RTL) |
الصورة الرئيسية للصنف مع الصور المصغرة وشارات حالة التوفر والعلامة التجارية. |
| لوحة القرار التجاري وشرائح الأسعار (Commercial & Tier Box) |
الجانب الأيسر (في RTL) |
اسم الصنف، رمز SKU، الباركود، السعر للوحدة (غير شامل الضريبة + توضيح ضريبة القيمة المضافة 15%)، جدول شرائح الكميات، عداد الكمية المحكوم بـ MOQ ومضاعفات العبوة، وزر «إضافة إلى السلة». |
| تبويبات المواصفات الفنية والمنتجات ذات الصلة |
أسفل الصفحة |
الوصف التفصيلي، جدول المواصفات والوزن والتعبئة، والأصناف البديلة أو المكملة في نفس القطاع. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
حقل الكمية المطلوبة (quantity) |
عداد رقمي صحيح — إلزامي للإضافة للسلة |
يجب أن يكون أكبر من أو يساوي الحد الأدنى للطلب (MOQ) ومن مضاعفات حجم العبوة (pack_size)، وألا يتجاوز الرصيد المتاح في المخزون. |
مثال صحيح: إذا كان MOQ = 10 وحجم العبوة 5، يقبل 10، 15، 20. إذا أُدخلت 7 أو كمية أقل من MOQ تظهر رسالة تنبيه فورية ولا يتم الإرسال. |
يحسب السعر الفعلي للوحدة تلقائياً وفق شريحة الكمية المختارة ويجهز البند للإضافة إلى السلة. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
الضغط على شريحة كمية في جدول الشرائح (Volume Tier Row) |
جميع المستخدمين |
تحديث فوري في الواجهة |
يضبط حقل الكمية تلقائياً إلى الحد الأدنى لتلك الشريحة ويعرض السعر المخفض للوحدة. |
زر «إضافة إلى السلة» (Add to Cart) |
المشتري، مدير المشتريات، مالك المنشأة |
إشعار تأكيد علوي (Toast) وتحديث فوري لعداد السلة |
يحفظ البند في سلة المنشأة النشطة (carts / cart_items) بالسعر المحتسب. |
زر «حفظ في قائمة مشتريات» (Add to Saved List) |
المشتري، مدير المشتريات، مالك المنشأة |
اختيار القائمة من النافذة المنبثقة |
يضيف الصنف والكمية المحددة إلى قائمة التزويد الدورية للمنشأة. |
- افتح صفحة المنتج
/products/{slug} وراجع رمز SKU والباركود وحالة التوفر في المخزون.
- افحص جدول «شرائح أسعار الجملة حسب الكمية» لمعرفة نسبة التوفير عند زيادة الكمية.
- حدد الكمية المطلوبة باستخدام أزرار (
+ / -) أو بالضغط المباشر على الشريحة السعرية المستهدفة (مع مراعاة MOQ ومضاعفات العبوة).
- اضغط على زر «إضافة إلى السلة» وتحقق من ظهور إشعار التأكيد وتحديث عداد السلة المصغرة في أعلى الصفحة.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: استعراض الصفحة وتجربة الشرائح قراءة فقط؛ أما الضغط على «إضافة إلى السلة» لمستخدم مسجل فيحفظ البند فعلياً في قاعدة البيانات ضمن سلة المنشأة النشطة (business_id) ويظل محفوظاً بعد تحديث الصفحة أو فتح تطبيق الجوال.
حالات الشاشة (States): حالة نفاد المخزون: يُعطّل زر «إضافة إلى السلة» وتظهر شارة «غير متوفر حالياً في المخزون»؛ حالة الزائر غير المسجل: يوجّه المستخدم لتسجيل الدخول بحساب المنشأة لإتمام الإضافة.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يفتح [email protected] صفحة صنف «زيت طبخ نباتي 1.5 لتر × 6 عبوات» (MOQ = 10 كراتين)، فيختار شريحة 25+ كرتون بسعر 82.00 ر.س بدلاً من 88.00 ر.س، ويضغط «إضافة إلى السلة» ليُحفظ البند في سلة شركة الصفوة (CR 1010784512).
استكشاف الأخطاء: إذا رفض النظام الكمية المدخلة، راجع سطر «الحد الأدنى للطلب (MOQ) ومضاعفات العبوة» أسفل حقل الكمية واضبط الرقم ليكون من المضاعفات المعتمدة.
صفحة تفاصيل المنتج وشرائح أسعار الجملة (PDP — العربية RTL) (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Product Detail Page, MOQ & Volume Pricing Tiers (PDP — /products/{slug}) (AR / light) | Route: /products/{slug} | Journey: DISC-03
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة تفصيلية تفاعلية باتجاه LTR (Interactive English Product Detail Page)
تعرض مواصفات الصنف وجدول شرائح الكميات (Volume Pricing Tiers) والحد الأدنى للطلب (MOQ) باللغة الإنجليزية وباتجاه LTR مع نفس قواعد التسعير والمخزون الصارمة.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: زائر عام، مشتري، مدير مشتريات، مالك منشأة
الصلاحيات والقيود: عام للاستعراض؛ يتطلب تسجيل الدخول للإضافة للسلة
المتطلبات المسبقة: توفر ترجمة اسم ووصف الصنف باللغة الإنجليزية من إدارة الكتالوج
مسار التنقل الفعلي: كتالوج المنتجات الإنجليزي /en/products ← اختيار المنتج (/en/products/{slug})
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| معرض الصور الأيسر (Left Media Gallery) |
يسار الشاشة في LTR |
صور الصنف عالية الدقة وشارات الحالة بالإنجليزية. |
| لوحة الشرائح والطلب اليمنى (Right Buy Box) |
يمين الشاشة في LTR |
الاسم الإنجليزي، SKU، جدول الشرائح بالريال SAR، عداد الكمية، وزر Add to Cart. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
Quantity Stepper (quantity) |
عداد رقمي — إلزامي للإضافة |
يلتزم بنفس قواعد MOQ وPack Size والرصيد المتاح. |
تنبيه فوري باللغة الإنجليزية عند إدخال كمية غير متوافقة. |
يحدّث سعر الوحدة ويضيف الصنف لسلة المنشأة. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| Add to Cart |
المشتري المسجل دخوله |
إشعار Toast فوري |
إضافة الصنف إلى سلة المنشأة النشطة. |
- افتح
/en/products/{slug} لمراجعة المواصفات الإنجليزية للصنف.
- اختر شريحة الكمية المناسبة واضغط
Add to Cart لإضافة الصنف إلى سلة المنشأة.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: الإضافة للسلة تحفظ البند في نفس سلة المنشأة الموحدة في قاعدة البيانات سواء تمت من الواجهة العربية أو الإنجليزية.
حالات الشاشة (States): تطابق كامل في حالات التوفر ونفاد المخزون والوضع الفاتح/الداكن.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يستعرض مدير مشتريات غير ناطق بالعربية صفحة الصنف على /en/products/{slug} ويضيف 20 كرتوناً للسلة فتظهر فوراً لدى زملائه في المنشأة.
استكشاف الأخطاء: تأكد من اختيار المنشأة النشطة الصحيحة في الشريط العلوي قبل إضافة الأصناف للسلة.
صفحة تفاصيل المنتج وشرائح الأسعار (PDP — الإنجليزية LTR) (الواجهة الإنجليزية (EN LTR) / الوضع الفاتح (Light Mode)) — Product Detail Page (English LTR — /en/products/{slug}) (EN / light) | Route: /en/products/{slug} | Journey: DISC-03
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة دليل استكشافي للقراءة فقط (Read-Only Category Taxonomy Directory)
تنظم أصناف الجملة في قطاعات وتصنيفات رئيسية وفرعية واضحة، مما يمكّن المشتري من الوصول السريع إلى عائلة المنتجات المطلوبة لنشاط منشأته.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع الزوار والمشترين
الصلاحيات والقيود: عام بدون تسجيل دخول
المتطلبات المسبقة: وجود تصنيفات نشطة مرتبطة بالمنتجات في الكتالوج
مسار التنقل الفعلي: الشريط العلوي ← الضغط على «التصنيفات (Categories)» (/categories) (/categories)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| ترويسة دليل التصنيفات |
أعلى الصفحة |
عنوان «دليل التصنيفات والقطاعات التجارية» ووصف تنظيمي للمشترين. |
| شبكة بطاقات التصنيفات (Categories Cards Grid) |
وسط الصفحة |
بطاقات القطاعات وتشمل: أيقونة/صورة القطاع، الاسم العربي، الوصف المختصر، عدد المنتجات المتاحة، ورابط استعراض التصنيف. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
شريط البحث العلوي (q) |
نصي — اختياري |
يبحث في الكتالوج العام من أي صفحة. |
نفس قواعد البحث الموحد. |
ينقل إلى /search?q=.... |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| الضغط على بطاقة التصنيف («استعراض الأصناف») |
جميع الزوار والمشترين |
انتقال مباشر |
يفتح صفحة التصنيف التفصيلية /categories/{slug}. |
- افتح
/categories من القائمة العلوية لاستعراض جميع القطاعات التجارية المتاحة.
- راجع عدد الأصناف المدرجة تحت كل تصنيف رئيسي أو فرعي.
- اضغط على بطاقة التصنيف المطلوب للانتقال إلى قائمة منتجاته.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة عرض للقراءة فقط (Read-Only): لا تجري أي تعديل على قاعدة البيانات.
حالات الشاشة (States): حالة الفراغ: تعرض تنبيهاً واضحاً إذا لم تكن هناك تصنيفات منشورة؛ تدعم الوضعين الفاتح والداكن.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يفتح زائر جديد صفحة /categories للتعرف على القطاعات التي تغطيها منصة انطلاقة سهم قبل تسجيل منشأته.
استكشاف الأخطاء: إذا لم يظهر تصنيف جديد، تحقق من تفعيل خيار «منشور (Active)» للتصنيف في لوحة الإدارة /admin/catalog.
دليل القطاعات والتصنيفات التجارية (العربية RTL) (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Commercial Categories Directory (/categories) (AR / light) | Route: /categories | Journey: DISC-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة دليل استكشافي للقراءة فقط باتجاه LTR (Read-Only LTR Categories Directory)
تعرض دليل القطاعات والتصنيفات التجارية باللغة الإنجليزية وباتجاه LTR لتسهيل التصفح القطاعي لفرق المشتريات الناطقة بالإنجليزية.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع الزوار والمشترين
الصلاحيات والقيود: عام بدون تسجيل دخول
المتطلبات المسبقة: تصنيفات نشطة مع أسمائها الإنجليزية
مسار التنقل الفعلي: الشريط العلوي الإنجليزي ← الضغط على «Categories» (/en/categories) (/en/categories)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| شريط ترويسة السطح وسياق الجلسة (المتجر العام (SF) — هيكلة القطاعات بالإنجليزية) |
أعلى الشاشة |
يعرض عنوان الشاشة، مسار الوصول (/en/categories)، وحالة الجلسة أو المنشأة النشطة. |
| شبكة التصنيفات الإنجليزية |
وسط الصفحة |
بطاقات التصنيفات المترجمة مع عدد الأصناف في كل قطاع. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
Global Search Input (q) |
نصي — اختياري |
بحث فوري بالإنجليزية أو SKU. |
قياسي. |
ينقل إلى /en/search?q=.... |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| الضغط على بطاقة التصنيف (Browse Category) |
جميع الزوار |
انتقال مباشر |
يفتح /en/categories/{slug}. |
- انتقل إلى
/en/categories لاستعراض القطاعات باللغة الإنجليزية.
- اضغط على القطاع المطلوب لعرض منتجاته على
/en/categories/{slug}.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة قراءة فقط (Read-Only): لا تكتب أي بيانات في الخادم.
حالات الشاشة (States): متوافقة بالكامل مع تخطيط LTR والوضعين الفاتح والداكن.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يستعرض مدير مشتريات دولي القطاعات عبر /en/categories للتحقق من توفر قسم المستلزمات الفندقية.
استكشاف الأخطاء: يمكن التبديل للعربية في أي لحظة عبر زر «العربية» في الترويسة.
دليل القطاعات والتصنيفات التجارية (الإنجليزية LTR) (الواجهة الإنجليزية (EN LTR) / الوضع الفاتح (Light Mode)) — Commercial Categories Directory (English LTR — /en/categories) (EN / light) | Route: /en/categories | Journey: DISC-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة عرض منتجات قطاع محدد للقراءة فقط (Read-Only Category Product Listing)
تعرض تعريف القطاع التجاري المختار والتصنيفات الفرعية التابعة له مع قائمة جميع أصناف الجملة المندرجة تحته، مع دعم الترتيب والفلترة الفرعية.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع الزوار والمشترين
الصلاحيات والقيود: عام للتصفح
المتطلبات المسبقة: تصنيف نشط يحتوي على منتجات منشورة
مسار التنقل الفعلي: دليل التصنيفات /categories ← الضغط على بطاقة التصنيف المطلوب (/categories/{slug})
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| بانر تعريف التصنيف ومسار التصفح |
أعلى الصفحة |
اسم التصنيف، وصفه التجاري، ومسار الرئيسية ← التصنيفات ← اسم التصنيف. |
| شبكة منتجات التصنيف وأدوات الترتيب |
وسط الصفحة |
بطاقات المنتجات المنتمية لهذا القطاع حصراً مع رمز SKU وشروط MOQ والسعر. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
ترتيب منتجات التصنيف (sort) |
قائمة منسدلة |
الأحدث، السعر الأقل، السعر الأعلى. |
قيمة افتراضية آمنة. |
يعيد ترتيب منتجات التصنيف الحالي في الواجهة. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| الضغط على بطاقة منتج داخل التصنيف |
جميع الزوار والمشترين |
انتقال مباشر |
ينقل إلى صفحة تفاصيل المنتج /products/{slug}. |
- افتح
/categories/{slug} بعد اختيار القطاع من دليل التصنيفات.
- استعرض الأصناف المعروضة أو غيّر ترتيبها حسب السعر.
- اضغط على الصنف المطلوب لفتح صفحة تفاصيله وشرائح كمياته.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة قراءة فقط (Read-Only): لا تجري أي عمليات كتابة في قاعدة البيانات.
حالات الشاشة (States): حالة الفراغ: إذا خلا التصنيف مؤقتاً من الأصناف المنشورة يظهر تنبيه ورابط للعودة إلى الكتالوج العام.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يدخل المشتري إلى تصنيف «القهوة والمشروبات الساخنة» فيستعرض جميع أصناف البن والهيل المتاحة للجملة في شاشة واحدة.
استكشاف الأخطاء: للبحث في كافة التصنيفات بدلاً من التصنيف الحالي فقط، استخدم شريط البحث العلوي أو انتقل إلى /products.
صفحة التصنيف الفرعي وقائمة منتجاته (العربية RTL) (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Category Detail & Scoped Product Listing (/categories/{slug}) (AR / light) | Route: /categories/{slug} | Journey: DISC-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة عرض قطاعية للقراءة فقط باتجاه LTR (Read-Only English Category Detail)
تعرض منتجات القطاع التجاري المختار باللغة الإنجليزية وباتجاه LTR مع بيانات SKU وMOQ والأسعار بالريال السعودي.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع الزوار والمشترين
الصلاحيات والقيود: عام للتصفح
المتطلبات المسبقة: تصنيف نشط مترجم للإنجليزية
مسار التنقل الفعلي: دليل التصنيفات الإنجليزي /en/categories ← اختيار التصنيف (/en/categories/{slug})
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| ترويسة التصنيف الإنجليزية |
أعلى الصفحة |
اسم ووصف التصنيف بالإنجليزية ومسار التصفح LTR. |
| شبكة المنتجات التابعة للتصنيف |
وسط الصفحة |
بطاقات المنتجات المترجمة مع شروط الجملة. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
Sort Dropdown (sort) |
قائمة منسدلة |
Newest / Price: Low to High / Price: High to Low. |
قياسي. |
يعيد ترتيب منتجات التصنيف. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| الضغط على بطاقة المنتج |
جميع الزوار |
انتقال مباشر |
يفتح /en/products/{slug}. |
- افتح
/en/categories/{slug} لاستعراض منتجات التصنيف باللغة الإنجليزية.
- اضغط على المنتج المطلوب لمراجعة شرائح الكميات وإضافته للسلة.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة قراءة فقط (Read-Only): لا تعدل أي سجل في الخادم.
حالات الشاشة (States): متوافقة مع تخطيط LTR والوضعين الفاتح والداكن.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يراجع مسؤول المشتريات أصناف القطاع المختار عبر /en/categories/{slug} ويقارن الأسعار الأساسية.
استكشاف الأخطاء: للعودة إلى جميع التصنيفات اضغط على Categories في مسار التصفح العلوي.
صفحة التصنيف الفرعي وقائمة منتجاته (الإنجليزية LTR) (الواجهة الإنجليزية (EN LTR) / الوضع الفاتح (Light Mode)) — Category Detail & Product Listing (English LTR — /en/categories/{slug}) (EN / light) | Route: /en/categories/{slug} | Journey: DISC-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة دليل علامات تجارية للقراءة فقط (Read-Only Brands Directory)
تمكّن مشتري الجملة من استعراض جميع العلامات التجارية والمصانع والوكالات المعتمدة لدى انطلاقة سهم والوصول المباشر لأصناف كل علامة.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع الزوار والمشترين
الصلاحيات والقيود: عام بدون تسجيل دخول
المتطلبات المسبقة: علامات تجارية منشورة في الكتالوج
مسار التنقل الفعلي: الشريط العلوي ← الضغط على «العلامات التجارية (Brands)» (/brands) (/brands)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| ترويسة دليل العلامات التجارية |
أعلى الصفحة |
عنوان «العلامات التجارية المعتمدة» ونبذة تعريفية. |
| شبكة بطاقات العلامات التجارية |
وسط الصفحة |
شعار العلامة التجارية، اسمها، عدد الأصناف المتوفرة تحتها، وزر استعراض منتجات العلامة. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
شريط البحث العام (q) |
نصي — اختياري |
يبحث في المنتجات والعلامات. |
قياسي. |
يوجه إلى /search?q=.... |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| الضغط على بطاقة العلامة التجارية |
جميع الزوار والمشترين |
انتقال مباشر |
يفتح صفحة العلامة التجارية /brands/{slug}. |
- انتقل إلى
/brands من الشريط العلوي.
- استعرض بطاقات العلامات التجارية المعتمدة وعدد الأصناف المتاحة لكل علامة.
- اضغط على العلامة التجارية المطلوبة لعرض جميع منتجاتها.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة قراءة فقط (Read-Only): لا تكتب أي بيانات في الخادم.
حالات الشاشة (States): تدعم حالات التحميل والفراغ والوضعين الفاتح والداكن.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يبحث مدير مشتريات عن أصناف وكالة غذائية محددة فيدخل إلى /brands ويختار العلامة لاستعراض كافة عبواتها.
استكشاف الأخطاء: تُدار بيانات العلامات التجارية وشعاراتها من لوحة الإدارة عبر /admin/catalog و/admin/media-library.
دليل العلامات التجارية والوكالات المعتمدة (العربية RTL) (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Authorized Brands Directory (/brands) (AR / light) | Route: /brands | Journey: DISC-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة دليل علامات تجارية للقراءة فقط باتجاه LTR (Read-Only LTR Brands Directory)
تعرض دليل العلامات التجارية المعتمدة باللغة الإنجليزية وباتجاه LTR مع عدد الأصناف المتاحة لكل علامة.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع الزوار والمشترين
الصلاحيات والقيود: عام بدون تسجيل دخول
المتطلبات المسبقة: علامات تجارية نشطة مترجمة
مسار التنقل الفعلي: الشريط العلوي الإنجليزي ← الضغط على «Brands» (/en/brands) (/en/brands)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| شريط ترويسة السطح وسياق الجلسة (المتجر العام (SF) — العلامات التجارية بالإنجليزية) |
أعلى الشاشة |
يعرض عنوان الشاشة، مسار الوصول (/en/brands)، وحالة الجلسة أو المنشأة النشطة. |
| شبكة العلامات التجارية LTR |
وسط الصفحة |
بطاقات العلامات التجارية بالأسماء الإنجليزية وروابط /en/brands/{slug}. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
Global Search (q) |
نصي — اختياري |
بحث فوري. |
قياسي. |
يوجه إلى /en/search?q=.... |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| الضغط على بطاقة العلامة التجارية |
جميع الزوار |
انتقال مباشر |
يفتح /en/brands/{slug}. |
- افتح
/en/brands لاستعراض العلامات التجارية باللغة الإنجليزية.
- اضغط على العلامة المطلوبة لفتح قائمة أصنافها على
/en/brands/{slug}.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة قراءة فقط (Read-Only): لا تعدل قاعدة البيانات.
حالات الشاشة (States): متوافقة مع تخطيط LTR والوضعين الفاتح والداكن.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يتصفح المشتري العلامات التجارية عبر /en/brands للوصول السريع إلى منتجات العلامة المطلوبة.
استكشاف الأخطاء: اضغط على «العربية» في الترويسة للعودة إلى الواجهة العربية.
دليل العلامات التجارية والوكالات المعتمدة (الإنجليزية LTR) (الواجهة الإنجليزية (EN LTR) / الوضع الفاتح (Light Mode)) — Authorized Brands Directory (English LTR — /en/brands) (EN / light) | Route: /en/brands | Journey: DISC-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة عرض أصناف علامة تجارية للقراءة فقط (Read-Only Brand Product Listing)
تعرض صفحة الهوية الخاصة بالعلامة التجارية وشعارها ووصفها مع قائمة كاملة بجميع أصناف الجملة التابعة لها وشروط طلبها.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع الزوار والمشترين
الصلاحيات والقيود: عام للتصفح
المتطلبات المسبقة: علامة تجارية نشطة مرتبطة بأصناف الكتالوج
مسار التنقل الفعلي: دليل العلامات التجارية /brands ← الضغط على العلامة التجارية المطلوبة (/brands/{slug})
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| بطاقة تعريف العلامة التجارية |
أعلى الصفحة |
شعار العلامة، الاسم العربي، النبذة التعريفية، وإجمالي عدد الأصناف المتوفرة. |
| شبكة أصناف العلامة التجارية |
وسط الصفحة |
بطاقات المنتجات التابعة للعلامة مع رمز SKU والحد الأدنى للطلب MOQ والسعر. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
ترتيب أصناف العلامة (sort) |
قائمة منسدلة |
الأحدث، السعر الأقل، السعر الأعلى. |
قياسي. |
يعيد ترتيب منتجات العلامة التجارية المعروضة. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| الضغط على بطاقة منتج |
جميع الزوار والمشترين |
انتقال مباشر |
يفتح صفحة تفاصيل الصنف /products/{slug}. |
- افتح
/brands/{slug} من دليل العلامات التجارية.
- راجع الأصناف المتاحة تحت هذه العلامة التجارية وقارن العبوات والأسعار.
- اضغط على الصنف المطلوب للانتقال إلى صفحة تفاصيله وإضافته للسلة.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة قراءة فقط (Read-Only): لا تكتب أي تغييرات في قاعدة البيانات.
حالات الشاشة (States): تعرض حالة فراغ واضحة إذا لم تتوفر أصناف نشطة حالياً تحت العلامة التجارية.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يستعرض المشتري كافة أصناف علامة تجارية محددة عبر /brands/{slug} لتجهيز طلبية موحدة من نفس المصنع.
استكشاف الأخطاء: للانتقال إلى علامة تجارية أخرى اضغط على «العلامات التجارية» في مسار التصفح العلوي.
صفحة العلامة التجارية وقائمة أصنافها (العربية RTL) (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Brand Detail & Product Catalog (/brands/{slug}) (AR / light) | Route: /brands/{slug} | Journey: DISC-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة عرض أصناف علامة تجارية للقراءة فقط باتجاه LTR (Read-Only English Brand Detail)
تعرض أصناف العلامة التجارية المختارة باللغة الإنجليزية وباتجاه LTR مع تفاصيل SKU وMOQ والأسعار بالريال.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع الزوار والمشترين
الصلاحيات والقيود: عام للتصفح
المتطلبات المسبقة: علامة تجارية نشطة مترجمة
مسار التنقل الفعلي: دليل العلامات الإنجليزي /en/brands ← اختيار العلامة التجارية (/en/brands/{slug})
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| ترويسة العلامة التجارية LTR |
أعلى الصفحة |
شعار واسم ووصف العلامة التجارية بالإنجليزية. |
| شبكة المنتجات |
وسط الصفحة |
بطاقات المنتجات التابعة للعلامة باللغة الإنجليزية. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
Sort Dropdown (sort) |
قائمة منسدلة |
Newest / Price Asc / Price Desc. |
قياسي. |
يعيد ترتيب القائمة. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| الضغط على بطاقة المنتج |
جميع الزوار |
انتقال مباشر |
يفتح /en/products/{slug}. |
- افتح
/en/brands/{slug} لمراجعة منتجات العلامة التجارية بالإنجليزية.
- اضغط على الصنف المطلوب لعرض شرائح الكميات وإضافته للسلة.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة قراءة فقط (Read-Only): لا تعدل قاعدة البيانات.
حالات الشاشة (States): متوافقة مع تخطيط LTR والوضعين الفاتح والداكن.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يراجع المشتري أصناف العلامة التجارية باللغة الإنجليزية عبر /en/brands/{slug}.
استكشاف الأخطاء: للعودة إلى فهرس العلامات اضغط على Brands في شريط المسار العلوي.
صفحة العلامة التجارية وقائمة أصنافها (الإنجليزية LTR) (الواجهة الإنجليزية (EN LTR) / الوضع الفاتح (Light Mode)) — Brand Detail & Product Catalog (English LTR — /en/brands/{slug}) (EN / light) | Route: /en/brands/{slug} | Journey: DISC-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة بحث وتصفية للقراءة فقط (Read-Only Search & Discovery Screen)
تمكّن المشتري من العثور الفوري على الأصناف المطلوبة باستخدام الاسم العربي، الاسم الإنجليزي، الكود التجاري (SKU)، أو رقم الباركود القياسي (GTIN)، مع إمكانية تضييق النتائج بالفلاتر الجانبية.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع الزوار والمشترين
الصلاحيات والقيود: عام بدون تسجيل دخول
المتطلبات المسبقة: فهرس منتجات الكتالوج النشط
مسار التنقل الفعلي: كتابة كلمة البحث أو رمز SKU أو الباركود في شريط البحث العلوي والضغط على Enter (/search?q=...) (/search)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| شريط عبارة البحث وعداد المطابقات |
أعلى الصفحة |
يعرض عبارة البحث المدخلة (q) وعدد الأصناف المطابقة مع حقل لتعديل البحث. |
| شبكة نتائج البحث المتطابقة |
وسط الصفحة |
بطاقات الأصناف المطابقة مرتبة حسب درجة الصلة مع إبراز SKU والباركود والسعر وMOQ. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
حقل عبارة البحث (q) |
نصي — اختياري |
يقبل النصوص العربية والإنجليزية وأكواد SKU والباركود حتى 120 حرفاً. |
مثال صحيح: SKU-1002 أو 6281000000123 أو سكر. يتم تنظيف المدخلات من أي وسوم برمجية تلقائياً. |
يحدّث نتائج البحث المعروضة في /search?q=... دون أي تعديل على قاعدة البيانات. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| زر «بحث» (Submit Search) |
جميع الزوار والمشترين |
فوري |
يجلب الأصناف المطابقة لعبارة البحث ويعرضها في الشبكة. |
| الضغط على بطاقة الصنف المطابق |
جميع الزوار والمشترين |
انتقال مباشر |
يفتح صفحة تفاصيل الصنف /products/{slug}. |
- أدخل اسم المنتج أو رمز
SKU أو الباركود في حقل البحث العلوي واضغط Enter للانتقال إلى /search.
- راجع عدد النتائج المطابقة وتأكد من رمز
SKU وحجم العبوة على البطاقة.
- استخدم الفلاتر الجانبية عند الحاجة لتضييق النتائج حسب التصنيف أو العلامة التجارية.
- اضغط على الصنف المطلوب لفتح تفاصيله وإضافته للسلة.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة بحث للقراءة فقط (Read-Only): لا تغير أي سجل تجاري في قاعدة البيانات؛ تُحفظ كلمة البحث في عنوان الرابط (?q=...) فقط.
حالات الشاشة (States): حالة عدم وجود نتائج: تعرض رسالة إرشادية واضحة مع اقتراح البحث بكود SKU أو تصفح التصنيفات الرئيسية.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يبحث [email protected] برمز SKU للصنف في شريط البحث، فتظهر بطاقة الصنف الدقيقة فوراً على /search دون الحاجة لتصفح القوائم.
استكشاف الأخطاء: إذا لم يظهر صنف عند البحث بالباركود، تأكد من إدخال الأرقام بدون مسافات أو انتقل إلى شاشة «الطلب السريع بالباركود» /customer/quick-order داخل بوابة العميل.
شاشة نتائج البحث الذكي بالاسم أو SKU أو الباركود (العربية RTL) (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Smart Search Results by Name, SKU, or Barcode (/search) (AR / light) | Route: /search | Journey: DISC-02
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة بحث للقراءة فقط باتجاه LTR (Read-Only English Search Screen)
تعرض نتائج البحث الفوري باللغة الإنجليزية وباتجاه LTR عند البحث بالاسم الإنجليزي أو رمز SKU أو الباركود.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع الزوار والمشترين
الصلاحيات والقيود: عام بدون تسجيل دخول
المتطلبات المسبقة: فهرس الكتالوج النشط
مسار التنقل الفعلي: البحث من الواجهة الإنجليزية (/en/search?q=...) (/en/search)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| ترويسة البحث الإنجليزية |
أعلى الصفحة |
عبارة البحث وعدد النتائج المطابقة بالإنجليزية. |
| شبكة النتائج LTR |
وسط الصفحة |
بطاقات المنتجات المطابقة مع الأسعار بالريال SAR وشروط MOQ. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
Search Query (q) |
نصي — اختياري |
يبحث في الاسم الإنجليزي والعربي وSKU والباركود. |
قياسي. |
يعرض النتائج على /en/search?q=.... |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| Search / Open Product |
جميع الزوار |
فوري |
عرض النتائج أو الانتقال إلى /en/products/{slug}. |
- أدخل كلمة البحث الإنجليزية أو رمز
SKU في /en/search.
- اضغط على المنتج المطابق لفتح تفاصيله وإضافته للسلة.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة قراءة فقط (Read-Only): لا تعدل قاعدة البيانات.
حالات الشاشة (States): تدعم حالة عدم وجود نتائج والوضعين الفاتح والداكن بتخطيط LTR.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يبحث المشتري عن Olive Oil في /en/search فتظهر جميع أصناف زيت الزيتون المعتمدة للجملة.
استكشاف الأخطاء: يمكن البحث برمز SKU الموحد في كلتا اللغتين العربية والإنجليزية.
شاشة نتائج البحث الذكي (الإنجليزية LTR) (الواجهة الإنجليزية (EN LTR) / الوضع الفاتح (Light Mode)) — Smart Search Results (English LTR — /en/search) (EN / light) | Route: /en/search | Journey: DISC-02
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة محتوى معرفي للقراءة فقط (Read-Only Editorial Blog Index)
تقدم مقالات وأدلة إرشادية لتجار الجملة وفرق المشتريات حول إدارة المخزون، سلاسل الإمداد، وأفضل ممارسات التوريد، وتدار بالكامل من لوحة الإدارة لدعم الظهور العضوي في محركات البحث (SEO).
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع الزوار والمشترين
الصلاحيات والقيود: عام بدون تسجيل دخول
المتطلبات المسبقة: مقالات منشورة من إدارة المدونة /admin/blog-manager
مسار التنقل الفعلي: الشريط العلوي ← الضغط على «المدونة (Blog)» (/blog) (/blog)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| ترويسة المدونة التجارية |
أعلى الصفحة |
عنوان «المدونة ومركز المعرفة لتجارة الجملة» ووصف القسم. |
| شبكة بطاقات المقالات (Blog Post Cards) |
وسط الصفحة |
الصورة البارزة للمقال، تصنيف المقال، تاريخ النشر، العنوان العربي، المقتطف التعريفي، ورابط «قراءة المقال كاملاً». |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
تصفية أو تصفح الصفحات (page) |
ترقيم صفحات |
يتنقل بين صفحات المقالات المنشورة. |
قياسي. |
يعرض الصفحة المختارة من المقالات. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| الضغط على بطاقة المقال («قراءة المقال») |
جميع الزوار |
انتقال مباشر |
يفتح صفحة المقال الكاملة /blog/{slug}. |
- افتح
/blog من الشريط العلوي لاستعراض أحدث المقالات والأدلة التجارية.
- راجع المقتطف وتاريخ النشر لكل مقال في شبكة البطاقات.
- اضغط على عنوان المقال أو زر «قراءة المزيد» لفتح النص الكامل على
/blog/{slug}.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة قراءة فقط (Read-Only): استعراض المدونة لا يكتب أو يعدل أي بيانات في الخادم.
حالات الشاشة (States): تعرض المقالات المنشورة فقط (status = published) وتخفي المسودات تلقائياً.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: ينشر مسؤول المحتوى مقالاً إرشادياً من /admin/blog-manager، فيظهر فوراً للزوار والمشترين في /blog مع بياناته الوصفية للـ SEO.
استكشاف الأخطاء: إذا لم يظهر مقال جديد في /blog، تأكد في /admin/blog-manager من أن حالته «منشور (Published)» وأن تاريخ النشر قد حان.
المدونة التجارية ومركز المعرفة (العربية RTL) (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Wholesale Knowledge Hub & Blog Index (/blog) (AR / light) | Route: /blog | Journey: ADMIN-08
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة محتوى للقراءة فقط باتجاه LTR (Read-Only English Blog Index)
تعرض مقالات المدونة التجارية باللغة الإنجليزية وباتجاه LTR مع دعم روابط Hreflang المتبادلة مع النسخة العربية.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع الزوار والمشترين
الصلاحيات والقيود: عام بدون تسجيل دخول
المتطلبات المسبقة: مقالات منشورة ومترجمة للإنجليزية في /admin/blog-manager
مسار التنقل الفعلي: الشريط العلوي الإنجليزي ← الضغط على «Blog» (/en/blog) (/en/blog)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| شريط ترويسة السطح وسياق الجلسة (المتجر العام (SF) — المدونة باللغة الإنجليزية) |
أعلى الشاشة |
يعرض عنوان الشاشة، مسار الوصول (/en/blog)، وحالة الجلسة أو المنشأة النشطة. |
| شبكة المقالات الإنجليزية LTR |
وسط الصفحة |
بطاقات المقالات بالعناوين والمقتطفات الإنجليزية وتاريخ النشر. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
Pagination (page) |
ترقيم صفحات |
تصفح صفحات المقالات. |
قياسي. |
تحديث قائمة المقالات المعروضة. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| Read Article |
جميع الزوار |
انتقال مباشر |
يفتح /en/blog/{slug}. |
- انتقل إلى
/en/blog لاستعراض المقالات الإنجليزية.
- اضغط على المقال المطلوب لقراءة تفاصيله الكاملة.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة قراءة فقط (Read-Only): لا تجري أي تعديل على قاعدة البيانات.
حالات الشاشة (States): متوافقة مع تخطيط LTR والوضعين الفاتح والداكن.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يقرأ زائر دولي مقالات سلاسل الإمداد عبر /en/blog ويتعرف على خدمات التوريد.
استكشاف الأخطاء: يتم تحرير النسخة الإنجليزية للمقال من نفس نموذج المقال في /admin/blog-manager.
المدونة التجارية ومركز المعرفة (الإنجليزية LTR) (الواجهة الإنجليزية (EN LTR) / الوضع الفاتح (Light Mode)) — Wholesale Blog & Knowledge Hub (English LTR — /en/blog) (EN / light) | Route: /en/blog | Journey: ADMIN-08
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة قراءة مقال للقراءة فقط (Read-Only Editorial Article View)
تعرض المحتوى الكامل للمقال التجاري المنسق بشكل آمن مع الصورة البارزة، تاريخ النشر، البيانات المنظمة (Article Schema JSON-LD)، وروابط المقالات ذات الصلة أو الانتقال للكتالوج.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع الزوار والمشترين
الصلاحيات والقيود: عام بدون تسجيل دخول
المتطلبات المسبقة: مقال منشور بمعرف نصي (slug) صالح
مسار التنقل الفعلي: فهرس المدونة /blog ← الضغط على عنوان المقال المطلوب (/blog/{slug})
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| ترويسة المقال ومسار التصفح |
أعلى الصفحة |
مسار الرئيسية ← المدونة ← عنوان المقال، تاريخ النشر، والصورة البارزة. |
| متن المقال المنسق (Safe Rich Content Body) |
وسط الصفحة |
الفقرات والعناوين الفرعية والنصائح التشغيلية المفلترة أمنياً ضد أي نصوص ضارة. |
| مقالات ذات صلة ودعوة لتصفح الكتالوج |
أسفل المقال |
روابط لمقالات أخرى في نفس القطاع وزر الانتقال لكتالوج الجملة. |
3. حالة الحقول والمدخلات (Read-Only Screen Notice): هذه الشاشة مخصصة للقراءة والاستعراض التشغيلي فقط (isReadOnly: true)؛ لا تتضمن حقول إدخال نصية تعدّل السجلات في قاعدة البيانات الخلفية.
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| رابط «العودة إلى المدونة» |
جميع الزوار |
انتقال مباشر |
يعيد المستخدم إلى فهرس المقالات /blog. |
| روابط المقالات ذات الصلة / تصفح الكتالوج |
جميع الزوار |
انتقال مباشر |
ينقل إلى المقال المختار أو إلى /products. |
- افتح المقال من
/blog للانتقال إلى /blog/{slug}.
- اقرأ المحتوى الإرشادي والعناوين الفرعية المنسقة.
- استخدم الروابط السفلية للعودة إلى فهرس المدونة أو الانتقال لتطبيق النصائح عملياً في كتالوج المنتجات.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة قراءة فقط (Read-Only): لا تحتوي على نماذج إدخال ولا تعدل أي بيانات في الخادم.
حالات الشاشة (States): في حال طلب رابط مقال غير موجود أو غير منشور يعيد النظام استجابة 404 نظيفة.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يفتح تاجر جملة مقال «دليل تنظيم طلبات التوريد الشهرية للمطاعم والفنادق» على /blog/{slug}، ثم ينتقل منه إلى /products لتجهيز طلبيته.
استكشاف الأخطاء: لتعديل نص المقال أو عنوان الـ SEO الخاص به، يستخدم فريق المحتوى شاشة /admin/blog-manager.
صفحة قراءة المقال التفصيلية في المدونة (العربية RTL) (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Blog Article Detail Page (/blog/{slug}) (AR / light) | Route: /blog/{slug} | Journey: ADMIN-08
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة إرشادية تفاعلية للقراءة فقط (Read-Only Accordion FAQ Center)
تجيب بشكل مباشر ومنظم على استفسارات العملاء حول خطوات تسجيل المنشأة، متطلبات توثيق KYB، الحد الأدنى للطلب (MOQ)، دورة عروض الأسعار (RFQ)، وسائل السداد، وإصدار الفواتير الضريبية الرسمية من نظام ABC.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع الزوار والمشترين
الصلاحيات والقيود: عام بدون تسجيل دخول
المتطلبات المسبقة: عناصر أسئلة شائعة منشورة من /admin/faq-manager
مسار التنقل الفعلي: الشريط العلوي أو تذييل الصفحة ← الضغط على «الأسئلة الشائعة (FAQ)» (/faq) (/faq)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| ترويسة مركز الأسئلة الشائعة وتبويبات التصنيف |
أعلى الصفحة |
عنوان الصفحة وأزرار تصفية الأسئلة حسب الموضوع (التسجيل والتوثيق، الطلبات والتسعير، الدفع والائتمان، التوصيل والفواتير). |
| قائمة الأسئلة والأجوبة القابلة للطي (FAQ Accordions) |
وسط الصفحة |
بطاقات الأسئلة المرتبة حسب الأولوية مع إجاباتها التفصيلية الموثقة. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
فلتر تصنيف الأسئلة (category) |
أزرار تصفية موضوعية |
يصفي الأسئلة المعروضة حسب القسم المختار. |
قياسي. |
يعرض أسئلة القسم المحدد فوراً. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| الضغط على عنوان السؤال (Accordion Toggle) |
جميع الزوار والمشترين |
تفاعل فوري في الصفحة |
يفتح أو يطوي نص الإجابة التفصيلية للسؤال المختار. |
- افتح
/faq من القائمة العلوية.
- اختر تصنيف الاستفسار (مثل: التوثيق، الأسعار، أو الفواتير الضريبية).
- اضغط على السؤال لعرض الإجابة المعتمدة والخطوات المطلوبة.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة قراءة فقط (Read-Only): فتح وطي الأسئلة يتم في المتصفح ولا يكتب أي بيانات في الخادم.
حالات الشاشة (States): تتضمن ترميز FAQPage Schema JSON-LD لمحركات البحث وتدعم الوضعين الفاتح والداكن.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يقرأ عميل جديد في /faq إجابة سؤال «ما المستندات المطلوبة لتوثيق المنشأة (KYB)؟» فيجهز السجل التجاري وشهادة الضريبة قبل التسجيل.
استكشاف الأخطاء: تُضاف وتُعدّل الأسئلة الشائعة وترتيب ظهورها من لوحة الإدارة عبر /admin/faq-manager.
مركز الأسئلة الشائعة والمساعدة العامة (العربية RTL) (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Public FAQ & Help Center (/faq) (AR / light) | Route: /faq | Journey: ADMIN-08
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة إرشادية للقراءة فقط باتجاه LTR (Read-Only English FAQ Page)
تقدم إجابات الأسئلة الشائعة حول التسجيل، التوثيق، الطلب بالجملة، والفوترة باللغة الإنجليزية وباتجاه LTR.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع الزوار والمشترين
الصلاحيات والقيود: عام بدون تسجيل دخول
المتطلبات المسبقة: أسئلة شائعة منشورة ومترجمة للإنجليزية
مسار التنقل الفعلي: الشريط العلوي الإنجليزي ← الضغط على «FAQ» (/en/faq) (/en/faq)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| شريط ترويسة السطح وسياق الجلسة (المتجر العام (SF) — الأسئلة الشائعة باللغة الإنجليزية) |
أعلى الشاشة |
يعرض عنوان الشاشة، مسار الوصول (/en/faq)، وحالة الجلسة أو المنشأة النشطة. |
| قائمة الأسئلة الشائعة LTR |
وسط الصفحة |
بطاقات الأسئلة والإجابات الإنجليزية المقسمة حسب الموضوع. |
3. حالة الحقول والمدخلات (Read-Only Screen Notice): هذه الشاشة مخصصة للقراءة والاستعراض التشغيلي فقط (isReadOnly: true)؛ لا تتضمن حقول إدخال نصية تعدّل السجلات في قاعدة البيانات الخلفية.
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| الضغط على السؤال لفتح الإجابة |
جميع الزوار |
فوري |
إظهار الإجابة الإنجليزية الكاملة. |
- افتح
/en/faq لاستعراض الأسئلة الشائعة باللغة الإنجليزية.
- اضغط على السؤال المطلوب لقراءة الإجابة التفصيلية.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة قراءة فقط (Read-Only): لا تعدل قاعدة البيانات.
حالات الشاشة (States): متوافقة مع تخطيط LTR والوضعين الفاتح والداكن.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يراجع مدير مشتريات أجنبي شروط الدفع والتحويل البنكي عبر /en/faq.
استكشاف الأخطاء: تُحدّث الترجمة الإنجليزية للأسئلة من /admin/faq-manager.
مركز الأسئلة الشائعة والمساعدة العامة (الإنجليزية LTR) (الواجهة الإنجليزية (EN LTR) / الوضع الفاتح (Light Mode)) — Public FAQ & Help Center (English LTR — /en/faq) (EN / light) | Route: /en/faq | Journey: ADMIN-08
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة محتوى مؤسسي للقراءة فقط (Read-Only CMS Page)
تعرض الصفحات المؤسسية والقانونية الثابتة للمنصة (مثل «من نحن»، «الشروط والأحكام»، و«سياسة الخصوصية») المحررة والمنشورة عبر نظام إدارة المحتوى (/admin/cms-pages).
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع الزوار والمشترين
الصلاحيات والقيود: عام بدون تسجيل دخول
المتطلبات المسبقة: صفحة CMS منشورة بالمعرف about-us في /admin/cms-pages
مسار التنقل الفعلي: تذييل الصفحة (Footer) أو القائمة العلوية ← الضغط على «من نحن (About Us)» (/pages/about-us) (/pages/about-us)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| ترويسة الصفحة المؤسسية |
أعلى الصفحة |
عنوان الصفحة («من نحن — منصة انطلاقة سهم لتجارة الجملة») وتاريخ آخر تحديث. |
| أقسام المحتوى المؤسسي والركائز التشغيلية |
وسط الصفحة |
النص التعريفي للمنصة، رؤية التوريد لقطاع الأعمال B2B، ومزايا الربط الموثوق مع مستودعات ونظام الشركة ABC. |
3. حالة الحقول والمدخلات (Read-Only Screen Notice): هذه الشاشة مخصصة للقراءة والاستعراض التشغيلي فقط (isReadOnly: true)؛ لا تتضمن حقول إدخال نصية تعدّل السجلات في قاعدة البيانات الخلفية.
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| روابط الانتقال إلى الكتالوج أو تسجيل الدخول |
جميع الزوار |
انتقال مباشر |
ينقل الزائر إلى /products أو /login. |
- انتقل إلى
/pages/about-us من روابط تذييل الصفحة (Footer).
- اطلع على التعريف الرسمي بالمنصة ونطاق خدمات التوريد بالجملة والسياسات المعتمدة.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة عرض للقراءة فقط (Read-Only): تُقرأ محتوياتها من جدول cms_pages ولا تجري أي كتابة عند الزيارة.
حالات الشاشة (States): لا تعرض إلا الصفحات ذات الحالة المنشورة (published)؛ الصفحات المسودة تعيد 404 للزوار.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يحدّث مدير المحتوى نص صفحة «من نحن» من /admin/cms-pages، فينعكس التحديث مباشرة في /pages/about-us مع الحفاظ على وسوم SEO.
استكشاف الأخطاء: لإضافة رابط صفحة CMS جديدة إلى تذييل الموقع أو الترويسة، استخدم «باني القوائم» في /admin/menu-builder.
الصفحة التعريفية والسياسات العامة لنظام المحتوى (من نحن — /pages/about-us) (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Public CMS Institutional Page (About Us — /pages/about-us) (AR / light) | Route: /pages/about-us | Journey: ADMIN-08
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: نموذج مصادقة وتوثيق جلسة (Interactive Authentication Form)
توفّر نقطة الدخول الآمنة الموحدة لجميع مستخدمي الويب عبر البريد الإلكتروني أو رقم الجوال وكلمة المرور، أو عبر مفاتيح المرور البيومترية (WebAuthn Passkey)، مع توجيه ذكي تلقائي بعد الدخول إلى لوحة الإدارة أو بوابة العميل حسب دور المستخدم.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع أدوار العملاء (المالك، المدير، المشتري، المعتمد، المالية، القراءة فقط) وموظفي الإدارة
الصلاحيات والقيود: متاح للزوار غير المسجلين (guest middleware)
المتطلبات المسبقة: حساب مستخدم مسجل ومفعل في المنصة
مسار التنقل الفعلي: الشريط العلوي ← الضغط على «تسجيل الدخول» أو محاولة فتح أي مسار محمي في /customer/* أو /admin/* (/login)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| بطاقة تسجيل الدخول المركزية |
وسط الشاشة |
شعار المنصة، عنوان «تسجيل الدخول إلى حسابك»، حقل البريد الإلكتروني/الجوال، حقل كلمة المرور مع زر إظهار/إخفاء، خيار تذكر الجلسة، ورابط «نسيت كلمة المرور؟». |
| أزرار الدخول والدخول بمفتاح المرور (Passkey) |
أسفل النموذج |
زر «تسجيل الدخول» الأساسي، زر «الدخول باستخدام مفتاح المرور (Passkey)»، ورابط إنشاء حساب جديد. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
البريد الإلكتروني أو رقم الجوال (email / identifier) |
نصي / بريد إلكتروني — إلزامي |
يقبل عنوان بريد إلكتروني صالح (مثل [email protected]) أو رقم جوال سعودي مسجل (+9665...). |
عند تركه فارغاً أو إدخال صيغة غير صحيحة تظهر رسالة خطأ عربية تحت الحقل فوراً. |
يحدد الحساب المراد التحقق من هويته. |
كلمة المرور (password) |
نص سري محمي — إلزامي |
كلمة المرور المعتمدة للحساب (لا تُعرض ولا تُخزن كنص صريح أبداً). |
في حال عدم التطابق تظهر رسالة «بيانات الاعتماد هذه غير متطابقة مع سجلاتنا» مع حماية ضد المحاولات المتكررة (Rate Limiting). |
توثّق هوية المستخدم وتنشئ جلسة آمنة. |
تذكرني (remember) |
مربع اختيار — اختياري |
قيمة منطقية (true / false). |
اختياري. |
يمدد صلاحية الجلسة الآمنة على الجهاز الموثوق. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| زر «تسجيل الدخول» (Submit Login) |
جميع المستخدمين المسجلين |
تعطيل الزر أثناء التحقق لمنع الإرسال المزدوج |
ينشئ جلسة موثقة، يسجل الحدث في سجل الأمان، ويوجه العميل إلى /customer/overview أو المدير إلى /admin/command-center (أو شاشة تحقق MFA عند اللزوم). |
| زر «الدخول بمفتاح المرور (Passkey)» |
المستخدمون الذين فعّلوا WebAuthn Passkey في إعدادات الأمان |
نافذة التحقق البيومتري للنظام/المتصفح |
تسجيل دخول فوري بدون كلمة مرور عبر البصمة أو رمز الجهاز. |
| رابط «نسيت كلمة المرور؟» |
جميع المستخدمين |
انتقال مباشر |
ينقل إلى شاشة استعادة كلمة المرور عبر رمز التحقق /password/forgot. |
- افتح صفحة
/login من الشريط العلوي.
- أدخل اسم المستخدم المعتمد (البريد الإلكتروني مثل
[email protected] أو رقم الجوال) في الحقل الأول.
- أدخل كلمة المرور المسلمة عبر القناة الآمنة المستقلة في حقل كلمة المرور.
- اضغط على «تسجيل الدخول» ليتم توجيهك تلقائياً إلى مركز قيادة العميل أو لوحة الإدارة حسب صلاحيات حسابك.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: عملية كتابة وتوثيق جلسة: عند نجاح الدخول يتم تدوير معرف الجلسة (Session Regeneration) لمنع هجمات التثبيت، وتُسجل الجلسة النشطة وعنوان IP ونوع المتصفح في جدول جلسات الأمان مع حفظ المنشأة النشطة الافتراضية.
حالات الشاشة (States): حالة الإرسال: يُعطّل زر الدخول ويظهر مؤشر التحميل؛ حالة الخطأ: تعرض تنبيهاً واضحاً عند خطأ البيانات أو تجاوز عدد المحاولات المسموح بها (5 محاولات في الدقيقة).
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يسجل مالك المنشأة [email protected] دخوله عبر /login، فينقله النظام مباشرة إلى /customer/overview مع تفعيل سياق «شركة الصفوة للتجارة (CR 1010784512)».
استكشاف الأخطاء: في حال نسيان كلمة المرور لا تكرر المحاولات الخاطئة لتفادي الحجب المؤقت، بل اضغط على «نسيت كلمة المرور؟» لاستعادتها عبر رمز OTP.
بوابة تسجيل الدخول الموحدة (كلمة المرور + مفتاح المرور Passkey — العربية RTL) (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Unified Authentication Gateway (Password & WebAuthn Passkey — /login) (AR / light) | Route: /login | Journey: AUTH-02
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: نموذج مصادقة باتجاه LTR (Interactive English Login Form)
تتيح للمستخدمين الناطقين بالإنجليزية تسجيل الدخول إلى حساباتهم عبر البريد الإلكتروني/الجوال وكلمة المرور أو عبر مفتاح المرور Passkey بتخطيط LTR كامل.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع أدوار العملاء وموظفي الإدارة
الصلاحيات والقيود: متاح للزوار غير المسجلين
المتطلبات المسبقة: حساب مستخدم مسجل ومفعل
مسار التنقل الفعلي: الشريط العلوي الإنجليزي ← الضغط على «Sign In» (/en/login) (/en/login)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| شريط ترويسة السطح وسياق الجلسة (المتجر العام وبوابة الهوية (SF / Auth) — تسجيل الدخول بالإنجليزية) |
أعلى الشاشة |
يعرض عنوان الشاشة، مسار الوصول (/en/login)، وحالة الجلسة أو المنشأة النشطة. |
| بطاقة الدخول الإنجليزية LTR |
وسط الشاشة |
حقول Email or Phone وPassword، خيار Remember me، وزر Sign In وSign in with Passkey. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
Email or Phone (email) |
نصي — إلزامي |
البريد أو الجوال المسجل. |
رسائل تحقق إنجليزية واضحة. |
تحديد هوية الحساب. |
Password (password) |
كلمة مرور — إلزامي |
كلمة المرور المعتمدة. |
حماية معدل المحاولات. |
توثيق الجلسة. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| Sign In |
جميع المستخدمين |
فوري |
توثيق الجلسة والتوجيه للبوابة المناسبة. |
- افتح
/en/login وأدخل البريد الإلكتروني وكلمة المرور.
- اضغط
Sign In للدخول إلى البوابة مع الاحتفاظ باللغة الإنجليزية.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: تنشئ جلسة موثقة في قاعدة البيانات وتضبط لغة الجلسة إلى الإنجليزية (en).
حالات الشاشة (States): تطابق كامل في حماية المحاولات ورسائل الخطأ والوضعين الفاتح والداكن.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يدخل المستخدم عبر /en/login ليتم توجيهه إلى بوابة العميل أو الإدارة مع تفعيل واجهة LTR.
استكشاف الأخطاء: استخدم رابط Forgot Password? عند الحاجة لإعادة تعيين كلمة المرور.
بوابة تسجيل الدخول الموحدة (الإنجليزية LTR) (الواجهة الإنجليزية (EN LTR) / الوضع الفاتح (Light Mode)) — Unified Authentication Gateway (English LTR — /en/login) (EN / light) | Route: /en/login | Journey: AUTH-02
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: نموذج طلب رمز تحقق أمني (Password Recovery Initiation Form)
تمكّن المستخدم الذي فقد كلمة مروره من طلب رمز تحقق لمرة واحدة (OTP) عبر رقم الجوال السعودي المسجل (mobile) مع اختيار قناة الإرسال (whatsapp أو sms) لإعادة تعيين كلمة المرور بأمان.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع المستخدمين المسجلين (عملاء وإدارة)
الصلاحيات والقيود: متاح للزوار غير المسجلين (guest) مع حماية معدل الطلبات (throttle:auth-otp)
المتطلبات المسبقة: رقم جوال سعودي مسجل ونشط في المنصة (mobile)
مسار التنقل الفعلي: صفحة تسجيل الدخول /login ← الضغط على رابط «نسيت كلمة المرور؟» (/password/forgot)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| شريط ترويسة السطح وسياق الجلسة (بوابة الهوية والأمان (SF / Auth) — استعادة كلمة المرور) |
أعلى الشاشة |
يعرض عنوان الشاشة، مسار الوصول (/password/forgot)، وحالة الجلسة أو المنشأة النشطة. |
| بطاقة استعادة كلمة المرور |
وسط الشاشة |
عنوان «استعادة كلمة المرور»، شرح خطوات الاستعادة، حقل إدخال رقم الجوال السعودي (mobile)، خيار قناة الإرسال (channel: واتساب أو رسالة نصية SMS)، زر «إرسال رمز التحقق»، ورابط العودة لتسجيل الدخول. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
رقم الجوال السعودي (mobile) |
نصي — إلزامي (required|string) |
يُطبع تلقائياً عبر SaudiMobileNormalizer::tryNormalize إلى الصيغة القياسية السعودية (+9665XXXXXXXX). |
يرفض الحقل الفارغ أو صيغة الجوال غير السعودية، ولمنع كشف الحسابات (Enumeration Protection) يولّد معرّف طلب الجلسة (password_reset.request_id) ويوجّه دائماً إلى /password/verify دون كشف وجود الرقم من عدمه. |
عند مطابقة حساب نشط، ينشئ رمز تحقق عبر OtpService::requestOtp لغرض password_reset ويحفظ password_reset.mobile وpassword_reset.request_id في الجلسة. |
قناة الإرسال (channel) |
اختيار — اختياري (nullable|string|in:whatsapp,sms) |
القيمة الافتراضية whatsapp مع إمكانية اختيار sms. |
يقبل فقط whatsapp أو sms. |
يحدد قناة إرسال رمز التحقق لمرة واحدة (OTP). |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
زر «إرسال رمز التحقق» (POST /password/forgot) |
جميع المستخدمين |
تعطيل الزر أثناء الإرسال |
تنفيذ WebPasswordResetController@requestOtp وتوجيه المستخدم إلى شاشة التحقق من الرمز /password/verify. |
| رابط «العودة إلى تسجيل الدخول» |
جميع المستخدمين |
انتقال مباشر |
يعيد المستخدم إلى /login. |
- من شاشة
/login اضغط على «نسيت كلمة المرور؟» لفتح /password/forgot.
- أدخل رقم الجوال السعودي المسجل (
mobile) واختر قناة الاستلام (whatsapp أو sms).
- اضغط على «إرسال رمز التحقق» للانتقال تلقائياً إلى شاشة
/password/verify لإدخال رمز OTP.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: يسجل طلب الرمز المشفر في خدمة OtpService (للحسابات النشطة المطابقة) ويحفظ password_reset.request_id وpassword_reset.mobile في جلسة المستخدم.
حالات الشاشة (States): تتضمن حماية ضد الإغراق (throttle:auth-otp) وحماية كاملة ضد تعداد الحسابات (Account Enumeration Protection).
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يطلب المشتري استعادة كلمة المرور عبر إدخال رقم جواله السعودي في /password/forgot واختيار قناة whatsapp، فيتم إرسال الرمز وتحويله إلى /password/verify.
استكشاف الأخطاء: إذا لم يصلك الرمز خلال دقيقة، تأكد من إدخال رقم الجوال السعودي المسجل بشكل صحيح أو جرّب اختيار قناة الرسائل النصية (sms).
شاشة طلب استعادة كلمة المرور وإرسال رمز التحقق (OTP) (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Forgot Password & OTP Dispatch Screen (/password/forgot — WebPasswordResetController@showForgotForm) (AR / light) | Route: /password/forgot | Journey: AUTH-03
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة عرض واستكشاف للقراءة فقط مع نقاط انتقال تفاعلية (Read-Only Storefront Discovery Hub)
تمثل نقطة الانطلاق الرئيسية لعملاء الجملة (B2B) لاستكشاف القطاعات التجارية المعتمدة، العروض الموسمية، العلامات التجارية، والأصناف الأكثر طلباً، مع شريط بحث ذكي فوري وتبديل لحظي للغة (AR/EN) والوضع اللوني (فاتح/داكن).
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: زائر عام (بدون تسجيل دخول)، مشتري، مدير مشتريات، مالك منشأة
الصلاحيات والقيود: عام لجميع الزوار لاستعراض البلوكات والقطاعات؛ يتطلب تسجيل الدخول بحساب منشأة نشطة لإضافة الأصناف إلى السلة أو عرض الأسعار التعاقدية الخاصة
المتطلبات المسبقة: وجود إصدار منشور (Published Version) من باني الصفحة الرئيسية للموقع أو تفعيل العرض الافتراضي الآمن للكتالوج
مسار التنقل الفعلي: الدخول المباشر عبر الرابط الرئيسي https://antlaqasahm.sa/ أو الضغط على شعار «انطلاقة سهم» في الشريط العلوي (/)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| الشريط العلوي الموحد (Global Header) |
أعلى الشاشة (ثابت) |
شعار انطلاقة سهم، روابط التنقل (الرئيسية، المنتجات، التصنيفات، العلامات التجارية، المدونة، الأسئلة الشائعة)، شريط البحث الفوري، مبدل اللغة (EN/AR)، مبدل المظهر (فاتح/داكن)، أيقونة السلة المصغرة، وزر تسجيل الدخول / بوابة العميل. |
| شريط التنبيه الترويجي والبانر الرئيسي (Promo Strip & Hero Banner) |
القسم العلوي تحت الترويسة |
رسائل التوريد المعتمدة للجملة، البانر الترويجي الرئيسي من باني الصفحة الرئيسية مع أزرار الدعوة للإجراء (CTA) لتصفح الكتالوج أو الانضمام كمنشأة. |
| شبكة القطاعات والتصنيفات المعتمدة (Featured Categories Grid) |
وسط الصفحة |
بطاقات التصنيفات الرئيسية مع عدد الأصناف المؤهلة للطلب بالجملة في كل قطاع. |
| حلقات عرض المنتجات والعلامات التجارية (Product Carousels & Brands) |
القسم السفلي وتذييل الصفحة (Footer) |
بطاقات المنتجات المميزة (توضح الكود SKU والحد الأدنى للطلب MOQ والسعر بالريال)، شعارات العلامات التجارية، وتذييل الصفحة الذي يضم الروابط القانونية وبيانات التواصل. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
حقل البحث السريع في الترويسة (q) |
نصي — اختياري |
يقبل اسم المنتج بالعربية أو الإنجليزية، رمز الصنف (SKU)، أو رقم الباركود (GTIN من 8 إلى 14 رقماً). |
مثال صحيح: SKU-1001 أو أرز بسمتي. عند الإرسال الفارغ ينقل المستخدم لصفحة البحث الشامل /search. |
يوجه المتصفح إلى /search?q=... لعرض الأصناف المطابقة دون أي تعديل على قاعدة البيانات. |
مبدل اللغة (Locale Switcher) |
زر تبديل سياقي |
يبدل بين العربية (RTL على المسار /) والإنجليزية (LTR على المسار /en). |
لا يتطلب إدخالاً؛ يحافظ على سياق التصفح الحالي. |
يحدّث لغة العرض واتجاه الصفحة في الجلسة والرابط. |
مبدل المظهر (Theme Toggle) |
زر تبديل بصري |
يبدل بين الوضع الفاتح (light) والوضع الداكن (dark). |
يحفظ التفضيل في متصفح المستخدم (localStorage). |
يطبق رموز الألوان المعتمدة فوراً دون إعادة تحميل الخادم. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| زر «تصفح كتالوج الجملة» (Hero CTA) |
جميع الزوار والمشترين |
انتقال مباشر بدون نافذة تأكيد |
ينقل المستخدم إلى صفحة كتالوج المنتجات الكامل /products. |
| بطاقة تصنيف أو علامة تجارية |
جميع الزوار والمشترين |
انتقال مباشر |
يفتح صفحة التصنيف /categories/{slug} أو العلامة /brands/{slug} مفلترة بالأصناف التابعة لها. |
| أيقونة «السلة المصغرة» (Mini-Cart Drawer Trigger) |
المشتري المسجل دخوله |
فتح فوري للدرج الجانبي |
يعرض محتويات سلة المنشأة النشطة مع إمكانية تعديل الكميات أو الانتقال لإرسال طلب شراء (RFQ). |
- افتح الرابط الرئيسي
https://antlaqasahm.sa/ بالوضع العربي (RTL) وتأكد من ظهور الشريط العلوي والبانر الرئيسي.
- استعرض البلوكات المنشورة من باني الصفحة الرئيسية (القطاعات التجارية، العروض الموسمية، والمنتجات المميزة).
- استخدم شريط البحث العلوي للبحث الفوري بالاسم أو رمز
SKU أو الباركود، أو اضغط على أحد القطاعات للانتقال إلى أصنافه.
- اضغط على زر «تسجيل الدخول» في أعلى اليسار للانتقال إلى
/login عند الرغبة في الشراء باسم المنشأة.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة عرض للقراءة فقط (Read-Only): تصفح الصفحة الرئيسية لا يجري أي كتابة في قاعدة البيانات الخلفية، وتُجلب البلوكات من الإصدار المنشور المعتمد في جدول homepage_versions مع تخزين تفضيل الوضع اللوني محلياً في المتصفح.
حالات الشاشة (States): حالة التحميل: تظهر هياكل البطاقات المتطابقة هندسياً (Skeletons)؛ حالة الفراغ: عند عدم وجود إصدار منشور يعرض النظام واجهة الكتالوج الافتراضية الآمنة؛ حالة الخطأ: لا تكسر الصفحة أي بلوك غير مكتمل بفضل الحماية المسبقة في المحرك.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يدخل المشتري [email protected] إلى /، فيشاهد بانر عروض التوريد الغذائية لشهر أكتوبر، ويضغط على قطاع «الزيوت والسمن التجاري» للانتقال مباشرة إلى الأصناف المتاحة بالحد الأدنى للطلب (MOQ).
استكشاف الأخطاء: إذا لم يظهر تعديل جديد أجراه فريق التسويق على البانر الرئيسي، تحقق في /admin/website-homepage-builder من الضغط على «نشر الإصدار (Publish)» وليس «حفظ كمسودة» فقط.
الصفحة الرئيسية للمتجر العام (النسخة العربية RTL) (الواجهة العربية (AR RTL) / الوضع الداكن (Dark Mode)) — Public Storefront Homepage (Arabic RTL — StorefrontHomepageController) (AR / dark) | Route: / | Journey: DISC-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة عرض واستكشاف للقراءة فقط باتجاه من اليسار لليمين (Read-Only LTR Storefront)
تقدم تجربة المتجر العام الكاملة باللغة الإنجليزية وباتجاه LTR متناظر لفرق المشتريات متعددة الجنسيات، مع روابط قانونية (Canonical وHreflang) متوافقة مع محركات البحث.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: زائر عام، مشتري، مدير مشتريات، مالك منشأة
الصلاحيات والقيود: عام لجميع الزوار بدون تسجيل دخول
المتطلبات المسبقة: توفر المحتوى الإنجليزي المترجم للبلوكات والتصنيفات في باني الصفحة الرئيسية
مسار التنقل الفعلي: الضغط على زر «English» في الشريط العلوي من الصفحة الرئيسية أو فتح المسار /en مباشرة (/en)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| ترويسة المتجر باتجاه LTR |
أعلى الشاشة |
الشعار في أقصى اليسار، قائمة التنقل الإنجليزية (Products, Categories, Brands, Blog, FAQ)، ومبدل العودة للعربية في أقصى اليمين. |
| بانر العروض والقطاعات بالإنجليزية |
وسط الصفحة |
العناوين والأوصاف الإنجليزية المعتمدة للقطاعات والمنتجات مع العملة الموحدة (SAR). |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
حقل البحث الإنجليزي (q) |
نصي — اختياري |
يبحث في الأسماء الإنجليزية والعربية وأكواد SKU والباركود. |
مثال صحيح: Basmati Rice أو SKU-1001. |
ينقل المستخدم إلى /en/search?q=.... |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| زر «العربية» (Locale Switcher) |
جميع المستخدمين |
فوري |
يعيد توجيه الواجهة إلى النسخة العربية / باتجاه RTL. |
| زر «Sign In» |
جميع المستخدمين |
فوري |
يفتح بوابة الدخول الإنجليزية /en/login. |
- اضغط على مبدل اللغة «English» في الشريط العلوي للتحول إلى المسار
/en.
- تحقق من انعكاس اتجاه الشبكة والمحاذاة إلى
LTR وظهور ترجمات القطاعات والأصناف.
- استخدم شريط البحث أو روابط القوائم لتصفح الكتالوج باللغة الإنجليزية.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة قراءة فقط (Read-Only): لا تعدل أي سجل في قاعدة البيانات؛ يتم فقط تحديث لغة الجلسة (locale = en) ومسار الرابط.
حالات الشاشة (States): تدعم الوضعين الفاتح والداكن بالكامل مع سقوط آمن للنص الافتراضي في حال غياب ترجمة فرعية.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يفتح مسؤول مشتريات يتحدث الإنجليزية المسار /en، فيستعرض القطاعات باللغة الإنجليزية مع بقاء الأسعار بالريال السعودي (SAR) وشروط MOQ الموحدة.
استكشاف الأخطاء: في حال ظهور عنوان بلوك باللغة العربية داخل /en، يقوم مدير المحتوى بإضافة النص الإنجليزي للبلوك من /admin/website-homepage-builder.
الصفحة الرئيسية للمتجر العام (النسخة الإنجليزية LTR) (الواجهة الإنجليزية (EN LTR) / الوضع الداكن (Dark Mode)) — Public Storefront Homepage (English LTR — /en) (EN / dark) | Route: /en | Journey: DISC-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة تصفح وفلترة للقراءة فقط مع أزرار إضافة سريعة للسلة (Catalog Listing & Faceted Filter View)
تتيح للمشترين استعراض جميع أصناف الجملة المتاحة في المنصة مع أدوات تصفية دقيقة حسب التصنيف، العلامة التجارية، حالة التوفر في المخزون، والترتيب حسب السعر أو الأحدث، مع عرض الكود التجاري (SKU) والحد الأدنى للطلب (MOQ) على كل بطاقة.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: زائر عام، مشتري، مدير مشتريات، مالك منشأة
الصلاحيات والقيود: عام للتصفح والفلترة؛ يتطلب تسجيل الدخول لإضافة المنتجات للسلة
المتطلبات المسبقة: وجود منتجات منشورة (status = active) ومربوطة بأرصدة وأسعار نظام ABC
مسار التنقل الفعلي: الشريط العلوي ← الضغط على «المنتجات (Products)» أو الانتقال إلى /products (/products)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| شريط عنوان الكتالوج وعداد النتائج |
أعلى منطقة المحتوى |
عنوان «كتالوج منتجات الجملة»، إجمالي عدد الأصناف المطابقة للفلاتر، وقائمة الترتيب المنسدلة. |
| لوحة الفلاتر الجانبية (Faceted Filters Sidebar) |
الجانب الأيمن في RTL |
فلتر البحث النصي، قائمة التصنيفات التجارية، قائمة العلامات التجارية، نطاق السعر، وخيار «المتوفر في المخزون فقط». |
| شبكة بطاقات المنتجات (Product Cards Grid) |
منطقة العرض الوسطى واليسرى |
بطاقات المنتجات وتشمل: صورة الصنف، شارة التوفر، اسم المنتج، رمز SKU، حجم العبوة والحد الأدنى للطلب (MOQ)، السعر الأساسي بالريال، وزر عرض التفاصيل / الإضافة للسلة. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
فلتر التصنيف (category) |
قائمة اختيار / رابط فلترة |
يقبل المعرف النصي (slug) للتصنيف المعتمد. |
عند اختيار تصنيف غير موجود يتم تجاهله وعرض الكتالوج الكامل. |
يحدّث رابط الصفحة /products?category=... ويعيد عرض الأصناف التابعة للتصنيف. |
فلتر العلامة التجارية (brand) |
قائمة اختيار |
يقبل المعرف النصي (slug) للعلامة التجارية. |
يدعم الجمع مع فلتر التصنيف والبحث. |
يقصر النتائج على منتجات العلامة التجارية المختارة. |
الترتيب (sort) |
قائمة منسدلة |
القيم المدعومة: الأحدث (newest)، السعر من الأقل للأعلى (price_asc)، السعر من الأعلى للأقل (price_desc)، الاسم (name_asc). |
قيمة افتراضية آمنة عند عدم التحديد. |
يعيد ترتيب بطاقات المنتجات المعروضة فوراً. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| زر «تطبيق الفلاتر» / اختيار فلتر |
جميع الزوار والمشترين |
فوري |
تحديث قائمة المنتجات المعروضة ورابط الصفحة بمعاملات الفلترة. |
| زر «إعادة تعيين الفلاتر» (Reset Filters) |
جميع الزوار والمشترين |
فوري |
يمسح جميع الفلاتر ويعيد عرض الكتالوج الكامل على /products. |
| الضغط على بطاقة المنتج / «عرض التفاصيل» |
جميع الزوار والمشترين |
انتقال مباشر |
ينقل المستخدم إلى صفحة تفاصيل المنتج وشرائح الأسعار /products/{slug}. |
- انتقل إلى
/products من القائمة العلوية لاستعراض كتالوج أصناف الجملة.
- من لوحة الفلاتر الجانبية، حدد التصنيف المطلوب أو العلامة التجارية أو فعّل خيار «المتوفر في المخزون فقط».
- راجع بطاقات المنتجات المطابقة وتحقق من رمز
SKU والحد الأدنى للطلب (MOQ) والسعر لكل وحدة.
- اضغط على اسم المنتج أو صورته للانتقال إلى صفحة تفاصيله واستعراض جدول شرائح الخصم الكمي.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة تصفح للقراءة فقط (Read-Only): الفلترة والترتيب لا تكتب أي بيانات في قاعدة البيانات؛ تُحفظ معاملات التصفية في عنوان الرابط (Query String) بحيث يمكن مشاركة الرابط المفلتر مع أعضاء فريق المشتريات.
حالات الشاشة (States): حالة الفراغ: عند عدم تطابق أي صنف مع الفلاتر المختارة تظهر رسالة «لا توجد منتجات مطابقة لمعايير البحث الحالية» مع زر مسح الفلاتر؛ حالة نفاد المخزون: تظهر شارة «غير متوفر حالياً» بناءً على رصيد ABC الفعلي.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يفتح المشتري [email protected] صفحة /products، ويختار تصنيف «المعلبات والمواد الغذائية» مع ترتيب price_asc، فيحصل فوراً على الأصناف المتوفرة مرتبة من الأقل سعراً مع وضوح MOQ لكل صنف.
استكشاف الأخطاء: إذا ظهر صنف بشارة «غير متوفر»، فهذا يعكس الرصيد الكمي الفعلي (stock = 0) الوارد من نظام الشركة ABC ولا يمكن إضافته للسلة حتى ورود دفعة تحديث مخزون جديدة.
كتالوج منتجات الجملة والفلترة المتقدمة (PLP — العربية RTL) (الواجهة العربية (AR RTL) / الوضع الداكن (Dark Mode)) — Wholesale Product Listing Page (PLP — /products) (AR / dark) | Route: /products | Journey: DISC-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: تفاعل حسابي حي في صفحة المنتج (Interactive Pricing Tier Selection)
يوضح كيف يتفاعل جدول شرائح الكميات مع عداد العبوات في صفحة تفاصيل المنتج، حيث ينخفض سعر الوحدة تلقائياً فور وصول الكمية إلى عتبة الشريحة الأعلى.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: مشتري، مدير مشتريات، مالك منشأة، أو زائر
الصلاحيات والقيود: متاح للتجربة الفورية؛ يتطلب تسجيل الدخول للإضافة للسلة
المتطلبات المسبقة: صنف يحتوي على شرائح خصم كمي متعددة (Volume Tiers)
مسار التنقل الفعلي: صفحة تفاصيل المنتج /products/{slug} ← جدول شرائح الأسعار وعداد الكمية (/products/{slug})
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| جدول الشرائح المظلل (Highlighted Active Tier) |
لوحة الشراء في صفحة المنتج |
يبرز الشريحة النشطة حالياً باللون المميز مع عرض نسبة التوفير وسعر الوحدة الجديد. |
| عداد الكمية وإجمالي البند التقديري |
أسفل جدول الشرائح |
يعرض الكمية المختارة، السعر الإجمالي قبل الضريبة، ومبلغ ضريبة القيمة المضافة 15%. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
عداد الكمية (quantity) |
رقمي تفاعلي |
يتحرك بمضاعفات العبوة بدءاً من MOQ. |
يمنع النزول تحت MOQ. |
يحدّث الشريحة النشطة وإجمالي السعر لحظياً. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
اختيار شريحة كمية أعلى (+ أو النقر على صف الشريحة) |
المشتري |
فوري |
تطبيق سعر الشريحة الأعلى وتحديث الإجمالي قبل الإضافة للسلة. |
- افتح صفحة المنتج
/products/{slug} وراقب السعر الأساسي عند الحد الأدنى للطلب (MOQ).
- اضغط على صف الشريحة الثانية أو الثالثة في جدول شرائح الكميات أو زد الكمية عبر زر (
+).
- لاحظ انتقال التظليل إلى الشريحة الجديدة وانخفاض سعر الوحدة تلقائياً.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: تفاعل حسابي لحظي في الواجهة (Read-Only UI State) قبل الضغط على زر «إضافة إلى السلة».
حالات الشاشة (States): يمنع اختيار كمية تتجاوز الرصيد المتاح في مستودعات ABC.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: عند رفع الكمية من 10 إلى 50 عبوة، ينتقل السعر تلقائياً إلى شريحة الجملة الكبرى قبل إضافتها للسلة.
استكشاف الأخطاء: لتثبيت السعر المحسوب في سلة المنشأة، اضغط على زر «إضافة إلى السلة» بعد اختيار الشريحة.
تفاعل اختيار شريحة الكمية وحساب سعر الجملة في صفحة المنتج (الواجهة العربية (AR RTL) / الوضع الداكن (Dark Mode)) — Interactive Flow: PDP Volume Tier Selection & MOQ Calculation (/products/{slug}) (AR / dark) | Route: /products/{slug} | Journey: DISC-03
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: تفاعل كتابة وتحديث سلة المنشأة (Cart Mutation & Feedback Flow)
يوثق الاستجابة الفورية للنظام عقب الضغط على «إضافة إلى السلة»، حيث يظهر إشعار تأكيد واضح (Toast) ويتحدث عداد السلة في الشريط العلوي مع حفظ البند في سلة المنشأة النشطة.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: مشتري، مدير مشتريات، مالك منشأة
الصلاحيات والقيود: يتطلب تسجيل الدخول بحساب منشأة نشطة
المتطلبات المسبقة: تحديد كمية صالحة متوافقة مع MOQ والرصيد المتاح
مسار التنقل الفعلي: صفحة تفاصيل المنتج /products/{slug} ← الضغط على زر «إضافة إلى السلة» (/products/{slug})
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| إشعار التأكيد العلوي (Success Toast) |
أعلى الصفحة |
رسالة تأكيد بإضافة الصنف والكمية إلى سلة المنشأة مع زر سريع لفتح السلة. |
| شارة عداد السلة في الترويسة (Header Cart Badge) |
الشريط العلوي |
تعرض إجمالي عدد البنود والكميات المحدثة في سلة المنشأة. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
الكمية المضافة (quantity) |
رقمي |
مفحوصة خادمياً ضد MOQ والرصيد. |
تُرفض الكميات غير المتوافقة. |
تُضاف أو تُدمج مع البند الموجود في السلة. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| زر «إضافة إلى السلة» |
المشتري / مدير المشتريات / المالك |
إشعار Toast فوري |
حفظ البند في جدول سلة المنشأة النشطة وتحديث العداد. |
- حدد الكمية المطلوبة في صفحة المنتج
/products/{slug}.
- اضغط على زر «إضافة إلى السلة».
- تحقق من ظهور إشعار التأكيد وتحديث الرقم في أيقونة السلة العلوية.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: تُحفظ الإضافة فوراً في قاعدة البيانات مرتبطة بـ business_id الخاص بالمنشأة النشطة، وتبقى محفوظة عند الانتقال لصفحات أخرى أو تحديث المتصفح.
حالات الشاشة (States): أثناء الإرسال يُقفل الزر لحظياً لمنع تكرار الإضافة بالخطأ عند النقر المزدوج.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يضيف [email protected] الصنف إلى السلة فيظهر إشعار التأكيد ويرتفع عداد السلة في الترويسة فوراً.
استكشاف الأخطاء: إذا كنت مسجلاً في أكثر من منشأة، تأكد من أن المنشأة المختارة في الشريط العلوي هي المنشأة المراد الشراء لها.
تفاعل إضافة الصنف إلى السلة وإشعار التأكيد الفوري (Toast) (الواجهة العربية (AR RTL) / الوضع الداكن (Dark Mode)) — Interactive Flow: Add to Cart Confirmation Toast & Counter Update (/products/{slug}) (AR / dark) | Route: /products/{slug} | Journey: BUY-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: درج جانبي تفاعلي لإدارة السلة السريعة (Interactive Slide-Over Cart Drawer)
يمكّن المشتري من مراجعة بنود سلة المنشأة النشطة، التحقق من الأسعار والضريبة (15%)، والانتقال السريع إلى صفحة السلة الكاملة أو تقديم طلب شراء (RFQ) دون مغادرة صفحة التصفح الحالية.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: مشتري، مدير مشتريات، مالك منشأة
الصلاحيات والقيود: عضو نشط في المنشأة المختارة
المتطلبات المسبقة: وجود بند واحد على الأقل في سلة المنشأة (أو فتح الدرج لاستعراض حالة السلة)
مسار التنقل الفعلي: الشريط العلوي في أي صفحة ← الضغط على أيقونة السلة (/products/{slug})
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| ترويسة درج السلة وسياق المنشأة |
أعلى الدرج الجانبي |
اسم المنشأة النشطة المعزولة لها السلة، عدد البنود، وزر إغلاق الدرج (×). |
| قائمة البنود المضافة |
وسط الدرج |
بطاقة مصغرة لكل صنف توضح: الاسم، رمز SKU، الكمية، سعر الوحدة وفق الشريحة، زر تعديل الكمية، وزر الحذف. |
| ملخص المبالغ وأزرار الإجراء |
أسفل الدرج الجانبي |
المجموع الفرعي، ضريبة القيمة المضافة 15%، الإجمالي بالريال السعودي، زر «عرض السلة الكاملة» (/customer/cart)، وزر «متابعة تقديم طلب الشراء». |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
كمية البند داخل الدرج (item_quantity) |
عداد رقمي |
يلتزم بـ MOQ ومضاعفات العبوة. |
رفض أي قيمة أقل من MOQ. |
يحدّث كمية البند وإجمالي السلة في قاعدة البيانات فوراً. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
زر «عرض السلة الكاملة» (View Full Cart) |
المشتري / مدير المشتريات / المالك |
انتقال مباشر |
ينقل المستخدم إلى شاشة السلة التفصيلية /customer/cart. |
| زر حذف بند من السلة |
المشتري / مدير المشتريات / المالك |
تحديث فوري |
يزيل البند من سلة المنشأة ويعيد حساب الإجمالي. |
- اضغط على أيقونة السلة في الشريط العلوي لفتح درج السلة المصغرة.
- راجع البنود المضافة وتأكد من اسم المنشأة النشطة الظاهر أعلى الدرج.
- اضغط على «عرض السلة الكاملة» للانتقال إلى
/customer/cart وإتمام تقديم طلب الشراء (RFQ).
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: جميع محتويات الدرج مرتبطة بقاعدة البيانات بسياق المنشأة النشطة (business_id)؛ عند تبديل المنشأة تتبدل السلة المعروضة تلقائياً.
حالات الشاشة (States): حالة السلة الفارغة: تعرض رسالة «سلة المشتريات فارغة حالياً» مع زر لتصفح الكتالوج أو الطلب السريع بالباركود.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يفتح [email protected] درج السلة المصغرة أثناء تصفح الكتالوج ليتأكد من وصول إجمالي الطلبية إلى الميزانية المحددة قبل الانتقال إلى /customer/cart.
استكشاف الأخطاء: إذا لم تجد الأصناف التي أضفتها سابقاً، تحقق من محدد المنشأة النشطة في الشريط العلوي فقد تكون على منشأة فرعية أخرى.
درج السلة المصغرة المعزولة للمنشأة (Mini-Cart Drawer) (الواجهة العربية (AR RTL) / الوضع الداكن (Dark Mode)) — Interactive Flow: Business-Isolated Mini-Cart Slide-Over Drawer (/products/{slug}) (AR / dark) | Route: /products/{slug} | Journey: BUY-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: تفاعل حسابي حي في صفحة المنتج (Interactive Pricing Tier Selection)
يوضح كيف يتفاعل جدول شرائح الكميات مع عداد العبوات في صفحة تفاصيل المنتج، حيث ينخفض سعر الوحدة تلقائياً فور وصول الكمية إلى عتبة الشريحة الأعلى.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: مشتري، مدير مشتريات، مالك منشأة، أو زائر
الصلاحيات والقيود: متاح للتجربة الفورية؛ يتطلب تسجيل الدخول للإضافة للسلة
المتطلبات المسبقة: صنف يحتوي على شرائح خصم كمي متعددة (Volume Tiers)
مسار التنقل الفعلي: صفحة تفاصيل المنتج /products/{slug} ← جدول شرائح الأسعار وعداد الكمية (/products/{slug})
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| جدول الشرائح المظلل (Highlighted Active Tier) |
لوحة الشراء في صفحة المنتج |
يبرز الشريحة النشطة حالياً باللون المميز مع عرض نسبة التوفير وسعر الوحدة الجديد. |
| عداد الكمية وإجمالي البند التقديري |
أسفل جدول الشرائح |
يعرض الكمية المختارة، السعر الإجمالي قبل الضريبة، ومبلغ ضريبة القيمة المضافة 15%. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
عداد الكمية (quantity) |
رقمي تفاعلي |
يتحرك بمضاعفات العبوة بدءاً من MOQ. |
يمنع النزول تحت MOQ. |
يحدّث الشريحة النشطة وإجمالي السعر لحظياً. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
اختيار شريحة كمية أعلى (+ أو النقر على صف الشريحة) |
المشتري |
فوري |
تطبيق سعر الشريحة الأعلى وتحديث الإجمالي قبل الإضافة للسلة. |
- افتح صفحة المنتج
/products/{slug} وراقب السعر الأساسي عند الحد الأدنى للطلب (MOQ).
- اضغط على صف الشريحة الثانية أو الثالثة في جدول شرائح الكميات أو زد الكمية عبر زر (
+).
- لاحظ انتقال التظليل إلى الشريحة الجديدة وانخفاض سعر الوحدة تلقائياً.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: تفاعل حسابي لحظي في الواجهة (Read-Only UI State) قبل الضغط على زر «إضافة إلى السلة».
حالات الشاشة (States): يمنع اختيار كمية تتجاوز الرصيد المتاح في مستودعات ABC.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: عند رفع الكمية من 10 إلى 50 عبوة، ينتقل السعر تلقائياً إلى شريحة الجملة الكبرى قبل إضافتها للسلة.
استكشاف الأخطاء: لتثبيت السعر المحسوب في سلة المنشأة، اضغط على زر «إضافة إلى السلة» بعد اختيار الشريحة.
تفاعل اختيار شريحة الكمية وحساب سعر الجملة في صفحة المنتج (الواجهة الإنجليزية (EN LTR) / الوضع الفاتح (Light Mode)) — Interactive Flow: PDP Volume Tier Selection & MOQ Calculation (/products/{slug}) (EN / light) | Route: /products/{slug} | Journey: DISC-03
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: تفاعل كتابة وتحديث سلة المنشأة (Cart Mutation & Feedback Flow)
يوثق الاستجابة الفورية للنظام عقب الضغط على «إضافة إلى السلة»، حيث يظهر إشعار تأكيد واضح (Toast) ويتحدث عداد السلة في الشريط العلوي مع حفظ البند في سلة المنشأة النشطة.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: مشتري، مدير مشتريات، مالك منشأة
الصلاحيات والقيود: يتطلب تسجيل الدخول بحساب منشأة نشطة
المتطلبات المسبقة: تحديد كمية صالحة متوافقة مع MOQ والرصيد المتاح
مسار التنقل الفعلي: صفحة تفاصيل المنتج /products/{slug} ← الضغط على زر «إضافة إلى السلة» (/products/{slug})
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| إشعار التأكيد العلوي (Success Toast) |
أعلى الصفحة |
رسالة تأكيد بإضافة الصنف والكمية إلى سلة المنشأة مع زر سريع لفتح السلة. |
| شارة عداد السلة في الترويسة (Header Cart Badge) |
الشريط العلوي |
تعرض إجمالي عدد البنود والكميات المحدثة في سلة المنشأة. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
الكمية المضافة (quantity) |
رقمي |
مفحوصة خادمياً ضد MOQ والرصيد. |
تُرفض الكميات غير المتوافقة. |
تُضاف أو تُدمج مع البند الموجود في السلة. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| زر «إضافة إلى السلة» |
المشتري / مدير المشتريات / المالك |
إشعار Toast فوري |
حفظ البند في جدول سلة المنشأة النشطة وتحديث العداد. |
- حدد الكمية المطلوبة في صفحة المنتج
/products/{slug}.
- اضغط على زر «إضافة إلى السلة».
- تحقق من ظهور إشعار التأكيد وتحديث الرقم في أيقونة السلة العلوية.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: تُحفظ الإضافة فوراً في قاعدة البيانات مرتبطة بـ business_id الخاص بالمنشأة النشطة، وتبقى محفوظة عند الانتقال لصفحات أخرى أو تحديث المتصفح.
حالات الشاشة (States): أثناء الإرسال يُقفل الزر لحظياً لمنع تكرار الإضافة بالخطأ عند النقر المزدوج.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يضيف [email protected] الصنف إلى السلة فيظهر إشعار التأكيد ويرتفع عداد السلة في الترويسة فوراً.
استكشاف الأخطاء: إذا كنت مسجلاً في أكثر من منشأة، تأكد من أن المنشأة المختارة في الشريط العلوي هي المنشأة المراد الشراء لها.
تفاعل إضافة الصنف إلى السلة وإشعار التأكيد الفوري (Toast) (الواجهة الإنجليزية (EN LTR) / الوضع الفاتح (Light Mode)) — Interactive Flow: Add to Cart Confirmation Toast & Counter Update (/products/{slug}) (EN / light) | Route: /products/{slug} | Journey: BUY-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: درج جانبي تفاعلي لإدارة السلة السريعة (Interactive Slide-Over Cart Drawer)
يمكّن المشتري من مراجعة بنود سلة المنشأة النشطة، التحقق من الأسعار والضريبة (15%)، والانتقال السريع إلى صفحة السلة الكاملة أو تقديم طلب شراء (RFQ) دون مغادرة صفحة التصفح الحالية.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: مشتري، مدير مشتريات، مالك منشأة
الصلاحيات والقيود: عضو نشط في المنشأة المختارة
المتطلبات المسبقة: وجود بند واحد على الأقل في سلة المنشأة (أو فتح الدرج لاستعراض حالة السلة)
مسار التنقل الفعلي: الشريط العلوي في أي صفحة ← الضغط على أيقونة السلة (/products/{slug})
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| ترويسة درج السلة وسياق المنشأة |
أعلى الدرج الجانبي |
اسم المنشأة النشطة المعزولة لها السلة، عدد البنود، وزر إغلاق الدرج (×). |
| قائمة البنود المضافة |
وسط الدرج |
بطاقة مصغرة لكل صنف توضح: الاسم، رمز SKU، الكمية، سعر الوحدة وفق الشريحة، زر تعديل الكمية، وزر الحذف. |
| ملخص المبالغ وأزرار الإجراء |
أسفل الدرج الجانبي |
المجموع الفرعي، ضريبة القيمة المضافة 15%، الإجمالي بالريال السعودي، زر «عرض السلة الكاملة» (/customer/cart)، وزر «متابعة تقديم طلب الشراء». |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
كمية البند داخل الدرج (item_quantity) |
عداد رقمي |
يلتزم بـ MOQ ومضاعفات العبوة. |
رفض أي قيمة أقل من MOQ. |
يحدّث كمية البند وإجمالي السلة في قاعدة البيانات فوراً. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
زر «عرض السلة الكاملة» (View Full Cart) |
المشتري / مدير المشتريات / المالك |
انتقال مباشر |
ينقل المستخدم إلى شاشة السلة التفصيلية /customer/cart. |
| زر حذف بند من السلة |
المشتري / مدير المشتريات / المالك |
تحديث فوري |
يزيل البند من سلة المنشأة ويعيد حساب الإجمالي. |
- اضغط على أيقونة السلة في الشريط العلوي لفتح درج السلة المصغرة.
- راجع البنود المضافة وتأكد من اسم المنشأة النشطة الظاهر أعلى الدرج.
- اضغط على «عرض السلة الكاملة» للانتقال إلى
/customer/cart وإتمام تقديم طلب الشراء (RFQ).
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: جميع محتويات الدرج مرتبطة بقاعدة البيانات بسياق المنشأة النشطة (business_id)؛ عند تبديل المنشأة تتبدل السلة المعروضة تلقائياً.
حالات الشاشة (States): حالة السلة الفارغة: تعرض رسالة «سلة المشتريات فارغة حالياً» مع زر لتصفح الكتالوج أو الطلب السريع بالباركود.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يفتح [email protected] درج السلة المصغرة أثناء تصفح الكتالوج ليتأكد من وصول إجمالي الطلبية إلى الميزانية المحددة قبل الانتقال إلى /customer/cart.
استكشاف الأخطاء: إذا لم تجد الأصناف التي أضفتها سابقاً، تحقق من محدد المنشأة النشطة في الشريط العلوي فقد تكون على منشأة فرعية أخرى.
درج السلة المصغرة المعزولة للمنشأة (Mini-Cart Drawer) (الواجهة الإنجليزية (EN LTR) / الوضع الفاتح (Light Mode)) — Interactive Flow: Business-Isolated Mini-Cart Slide-Over Drawer (/products/{slug}) (EN / light) | Route: /products/{slug} | Journey: BUY-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: تفاعل حسابي حي في صفحة المنتج (Interactive Pricing Tier Selection)
يوضح كيف يتفاعل جدول شرائح الكميات مع عداد العبوات في صفحة تفاصيل المنتج، حيث ينخفض سعر الوحدة تلقائياً فور وصول الكمية إلى عتبة الشريحة الأعلى.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: مشتري، مدير مشتريات، مالك منشأة، أو زائر
الصلاحيات والقيود: متاح للتجربة الفورية؛ يتطلب تسجيل الدخول للإضافة للسلة
المتطلبات المسبقة: صنف يحتوي على شرائح خصم كمي متعددة (Volume Tiers)
مسار التنقل الفعلي: صفحة تفاصيل المنتج /products/{slug} ← جدول شرائح الأسعار وعداد الكمية (/products/{slug})
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| جدول الشرائح المظلل (Highlighted Active Tier) |
لوحة الشراء في صفحة المنتج |
يبرز الشريحة النشطة حالياً باللون المميز مع عرض نسبة التوفير وسعر الوحدة الجديد. |
| عداد الكمية وإجمالي البند التقديري |
أسفل جدول الشرائح |
يعرض الكمية المختارة، السعر الإجمالي قبل الضريبة، ومبلغ ضريبة القيمة المضافة 15%. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
عداد الكمية (quantity) |
رقمي تفاعلي |
يتحرك بمضاعفات العبوة بدءاً من MOQ. |
يمنع النزول تحت MOQ. |
يحدّث الشريحة النشطة وإجمالي السعر لحظياً. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
اختيار شريحة كمية أعلى (+ أو النقر على صف الشريحة) |
المشتري |
فوري |
تطبيق سعر الشريحة الأعلى وتحديث الإجمالي قبل الإضافة للسلة. |
- افتح صفحة المنتج
/products/{slug} وراقب السعر الأساسي عند الحد الأدنى للطلب (MOQ).
- اضغط على صف الشريحة الثانية أو الثالثة في جدول شرائح الكميات أو زد الكمية عبر زر (
+).
- لاحظ انتقال التظليل إلى الشريحة الجديدة وانخفاض سعر الوحدة تلقائياً.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: تفاعل حسابي لحظي في الواجهة (Read-Only UI State) قبل الضغط على زر «إضافة إلى السلة».
حالات الشاشة (States): يمنع اختيار كمية تتجاوز الرصيد المتاح في مستودعات ABC.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: عند رفع الكمية من 10 إلى 50 عبوة، ينتقل السعر تلقائياً إلى شريحة الجملة الكبرى قبل إضافتها للسلة.
استكشاف الأخطاء: لتثبيت السعر المحسوب في سلة المنشأة، اضغط على زر «إضافة إلى السلة» بعد اختيار الشريحة.
تفاعل اختيار شريحة الكمية وحساب سعر الجملة في صفحة المنتج (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Interactive Flow: PDP Volume Tier Selection & MOQ Calculation (/products/{slug}) (AR / light) | Route: /products/{slug} | Journey: DISC-03
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: تفاعل كتابة وتحديث سلة المنشأة (Cart Mutation & Feedback Flow)
يوثق الاستجابة الفورية للنظام عقب الضغط على «إضافة إلى السلة»، حيث يظهر إشعار تأكيد واضح (Toast) ويتحدث عداد السلة في الشريط العلوي مع حفظ البند في سلة المنشأة النشطة.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: مشتري، مدير مشتريات، مالك منشأة
الصلاحيات والقيود: يتطلب تسجيل الدخول بحساب منشأة نشطة
المتطلبات المسبقة: تحديد كمية صالحة متوافقة مع MOQ والرصيد المتاح
مسار التنقل الفعلي: صفحة تفاصيل المنتج /products/{slug} ← الضغط على زر «إضافة إلى السلة» (/products/{slug})
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| إشعار التأكيد العلوي (Success Toast) |
أعلى الصفحة |
رسالة تأكيد بإضافة الصنف والكمية إلى سلة المنشأة مع زر سريع لفتح السلة. |
| شارة عداد السلة في الترويسة (Header Cart Badge) |
الشريط العلوي |
تعرض إجمالي عدد البنود والكميات المحدثة في سلة المنشأة. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
الكمية المضافة (quantity) |
رقمي |
مفحوصة خادمياً ضد MOQ والرصيد. |
تُرفض الكميات غير المتوافقة. |
تُضاف أو تُدمج مع البند الموجود في السلة. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| زر «إضافة إلى السلة» |
المشتري / مدير المشتريات / المالك |
إشعار Toast فوري |
حفظ البند في جدول سلة المنشأة النشطة وتحديث العداد. |
- حدد الكمية المطلوبة في صفحة المنتج
/products/{slug}.
- اضغط على زر «إضافة إلى السلة».
- تحقق من ظهور إشعار التأكيد وتحديث الرقم في أيقونة السلة العلوية.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: تُحفظ الإضافة فوراً في قاعدة البيانات مرتبطة بـ business_id الخاص بالمنشأة النشطة، وتبقى محفوظة عند الانتقال لصفحات أخرى أو تحديث المتصفح.
حالات الشاشة (States): أثناء الإرسال يُقفل الزر لحظياً لمنع تكرار الإضافة بالخطأ عند النقر المزدوج.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يضيف [email protected] الصنف إلى السلة فيظهر إشعار التأكيد ويرتفع عداد السلة في الترويسة فوراً.
استكشاف الأخطاء: إذا كنت مسجلاً في أكثر من منشأة، تأكد من أن المنشأة المختارة في الشريط العلوي هي المنشأة المراد الشراء لها.
تفاعل إضافة الصنف إلى السلة وإشعار التأكيد الفوري (Toast) (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Interactive Flow: Add to Cart Confirmation Toast & Counter Update (/products/{slug}) (AR / light) | Route: /products/{slug} | Journey: BUY-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: درج جانبي تفاعلي لإدارة السلة السريعة (Interactive Slide-Over Cart Drawer)
يمكّن المشتري من مراجعة بنود سلة المنشأة النشطة، التحقق من الأسعار والضريبة (15%)، والانتقال السريع إلى صفحة السلة الكاملة أو تقديم طلب شراء (RFQ) دون مغادرة صفحة التصفح الحالية.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: مشتري، مدير مشتريات، مالك منشأة
الصلاحيات والقيود: عضو نشط في المنشأة المختارة
المتطلبات المسبقة: وجود بند واحد على الأقل في سلة المنشأة (أو فتح الدرج لاستعراض حالة السلة)
مسار التنقل الفعلي: الشريط العلوي في أي صفحة ← الضغط على أيقونة السلة (/products/{slug})
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| ترويسة درج السلة وسياق المنشأة |
أعلى الدرج الجانبي |
اسم المنشأة النشطة المعزولة لها السلة، عدد البنود، وزر إغلاق الدرج (×). |
| قائمة البنود المضافة |
وسط الدرج |
بطاقة مصغرة لكل صنف توضح: الاسم، رمز SKU، الكمية، سعر الوحدة وفق الشريحة، زر تعديل الكمية، وزر الحذف. |
| ملخص المبالغ وأزرار الإجراء |
أسفل الدرج الجانبي |
المجموع الفرعي، ضريبة القيمة المضافة 15%، الإجمالي بالريال السعودي، زر «عرض السلة الكاملة» (/customer/cart)، وزر «متابعة تقديم طلب الشراء». |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
كمية البند داخل الدرج (item_quantity) |
عداد رقمي |
يلتزم بـ MOQ ومضاعفات العبوة. |
رفض أي قيمة أقل من MOQ. |
يحدّث كمية البند وإجمالي السلة في قاعدة البيانات فوراً. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
زر «عرض السلة الكاملة» (View Full Cart) |
المشتري / مدير المشتريات / المالك |
انتقال مباشر |
ينقل المستخدم إلى شاشة السلة التفصيلية /customer/cart. |
| زر حذف بند من السلة |
المشتري / مدير المشتريات / المالك |
تحديث فوري |
يزيل البند من سلة المنشأة ويعيد حساب الإجمالي. |
- اضغط على أيقونة السلة في الشريط العلوي لفتح درج السلة المصغرة.
- راجع البنود المضافة وتأكد من اسم المنشأة النشطة الظاهر أعلى الدرج.
- اضغط على «عرض السلة الكاملة» للانتقال إلى
/customer/cart وإتمام تقديم طلب الشراء (RFQ).
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: جميع محتويات الدرج مرتبطة بقاعدة البيانات بسياق المنشأة النشطة (business_id)؛ عند تبديل المنشأة تتبدل السلة المعروضة تلقائياً.
حالات الشاشة (States): حالة السلة الفارغة: تعرض رسالة «سلة المشتريات فارغة حالياً» مع زر لتصفح الكتالوج أو الطلب السريع بالباركود.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يفتح [email protected] درج السلة المصغرة أثناء تصفح الكتالوج ليتأكد من وصول إجمالي الطلبية إلى الميزانية المحددة قبل الانتقال إلى /customer/cart.
استكشاف الأخطاء: إذا لم تجد الأصناف التي أضفتها سابقاً، تحقق من محدد المنشأة النشطة في الشريط العلوي فقد تكون على منشأة فرعية أخرى.
درج السلة المصغرة المعزولة للمنشأة (Mini-Cart Drawer) (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Interactive Flow: Business-Isolated Mini-Cart Slide-Over Drawer (/products/{slug}) (AR / light) | Route: /products/{slug} | Journey: BUY-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: تفاعل تحديث كمية وإعادة تسعير فوري (Live Cart Item Mutation)
يوضح كيف يؤدي تعديل كمية أي صنف داخل درج السلة المصغرة إلى إعادة حساب سعر الوحدة (وفق شرائح الجملة) وتحديث ضريبة القيمة المضافة (15%) والإجمالي الكلي في قاعدة البيانات فوراً.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: مشتري، مدير مشتريات، مالك منشأة
الصلاحيات والقيود: عضو مخول بالشراء في المنشأة النشطة
المتطلبات المسبقة: بند مضاف في درج السلة المصغرة
مسار التنقل الفعلي: درج السلة المصغرة ← الضغط على زر زيادة/إنقاص الكمية لبند مضاف (/products/{slug})
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| عداد كمية البند المحدث |
داخل بطاقة الصنف في الدرج |
الكمية الجديدة بعد الزيادة والسعر المحدث للسطر. |
| ملخص الإجماليات المحدث |
أسفل الدرج |
المجموع الفرعي الجديد ومبلغ الضريبة والإجمالي النهائي بالريال السعودي. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
كمية البند (quantity) |
رقمي |
مضاعفات العبوة وبحد أدنى MOQ. |
فحص فوري ضد الرصيد المتاح. |
تحديث سطر السلة وإجمالي السلة في الخادم. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
زر زيادة الكمية (+) أو إنقاصها (-) |
المشتري |
تحديث لحظي |
تعديل الكمية في جدول cart_items وتحديث الإجمالي. |
- افتح درج السلة المصغرة واضغط على زر (
+) لزيادة كمية الصنف بمقدار عبوة إضافية.
- لاحظ تحديث سعر السطر والمجموع الفرعي ومبلغ ضريبة القيمة المضافة 15% فوراً.
- حدّث الصفحة للتأكد من بقاء الكمية الجديدة محفوظة في سلة المنشأة.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: يحفظ التعديل فوراً في قاعدة البيانات (cart_items) ويستمر عبر جميع جلسات وأجهزة المنشأة.
حالات الشاشة (States): يعرض مؤشر تحميل خفيف أثناء إعادة الحساب ويمنع تجاوز الرصيد الكمي.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يزيد المشتري كمية الصنف داخل الدرج من 10 إلى 20 عبوة، فيتحدث الإجمالي شاملاً الضريبة ويُحفظ تلقائياً.
استكشاف الأخطاء: لإدخال كميات كبيرة جداً أو إضافة ملاحظات خاصة بكل بند، انتقل إلى صفحة السلة الكاملة /customer/cart.
تفاعل تحديث كمية البند وإعادة حساب الشريحة داخل السلة المصغرة (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Interactive Flow: Mini-Cart Quantity Update & Live Total Recalculation (/products/{slug}) (AR / light) | Route: /products/{slug} | Journey: BUY-01
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: حالة تحقق ومعالجة أخطاء في نموذج المصادقة (Validation & Error State)
توضح كيف يحمي النظام بوابة الدخول من المدخلات الفارغة أو الخاطئة عبر رسائل تحقق عربية واضحة ومحددة الموضع دون كشف معلومات حساسة عن الحسابات.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع المستخدمين
الصلاحيات والقيود: عام
المتطلبات المسبقة: الوصول إلى شاشة /login
مسار التنقل الفعلي: صفحة تسجيل الدخول /login ← محاولة الإرسال بحقول فارغة أو بيانات غير صحيحة (/login)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| شريط ترويسة السطح وسياق الجلسة (بوابة الهوية والأمان (SF / Auth) — التحقق من صحة بيانات الدخول) |
أعلى الشاشة |
يعرض عنوان الشاشة، مسار الوصول (/login)، وحالة الجلسة أو المنشأة النشطة. |
| تنبيه الخطأ العلوي وحواف الحقول الحمراء |
داخل بطاقة تسجيل الدخول |
رسالة تنبيه واضحة تشرح سبب رفض الدخول مع تمييز الحقل الذي يتطلب تصحيحاً. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
البريد الإلكتروني / الجوال (email) |
نصي — إلزامي |
صيغة بريد أو جوال صحيحة. |
رسالة خطأ فورية عند ترك الحقل فارغاً أو إدخال بريد غير صالح. |
يمنع إرسال النموذج حتى تصحيح الصيغة. |
كلمة المرور (password) |
كلمة مرور — إلزامي |
غير فارغة ومطابقة للسجل. |
يمسح حقل كلمة المرور تلقائياً عند الفشل لحماية الأمان. |
يرفض فتح الجلسة ويسجل محاولة الدخول الفاشلة. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| إعادة المحاولة بعد تصحيح البيانات |
المستخدم |
فوري |
إزالة رسائل الخطأ وإتمام الدخول عند صحة البيانات. |
- في شاشة
/login، إذا أُرسل النموذج بحقل فارغ أو كلمة مرور غير مطابقة، يظهر تنبيه الخطأ باللون الأحمر.
- راجع نص الرسالة تحت الحقل المعني وتأكد من كتابة البريد الإلكتروني الصحيح وإيقاف مفتاح الحروف الكبيرة (
Caps Lock).
- أعد إدخال كلمة المرور الصحيحة واضغط «تسجيل الدخول»، أو انتقل إلى «نسيت كلمة المرور؟».
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: لا تُنشأ أي جلسة عند فشل التحقق؛ تُسجل محاولة الفشل في عداد حماية المعدل (Rate Limiter) لمنع التخمين الآلي.
حالات الشاشة (States): بعد 5 محاولات فاشلة متتالية يتم تفعيل مهلة تهدئة مؤقتة لحماية الحساب.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يدخل مستخدم بريداً إلكترونياً بصيغة ناقصة في /login، فيمنع النظام الإرسال ويعرض رسالة التحقق العربية بوضوح.
استكشاف الأخطاء: تأكد من استخدام اسم المستخدم المعتمد في جدول الحسابات (accounts.html) دون مسافات إضافية في البداية أو النهاية.
تفاعل التحقق من المدخلات ورسائل الخطأ في شاشة تسجيل الدخول (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Interactive Flow: Login Form Validation & Error Feedback (/login) (AR / light) | Route: /login | Journey: AUTH-02
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: حالة انتقال ناجح وتفعيل سياق المنشأة (Post-Authentication Redirect State)
تثبت انتقال المستخدم فور نجاح تسجيل الدخول من المتجر العام إلى مركز قيادة العميل (/customer/overview) مع تفعيل سياق المنشأة النشطة وظهور شريط التنقل الخاص بالعميل.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: مالك المنشأة، مدير الشركة، مدير المشتريات، المشتري، معتمد العروض، المالية
الصلاحيات والقيود: جلسة عميل موثقة (auth middleware)
المتطلبات المسبقة: نجاح التحقق من بيانات الاعتماد في /login
مسار التنقل الفعلي: صفحة /login ← إدخال بيانات صحيحة ← التوجيه التلقائي إلى /customer/overview (/customer/overview)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| شريط سياق المنشأة النشطة وهوية المستخدم |
أعلى بوابة العميل |
اسم المستخدم المسجل، اسم المنشأة النشطة، حالة توثيق KYB، وزر التبديل بين المنشآت. |
| بطاقات الملخص التشغيلي للمنشأة |
وسط الشاشة |
ملخص الطلبات النشطة، عروض الأسعار بانتظار القرار، الرصيد الائتماني، والتنبيهات. |
3. حالة الحقول والمدخلات (Read-Only Screen Notice): هذه الشاشة مخصصة للقراءة والاستعراض التشغيلي فقط (isReadOnly: true)؛ لا تتضمن حقول إدخال نصية تعدّل السجلات في قاعدة البيانات الخلفية.
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| الانتقال المباشر لوحدات بوابة العميل من القائمة الجانبية |
المستخدم المسجل |
فوري |
الوصول الفوري إلى الكتالوج، السلة، طلبات الشراء، عروض الأسعار، والطلبات. |
- بعد الضغط على «تسجيل الدخول» ببيانات صحيحة في
/login، يتحقق الخادم من الدور والمنشآت المرتبطة.
- يوجّه النظام العميل تلقائياً إلى
/customer/overview مع تحميل بيانات منشأته النشطة.
- تأكد من ظهور اسم المنشأة وحالة توثيقها في الشريط العلوي.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: تظل الجلسة الموثقة وسياق المنشأة النشطة محفوظين في الخادم عبر جميع الصفحات حتى تسجيل الخروج الصريح. (شاشة قراءة واستعراض فقط Read-Only — لا تكتب أو تعدّل سجلات جديدة في قاعدة البيانات عند فتحها).
حالات الشاشة (States): إذا كان الحساب لا يزال بحاجة لإكمال الملف الشخصي الأولي، يوجهه النظام أولاً إلى شاشة إكمال الملف.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يسجل [email protected] دخوله فينتقل فوراً إلى /customer/overview وتظهر له مؤشرات شركة الصفوة للتجارة.
استكشاف الأخطاء: لتسجيل الخروج الآمن بعد انتهاء العمل، استخدم زر «تسجيل الخروج» في القائمة العلوية أو الجانبية.
تفاعل نجاح تسجيل الدخول والتوجيه الذكي لمركز قيادة العميل (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Interactive Flow: Authenticated Login Success & Post-Login Redirect (/customer/overview) (AR / light) | Route: /customer/overview | Journey: AUTH-02
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: تفاعل إرسال طلب استعادة كلمة المرور (Recovery Step 1 Submission)
توثق الخطوة العملية الأولى في رحلة AUTH-03 عند كتابة رقم الجوال السعودي (mobile) واختيار قناة الإرسال (channel) في /password/forgot والضغط على زر إرسال رمز التحقق.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع المستخدمين
الصلاحيات والقيود: عام (guest + throttle:auth-otp)
المتطلبات المسبقة: حساب مسجل ونشط برقم جوال سعودي (mobile)
مسار التنقل الفعلي: صفحة /login ← «نسيت كلمة المرور؟» ← تعبئة رقم الجوال السعودي (mobile) (/password/forgot)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| شريط ترويسة السطح وسياق الجلسة (بوابة الهوية والأمان (SF / Auth) — الخطوة الأولى لاستعادة كلمة المرور) |
أعلى الشاشة |
يعرض عنوان الشاشة، مسار الوصول (/password/forgot)، وحالة الجلسة أو المنشأة النشطة. |
| حقل الجوال المعبأ وزر الإرسال |
وسط بطاقة الاستعادة |
رقم الجوال السعودي المدخل جاهزاً للإرسال لإصدار رمز التحقق المؤقت. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
رقم الجوال السعودي (mobile) |
نصي — إلزامي (required|string) |
يُطبع تلقائياً عبر SaudiMobileNormalizer::tryNormalize. |
فحص صيغة الجوال السعودي ومعدل الطلبات (throttle:auth-otp). |
إصدار رمز OTP عبر OtpService::requestOtp والانتقال إلى /password/verify. |
قناة الإرسال (channel) |
اختيار — اختياري (nullable|string|in:whatsapp,sms) |
يقبل whatsapp أو sms. |
يتحقق من القيمة ضمن القائمة المسموحة. |
توجيه الرمز عبر القناة المختارة. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
زر «إرسال رمز التحقق» (POST /password/forgot) |
المستخدم |
فوري |
الانتقال إلى الخطوة الثانية /password/verify لإدخال رمز OTP. |
- أدخل رقم الجوال السعودي المسجل للحساب في حقل
mobile.
- اضغط على زر «إرسال رمز التحقق» للانتقال إلى شاشة
/password/verify.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: ينشئ سجل رمز تحقق مشفر ومؤقت الصلاحية في قاعدة البيانات ويحفظ password_reset.request_id وpassword_reset.mobile في الجلسة.
حالات الشاشة (States): يقفل الزر أثناء الإرسال لمنع تكرار توليد الرموز.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يدخل المستخدم رقم جواله المسجل ويضغط إرسال فينقله النظام إلى /password/verify.
استكشاف الأخطاء: تأكد من كتابة نفس رقم الجوال السعودي المسجل في حسابك بالمنصة.
تفاعل إدخال رقم الجوال وإطلاق طلب استعادة كلمة المرور (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Interactive Flow: Forgot Password Step 1 — Mobile Submission (/password/forgot — WebPasswordResetController@requestOtp) (AR / light) | Route: /password/forgot | Journey: AUTH-03
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: نموذج تحقق برمز أمني مؤقت (OTP Verification Form)
تتحقق من ملكية المستخدم لرقم الجوال عبر مطالبته بإدخال رمز التحقق لمرة واحدة (code) في مسار /password/verify قبل إصدار رمز إعادة التعيين (reset_token) والانتقال إلى /password/reset.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع المستخدمين
الصلاحيات والقيود: عام (guest middleware) مع حماية معدل الطلبات (throttle:auth-otp) وجلسة استعادة نشطة
المتطلبات المسبقة: إرسال طلب استعادة كلمة المرور بنجاح واستلام رمز OTP مع وجود password_reset.request_id في الجلسة
مسار التنقل الفعلي: الانتقال التلقائي إلى /password/verify بعد إرسال طلب الاستعادة في /password/forgot (/password/verify)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| شريط ترويسة السطح وسياق الجلسة (بوابة الهوية والأمان (SF / Auth) — التحقق برمز OTP) |
أعلى الشاشة |
يعرض عنوان الشاشة، مسار الوصول (/password/verify)، وحالة الجلسة أو المنشأة النشطة. |
| بطاقة إدخال رمز التحقق (OTP Input Card) |
وسط الشاشة |
تنبيه بإرسال الرمز، حقل إدخال رمز التحقق (code)، معرّف الطلب والجوال في الجلسة (request_id, mobile)، وزر «تحقق ومتابعة». |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
رمز التحقق (code) |
نصي/رقمي — إلزامي (required|string) |
يرتبط بمعرّف الطلب request_id ورقم الجوال mobile وفترة صلاحية زمنية قصيرة. |
يتحقق عبر OtpService::verifyOtp($requestId, $code, 'password_reset') ويرفض الرمز المنتهي الصلاحية أو غير المطابق. |
ينشئ رمز إعادة تعيين مشفر (reset_token) صالح لمدة 15 دقيقة في جدول password_reset_tokens ويوجّه المستخدم إلى /password/reset. |
معرّف الطلب ورقم الجوال (request_id / mobile) |
حقول جلسة/مخفية (session / hidden) |
تُقرأ من الجلسة password_reset.request_id وpassword_reset.mobile أو من الطلب. |
إلزامية لإتمام المطابقة؛ وفي حال غيابها يُعاد التوجيه إلى /password/forgot. |
تربط عملية التحقق بطلب الاستعادة الصحيح. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
زر «تحقق ومتابعة» (POST /password/verify) |
المستخدم |
فوري |
تنفيذ WebPasswordResetController@verifyOtp، حفظ password_reset.reset_token في الجلسة، والانتقال إلى /password/reset. |
رابط «طلب رمز جديد» (/password/forgot) |
المستخدم |
فوري |
العودة إلى /password/forgot لطلب رمز جديد. |
- افتح الرسالة الواردة إلى جوالك (واتساب أو SMS) وانسخ رمز التحقق (
code).
- أدخل الرمز في حقل
code داخل شاشة /password/verify واضغط على «تحقق ومتابعة».
- عند نجاح المطابقة ينقلك النظام مباشرة إلى شاشة
/password/reset لتعيين كلمة المرور الجديدة.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: يُستهلك رمز OTP لمرة واحدة، ويُخزن هاش رمز إعادة التعيين hash('sha256', $resetToken) في جدول password_reset_tokens مع حفظ password_reset.reset_token في الجلسة.
حالات الشاشة (States): عند انتهاء صلاحية الرمز أو عدم تطابقه، يعرض النظام رسالة خطأ واضحة في حقل code.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يدخل المستخدم رمز التحقق الصحيح في /password/verify فينتقل فوراً إلى /password/reset.
استكشاف الأخطاء: لا تشارك رمز OTP مع أي طرف أبداً؛ موظفو الدعم في انطلاقة سهم لن يطلبوا منك هذا الرمز مطلقاً.
شاشة إدخال رمز التحقق لمرة واحدة (OTP Verification Step) (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Interactive Flow: Password Recovery Step 2 — OTP Verification (/password/verify — WebPasswordResetController@showVerifyForm) (AR / light) | Route: /password/verify | Journey: AUTH-03
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: نموذج تحديث كلمة المرور (Password Reset Mutation Form)
تتيح للمستخدم تعيين كلمة مرور جديدة قوية لحسابه وتأكيدها في مسار /password/reset، مع إبطال جميع الجلسات النشطة الأخرى وحذف رمز الاستعادة وإعادة تفعيل الوصول الآمن للحساب.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع المستخدمين
الصلاحيات والقيود: عام (guest middleware) مع حماية معدل الطلبات (throttle:auth-login) ورمز إعادة تعيين موثق في الجلسة
المتطلبات المسبقة: اجتياز التحقق برمز OTP في /password/verify مع وجود password_reset.reset_token صالح في الجلسة
مسار التنقل الفعلي: الانتقال التلقائي إلى /password/reset بعد نجاح التحقق من رمز OTP في /password/verify (/password/reset)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| شريط ترويسة السطح وسياق الجلسة (بوابة الهوية والأمان (SF / Auth) — تعيين كلمة المرور الجديدة) |
أعلى الشاشة |
يعرض عنوان الشاشة، مسار الوصول (/password/reset)، وحالة الجلسة أو المنشأة النشطة. |
| نموذج تعيين كلمة المرور الجديدة |
وسط الشاشة |
حقل كلمة المرور الجديدة (password)، حقل تأكيد كلمة المرور الجديدة (password_confirmation)، رمز إعادة التعيين الموثق (reset_token)، وزر «حفظ كلمة المرور الجديدة». |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
كلمة المرور الجديدة (password) |
كلمة مرور — إلزامي (required|string|min:8|confirmed) |
8 خانات على الأقل مع اشتراط التطابق مع حقل التأكيد. |
يرفض كلمات المرور الأقصر من 8 خانات أو غير المتطابقة. |
تُشفر عبر Hash::make وتُحفظ في سجل المستخدم مع تحديث password_changed_at. |
تأكيد كلمة المرور الجديدة (password_confirmation) |
كلمة مرور — إلزامي |
يجب أن يتطابق حرفياً مع حقل كلمة المرور الجديدة (confirmed). |
يعرض رسالة خطأ عند وجود أي اختلاف بين الحقلين. |
يؤكد صحة الإدخال قبل الحفظ. |
رمز إعادة التعيين (reset_token) |
حقل جلسة/مخفي (session / hidden) |
يُقرأ من password_reset.reset_token في الجلسة أو الطلب وتُفحص بصمته sha256 في جدول password_reset_tokens (صالح لمدة 15 دقيقة). |
يرفض الرمز غير الموجود أو المنتهي الصلاحية (أكثر من 15 دقيقة). |
يُحذف السجل من password_reset_tokens فور نجاح التعيين. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
زر «حفظ كلمة المرور الجديدة» (POST /password/reset) |
المستخدم |
تحديث فوري وإشعار نجاح |
تنفيذ WebPasswordResetController@resetPassword، حفظ كلمة المرور المشفرة، حذف الجلسات الأخرى من جدول sessions، تنظيف جلسة password_reset، والتوجيه إلى /login. |
- أدخل كلمة المرور الجديدة (8 خانات على الأقل) في الحقل الأول داخل
/password/reset.
- أعد كتابة نفس كلمة المرور في حقل «تأكيد كلمة المرور الجديدة» (
password_confirmation).
- اضغط على «حفظ كلمة المرور الجديدة» ليتم تحديث حسابك وتوجيهك إلى
/login.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: تُحدّث password وpassword_changed_at في جدول users، ويُحذف سجل password_reset_tokens، وتُحذف جلسات المستخدم السابقة من جدول sessions.
حالات الشاشة (States): إذا انتهت صلاحية reset_token (بعد 15 دقيقة)، يوجّه النظام المستخدم لطلب رمز جديد من /password/forgot.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يعيّن المستخدم كلمة مرور جديدة مطابقة لسياسة الأمان في /password/reset ويضغط حفظ، فيتم اعتمادها فوراً وتوجيهه إلى /login.
استكشاف الأخطاء: تأكد من تطابق الحقلين تماماً ومن استيفاء الحد الأدنى لطول كلمة المرور (8 خانات على الأقل).
شاشة تعيين كلمة المرور الجديدة وتأكيدها (Password Reset Completion) (الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode)) — Interactive Flow: Password Recovery Step 3 — New Password Reset (/password/reset — WebPasswordResetController@showResetForm) (AR / light) | Route: /password/reset | Journey: AUTH-03
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة متجاوبة للقراءة فقط بنظام البطاقات العمودية (Responsive Mobile Read-Only View)
تثبت توافق الصفحة الرئيسية للمتجر العام مع شاشات الجوال الصغيرة (375×812) بنظام البطاقات المكدسة عمودياً (Cards-First Layout) مع صفر تمرير أفقي (Zero Horizontal Overflow) وقائمة تنقل مدمجة قابلة للفتح.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع الزوار والمشترين عبر متصفح الجوال
الصلاحيات والقيود: عام بدون تسجيل دخول
المتطلبات المسبقة: لا يوجد
مسار التنقل الفعلي: فتح https://antlaqasahm.sa/ من متصفح الجوال (عرض 375px) (/)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| ترويسة الجوال المدمجة (Mobile Compact Header) |
أعلى شاشة الجوال |
شعار المنصة، زر القائمة الجانبية المنسدلة، أيقونة السلة، وزر البحث السريع. |
| البانر والبطاقات المتجاوبة عمودياً |
امتداد الشاشة العمودي |
بانر العروض والقطاعات التجارية مرتبة في عمود واحد/عمودين متناسبين مع اللمس. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
شريط البحث المتجاوب (q) |
نصي — اختياري |
مناسب للوحة مفاتيح الجوال. |
قياسي. |
ينقل إلى /search?q=.... |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| زر القائمة المدمجة (Mobile Menu Toggle) |
مستخدم الجوال |
فوري |
يفتح روابط التصنيفات والعلامات التجارية ومبدل اللغة والوضع. |
- افتح
/ من متصفح الجوال وتأكد من احتواء جميع العناصر داخل عرض الشاشة دون انزياح أفقي.
- استخدم القائمة العلوية أو اضغط على بطاقات القطاعات للتنقل باللمس بسهولة.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة عرض للقراءة فقط (Read-Only): لا تكتب أي بيانات في الخادم.
حالات الشاشة (States): تم التحقق آلياً عبر Playwright من أن documentElement.scrollWidth <= window.innerWidth (صفر فيض أفقي).
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يتصفح تاجر جملة الموقع عبر متصفح هاتفه قبل تحميل التطبيق، فيحصل على تجربة قراءة وتصفح كاملة وسلسة.
استكشاف الأخطاء: للحصول على ميزات البصمة وماسح الكاميرا المباشر، يُنصح بتثبيت تطبيق العميل المخصص للجوال (Flutter).
الصفحة الرئيسية للمتجر العام — تصميم الجوال المتجاوب (375×812) — الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode) — Responsive Mobile Storefront Homepage (/ — 375x812 Viewport) (AR / light) | Route: / | Journey: AUTH-09
اضغط للتكبير (Click to Zoom)
1. أ) الغرض التشغيلي ونوع الشاشة (Purpose & Screen Type)
تصنيف الشاشة: شاشة كتالوج متجاوبة للقراءة فقط (Responsive Mobile Catalog Cards View)
تعرض كتالوج منتجات الجملة على شاشات الجوال بنظام البطاقات الكاملة بدلاً من الجداول العريضة، مع درج فلاتر قابل للطي للحفاظ على وضوح الأسعار وشروط MOQ.
1. ب) الصلاحيات والمتطلبات ومسار الوصول (Access, Prerequisites & Route)
الأدوار المخولة: جميع الزوار والمشترين عبر متصفح الجوال
الصلاحيات والقيود: عام للتصفح
المتطلبات المسبقة: منتجات منشورة في الكتالوج
مسار التنقل الفعلي: فتح /products من متصفح الجوال (عرض 375px) (/products)
2. التشريح البصري ومناطق الشاشة (Visual Anatomy & Screen Zones)
| المنطقة البصرية (Screen Zone) |
الموقع في الواجهة |
المحتويات والمؤشرات الفعلية |
| شريط الفلاتر والترتيب المدمج للجوال |
أعلى قائمة المنتجات |
زر إظهار الفلاتر القطاعية وقائمة الترتيب السريع. |
| بطاقات المنتجات العمودية للجوال |
وسط الشاشة |
بطاقات واضحة تعرض صورة المنتج، الاسم، رمز SKU، MOQ، والسعر بالريال السعودي. |
3. مرجع الحقول والمدخلات وقواعد التحقق (Fields, Constraints & Validation)
| اسم الحقل / الضابط |
النوع |
القيود والحدود |
قواعد التحقق والرفض |
الأثر التشغيلي عند الإدخال |
فلاتر التصنيف والترتيب (category / sort) |
قوائم اختيار متجاوبة |
تعمل باللمس على الجوال. |
قياسي. |
تحديث قائمة المنتجات المعروضة في /products. |
4. مرجع الأزرار والإجراءات وخطوات الاستخدام (Actions & Step-by-Step Guide)
| الزر / الإجراء التشغيلي |
من يملك صلاحية تنفيذه |
آلية التأكيد |
النتيجة الفعلية في الواجهة والنظام |
| الضغط على بطاقة المنتج |
مستخدم الجوال |
انتقال مباشر |
فتح صفحة تفاصيل الصنف /products/{slug}. |
- افتح
/products على متصفح الجوال واستعرض بطاقات الأصناف المرتبة عمودياً.
- استخدم زر الفلاتر لتحديد التصنيف المطلوب أو ترتيب الأسعار.
- اضغط على البطاقة للانتقال إلى شرائح الكميات.
5. أ) سلوك حفظ البيانات وحالات الشاشة (True Persistence & UI States)
سلوك البيانات الفعلي: شاشة قراءة فقط (Read-Only): الفلترة تُحفظ في الرابط فقط.
حالات الشاشة (States): محققة بمعيار صفر تمرير أفقي (Zero Horizontal Overflow) على عرض 375px.
5. ب) مثال تطبيقي واقعي واستكشاف الأخطاء (Worked Example & Troubleshooting)
مثال عملي: يراجع المشتري أسعار الكتالوج من متصفح هاتفه أثناء وجوده في المستودع ويختار الأصناف المطلوبة.
استكشاف الأخطاء: لإعادة عرض كافة الأصناف بعد التصفية اضغط على «إعادة تعيين الفلاتر».
كتالوج منتجات الجملة — تصميم الجوال المتجاوب (375×812) — الواجهة العربية (AR RTL) / الوضع الفاتح (Light Mode) — Responsive Mobile Product Listing Page (/products — 375x812 Viewport) (AR / light) | Route: /products | Journey: AUTH-09
اضغط للتكبير (Click to Zoom)
