اللغات

كيف يعمل المطعم بالإنجليزية والعربية، وكيف تغيّر أي نص، وما الذي تغيّره لإضافة لغة.

لحزمة الحزمة الكاملة

اللغات المتوفرة

الإنجليزية والعربية، في التطبيقات الثلاثة. تعرض العربية الواجهة كلها من اليمين إلى اليسار، مع خط IBM Plex Sans Arabic في الموقع، وتبقى الأرقام بالأرقام اللاتينية في اللغتين.

التطبيق	الإنجليزية	العربية
موقع الطلبات	`/en/…`	`/ar/…`
لوحة تحكم الفريق	`/en/…`	`/ar/…`
API	`Accept-Language: en`	`Accept-Language: ar`

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

كيف تُختار اللغة

اللغة هي الجزء الأول من العنوان. المسار الذي لا يحتوي لغة يذهب إلى /en.
يبدّل محدد اللغة ذلك الجزء من العنوان ويُبقي الصفحة نفسها.
في الموقع، يُضبط الاتجاه قبل أول عرض للصفحة، لذلك لا تومض الصفحة العربية أبدًا من اليسار إلى اليمين.
ترسل الواجهتان الأماميتان لغة الصفحة إلى واجهة API، فتعود رسائلها باللغة نفسها. ويتذكر الطلب اللغة التي أُرسل بها.

غيّر نصًا

كل كلمة ظاهرة موجودة في messages/<namespace>/en.json وar.json، في مجلد كل واجهة أمامية. غيّر القيمة، وأبقِ المفتاح، وغيّرها في الملفين.

التطبيق	مساحات الأسماء
موقع الطلبات	`account`, `auth`, `cart`, `checkout`, `common`, `home`, `layouts`, `legal`, `locations`, `seo`, `store`, `support`, `tracking`, `wishlist`
لوحة تحكم الفريق	`ai-assistant`، و`auth`، و`common`، و`dashboard` (مع مجلد لكل صفحة)، و`demo-credentials`، و`layouts`

المفتاح الناقص في ar.json يظهر كرسالة ناقصة في الجهة العربية، لذلك أبقِ الملفين متطابقين.
النص داخل الأقواس {curly} يملؤه التطبيق، مثل {count} أو {name}. أبقِ هذه الكلمات كما هي في اللغتين.
تسميات الشريط الجانبي في لوحة التحكم رسائل أيضًا، تحت nav في messages/dashboard/en.json وar.json.

ما تترجمه واجهة API

تعود رسائل الأخطاء وmessage الخاصة بعمليات الكتابة الناجحة بلغة الترويسة Accept-Language. تُعامَل ar-SA كعربية؛ وأي لغة لا تملكها واجهة API تعود إلى الإنجليزية.
الأخطاء التي يراها العميل، مثل مطبخ مغلق، تُرسل كمفاتيح مثل errors.kitchen_closed، ويعرض الموقع جملته الخاصة لكل منها.
نصوصها الخاصة ملفات JSON في back-end/src/i18n/translations/en/ وar/، ملف لكل قسم: admin وauth وcategory وcommon وmail وorder وproduct وroles وsettings وusers. رسالة إعادة تعيين كلمة المرور موجودة في mail.
تعود الأطباق وسجلات القائمة الأخرى باللغتين، بالشكل { "en": "…", "ar": "…" }، وتختار الواجهة الأمامية إحداهما.

أضف لغة إلى الموقع

اللغتان مكتوبتان في عدد قليل من الملفات، لذلك تتطلب إضافة لغة ثالثة تعديل كل منها. المسارات داخل storefront/.

أضف الرمز إلى locales في src/config/i18n.ts، وفي src/proxy.ts، وفي src/app/[locale]/layout.tsx.
انسخ كل ملف messages/<namespace>/en.json إلى ملف باسم الرمز الجديد، وترجم القيم.
إذا كانت اللغة تُكتب من اليمين إلى اليسار، وسّع فحص الاتجاه في src/app/layout.tsx، الذي لا يعرف سوى ar.
أضف الرمز الجديد إلى src/components/LanguageSwitcher.tsx، ونصوصه إلى src/config/brand.config.ts، الذي يحتوي على الأسماء وعنوان الصفحة الرئيسية بـ en وar.
المكوّنات التي تختار نص القائمة حسب اللغة، مثل نتائج البحث وشريط الفئات وخريطة المطابخ، تختار بين en وar. ابحث في src/ عن "ar" وأضف الرمز الجديد هناك أيضًا.

أضف لغة إلى لوحة التحكم

أضف الرمز إلى locales في src/config/i18n.ts وsrc/proxy.ts وsrc/app/[locale]/layout.tsx، وإلى قوائم اللغات في src/components/LanguageSwitcher.tsx، وقائمة المستخدم، وإعداد اللغة.
انسخ كل ملف messages/**/en.json إلى ملف باسم الرمز الجديد، وترجم القيم.
تُدخل النماذج كل نص في القائمة بالإنجليزية والعربية جنبًا إلى جنب (src/components/ui/LanguageTabs.tsx وحقول الإدخال ثنائية اللغة). اللغة الثالثة هناك تحتاج أيضًا إلى أن تحفظها واجهة API.

أضف لغة إلى واجهة API

تعرف واجهة API en وar في back-end/src/i18n/i18n.service.ts وفي فحوص الطلبات والتواصل. أضف الرمز الجديد هناك، وانسخ src/i18n/translations/en/ إلى مجلد باسمه، وترجم الملفات. تحفظ سجلات القائمة زوجًا { en, ar }، لذلك تتطلب لغة ثالثة في البيانات تعديل هذه السجلات وتعبئة البيانات.