اللغات
كيف يعمل المتجر بالإنجليزية والعربية، وكيف تغيّر أي نص، وما الذي تغيّره لإضافة لغة.
لحزمة الحزمة الكاملة
اللغات المتوفرة
الإنجليزية والعربية، في التطبيقات الثلاثة. تعرض العربية الواجهة كلها من اليمين إلى اليسار، مع خطوطها الخاصة في المتجر.
| التطبيق | الإنجليزية | العربية |
|---|---|---|
| المتجر | /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, seo, store, support, tryon, wishlist |
| لوحة الإدارة | ai-assistant، وauth، وcommon، وdashboard (مع مجلد لكل صفحة)، وdemo-credentials، وlayouts |
- المفتاح المفقود من
ar.jsonيظهر كخطأ رسالة مفقودة في النسخة العربية، لذا أبقِ الملفين متطابقين. - تسميات الشريط الجانبي في لوحة الإدارة هي الاستثناء: فهي مكتوبة بالإنجليزية والعربية في
src/layouts/dashboard/sidebar/config/navigationData.ts. - النص داخل الأقواس المعقوفة
{curly}يملؤه التطبيق، مثل{brand}. أبقِ تلك الكلمات كما هي في اللغتين.
التسميات العربية في التطبيقات نفسها
عندما تكتب عن المتجر بالعربية، استخدم التسميات التي تعرضها شاشاته:
| الإنجليزية | العربية | المكان |
|---|---|---|
Home | الرئيسية | قائمة المتجر |
Shop | المتجر | قائمة المتجر |
Cart | السلة | المتجر |
Checkout | إتمام الشراء | المتجر |
Wishlist | المفضلة | المتجر |
Sign In | تسجيل الدخول | كلا التطبيقين |
Track Order | تتبع الطلب | المتجر |
Overview | نظرة عامة | الشريط الجانبي للوحة الإدارة |
AI Assistant | المساعد الذكي | الشريط الجانبي للوحة الإدارة |
Products | المنتجات | الشريط الجانبي للوحة الإدارة |
Categories | الفئات | الشريط الجانبي للوحة الإدارة |
Orders | الطلبات | الشريط الجانبي للوحة الإدارة |
Users | المستخدمين | الشريط الجانبي للوحة الإدارة |
Home Page | الصفحة الرئيسية | الشريط الجانبي للوحة الإدارة |
Admin Management | إدارة المسؤولين | الشريط الجانبي للوحة الإدارة |
Admin Roles | أدوار المسؤولين | الشريط الجانبي للوحة الإدارة |
Settings | الإعدادات | الشريط الجانبي للوحة الإدارة |
Notifications | الإشعارات | الشريط العلوي للوحة الإدارة |
تسمّي صفحة الأدوار وتبويب الإعدادات الموظفين «المشرفين» بينما يسمّيهم الشريط الجانبي «المسؤولين». اختر كلمة واحدة وغيّر الأخرى في messages/dashboard/settings/ إذا كان هذا الفرق يهمك.
ما تترجمه واجهة API
- تعود رسائل الأخطاء و
messageالخاصة بعمليات الكتابة الناجحة بلغة الترويسةAccept-Language. تُعامَلar-SAكعربية؛ وأي لغة لا تملكها واجهة API تعود إلى الإنجليزية. - نصوصها ملفات JSON في
back-end/src/i18n/translations/en/وar/، ملف لكل مجال:adminوauthوcategoryوcommonوcountriesوorderوproductوprojectوrolesوsettingsوtasksوusers. - تعود المنتجات والفئات باللغتين، بالشكل
{ "en": "…", "ar": "…" }، وتختار الواجهة الأمامية إحداهما.
أضف لغة إلى المتجر
اللغتان مكتوبتان في عدة ملفات، لذا فإضافة لغة ثالثة تمس كلًّا منها. المسارات داخل storefront/.
أضف رمز اللغة
أضفه إلى قوائم اللغات في
src/config/i18n.tsوsrc/proxy.tsوsrc/app/[locale]/layout.tsxوsrc/components/LanguageSwitcher.tsx، وإلىsrc/lib/seo/ogLocales.ts.ترجم الرسائل
انسخ
en.jsonإلى<code>.jsonفي كل مجلد من المجلدات الاثني عشر داخلmessages/وترجم القيم.اضبط الاتجاه
للغة تُكتب من اليمين إلى اليسار، أضفها إلى
RTL_LOCALESفيsrc/app/layout.tsxوإلىsrc/hooks/locale/useDirection.ts.وسّع ملفَي الهوية وmanifest
يحتوي
src/config/brand.config.tsوsrc/app/[locale]/manifest.tsعلى قيمةenوقيمةarلكل نص: أضف قيمتك. وابحث فيsrc/features/عن"en" | "ar"ووسّع تلك الأنواع أيضًا.أضف خطًا لنظام كتابتها
إذا احتاجت اللغة إلى حروف لا تتضمنها الخطوط المرفقة، فأضف خطًا إلى رابط Google Fonts في
src/app/layout.tsxواستخدمه فيsrc/styles/base.css.
تُحفظ المنتجات والفئات بالإنجليزية والعربية فقط. واللغة الثالثة تحتاج أيضًا إلى أن تحملها حقول الكتالوج في واجهة API ونموذج المنتج في لوحة الإدارة.
أضف لغة إلى لوحة الإدارة
المسارات داخل admin-dashboard/.
أضف رمز اللغة
أضفه إلى قوائم اللغات في
src/config/i18n.tsوsrc/proxy.tsوsrc/app/[locale]/layout.tsxوsrc/components/LanguageSwitcher.tsx.ترجم الرسائل
أضف ملف
<code>.jsonبجوار كلen.jsonداخلmessages/، بما في ذلك المجلدات داخلmessages/dashboard/.ترجم الشريط الجانبي
أضف لغتك إلى كل تسمية في
src/layouts/dashboard/sidebar/config/navigationData.ts، وإلى النصوص فيsrc/config/brand.config.tsوsrc/app/[locale]/manifest.ts.اضبط الاتجاه
للغة تُكتب من اليمين إلى اليسار، أضفها إلى
src/hooks/locale/useDirection.ts.
أضف لغة إلى واجهة API
أضف رمز اللغة
أضفها إلى
supportedLocalesفيback-end/src/i18n/i18n.service.ts.ترجم الرسائل
انسخ
back-end/src/i18n/translations/en/إلى مجلد يحمل اسم رمز اللغة وترجم القيم. أي مفتاح تتركه يعود إلى الإنجليزية.