MAISON CODE .
/ i18n · Remix · Global

العمارة العالمية: توجيه i18n في ريمكس

التعامل مع `/en-us` و`/fr-ca` و`/jp`. كيفية إنشاء جهاز توجيه وبرمجيات وسيطة مدركة للإعدادات المحلية لمتاجر Shopify الدولية.

AB
Alex B.
العمارة العالمية: توجيه i18n في ريمكس

من السهل بناء متجر لبلد واحد. يعد بناء متجر لـ 20 دولة بمثابة كسر معماري. تحتاج إلى التعامل مع:

  • الترجمة (اللغة: الفرنسية)
  • Localization (Currency: CAD vs EUR)
  • سياق السوق (المخزون: المستودع الأمريكي مقابل المستودع الأوروبي)

لماذا تتحدث Maison Code عن هذا

في Maison Code Paris، نعمل كضمير معمari لعملائنا. غالبًا ما نرث حزمًا “حديثة” تم بناؤها دون فهم أساسي للحجم.

نناقش هذا الموضوع لأنه يمثل نقطة تحول حاسمة في النضج الهندسي. التنفيذ الصحيح يميز MVP الهش عن منصة مؤسسية مرنة يمكنها التعامل مع حركة مرور الجمعة السوداء.

بنية عنوان URL

نحن نؤيد المجلدات الفرعية، وليس النطاقات الفرعية.

  • سيء: fr.maisoncode.paris (هيئة النطاق المنقسمة).
  • جيد: maisoncode.paris/fr (يدمج تحسين محركات البحث).

تنفيذ ريمكس للبرمجيات الوسيطة

نستخدم برنامجًا وسيطًا مخصصًا “i18n” في “entry.server.tsx”.

// كشف اللغة من عنوان URL -> ملف تعريف الارتباط -> الرأس
وظيفة التصدير ResolveLocale(طلب: طلب): لغة {
  const url = new URL(request.url);
  const pathLocale = url.pathname.split('/')[1];
  
  إذا (supportedLocales.includes(pathLocale)) {
    مسار العودة المحلية؛
  }
  
  // الرجوع إلى GeoIP (رأس Cloudflare)
  بلد ثابت = request.headers.get('cf-ipcountry');
  إرجاع CountryToLocaleMap[country] || "أون"؛
}

سياق القاموس

نحن لا نقوم بتشفير السلاسل. نقوم بإحضار القاموس (JSON) للغة التي تم حلها ونمررها إلى سياق React.

const t = useTranslation();
<h1>{t('product.addToCart')}</h1> 
// يعرض "Ajouter au panier" إذا كانت اللغة fr

علامات Hreflang

وهذا أمر بالغ الأهمية بالنسبة لكبار المسئولين الاقتصاديين. يجب أن تخبر Google أن /fr/chemise هو النسخة الفرنسية من /en/shirt. نقوم بإنشاء هذه الرؤوس تلقائيًا لكل صفحة.

<link rel="alternate" hreflang="en" href="https://site.com/en/shirt" />
<link rel="alternate" hreflang="fr" href="https://site.com/fr/chemise" />

9. الخروج المترجم (Markets Pro)

توجيه حركة المرور إلى /fr لا فائدة منه إذا كان الخروج بالدولار الأمريكي. نحن نستخدم Shopify Markets Pro. تكتشف البرامج الوسيطة البلد “fr”. قمنا بإنشاء سلة التسوق باستخدام {"country": "FR"، "currency": "EUR"}. يؤدي هذا إلى قفل الخروج لإظهار الرسوم والضرائب (VAT) وطرق الدفع المحلية (Cartes Bancaires) تلقائيًا. إن التدفق السلس من maisoncode.paris/fr إلى صفحة الدفع المقومة باليورو هو السبب في أننا نرى تحويلاً بنسبة +40% في أوروبا.

10. أفضل ممارسات إعادة التوجيه الجغرافي

لا تقم مطلقًا بإعادة التوجيه تلقائيًا دون طلب ذلك. إذا كنت أمريكيًا مسافرًا إلى باريس، وأجبرتني على استخدام .fr، فأنا أكرهك. النمط:

  1. كشف IP هو فرنسا.
  2. هل المستخدم موجود على “.com”؟
  3. اعرض “شريطًا” صغيرًا في الأعلى: “نرى أنك في فرنسا. هل تريد التبديل إلى متجر فرنسا؟ [نعم/لا]”.
  4. قم بإعادة التوجيه فقط إذا قاموا بالنقر فوق “نعم”. الاستثناءات: إذا كتبوا مباشرة .fr، فاحترمه.

11. النطاق العالمي

أنت تبيع في الولايات المتحدة (USD) والمملكة المتحدة (GBP). وصف المنتج مطابق (باللغة الإنجليزية). ترى Google هذا على أنه “محتوى مكرر”. الحل: المبادئ الأساسية المرجعية الذاتية. يشير عنوان URL “site.com/us/shirt” بشكل أساسي إلى “site.com/us/shirt”. يشير عنوان URL “site.com/uk/shirt” بشكل أساسي إلى “site.com/uk/shirt”. وبدمجه مع hreflang، فإن هذا يخبر Google بما يلي: “هذه صفحات متميزة تستهدف أسواقًا مختلفة، وليست نسخًا”. وبدون ذلك، يقوم جوجل بإلغاء فهرسة إحداها.

7. التفاوض بشأن المحتوى (لغة القبول)

لا ينبغي للبرامج الوسيطة أن تنظر فقط إلى عنوان URL. يجب أن تنظر إلى رأس “Accept-Language” الذي أرسله المتصفح. إذا وصل المستخدم إلى / (الجذر)، فأعد توجيهه:

  1. تحقق من لغة URL (لا شيء).
  2. تحقق من ملف تعريف الارتباط “NEXT_LOCALE”.
  3. تحقق من الرأس “قبول اللغة” (fr-FR). -> إعادة التوجيه إلى /fr.
  4. تحقق من GeoIP (فرنسا). -> إعادة التوجيه إلى /fr.
  5. احتياطي -> /en. يعمل هذا “التوجيه الذكي” على زيادة التحويل عن طريق نقل المستخدم إلى لغته الأم تلقائيًا.

12. توطين الحافة (عمال Cloudflare)

يعد تنفيذ i18n على الخادم الأصلي (Node.js) بطيئًا جدًا (100 مللي ثانية). ننقله إلى الحافة. يعترض عمال Cloudflare الطلب قبل أن يصل إلى الخادم.

  1. الوارد: GET / (من IP: برلين).
  2. العامل: “المستخدم ألماني. أعد التوجيه إلى /de.”
  3. زمن الوصول: 5 مللي ثانية. يرى المستخدم الموقع الألماني على الفور. لا يوجد “فلاش محتوى خاطئ”. هذا هو “التوطين بسرعة الضوء”.

13. الفروق الدقيقة في العملة: مشكلة العرض

“10.00 دولار أمريكي” != “10.00 دولار أمريكي”. وفي فرنسا المساحة هي مساحة غير منقسمة تستخدم كفاصل الألف. في اليابان، لا توجد أرقام عشرية (الين). يعد استخدام Intl.NumberFormat أمرًا إلزاميًا. ولكن ماذا عن “التسعير النفسي”؟

  • دولار أمريكي: 19.99 دولارًا
  • اليورو: 19.95 يورو (يفضل الأوروبيون 95) نحن نطبق قواعد تقريب الأسعار لكل سوق. إذا كان سعر الصرف يقول 19,12 يورو، فإننا نقوم بتقريبه إلى 19,95 يورو تلقائيًا. وهذا يجعل العلامة التجارية تبدو “أصلية”، وليس مثل شركة دروبشيبر أجنبية.

14. لماذا ميزون كود؟

في Maison Code، نحن لا نترجم الكلمات فحسب؛ نحن نترجم السياق. لقد قمنا بنشر متاجر في أكثر من 50 دولة للعلامات التجارية الفاخرة الزائدة عن الحاجة. نحن نعلم أنه في ألمانيا، يجب عليك إظهار “Impressum”. نحن نعلم أنه في اليابان، يتم عكس نموذج العنوان (الرمز البريدي أولاً). نحن نبني بنيات تحترم هذه الفروق الثقافية بشكل افتراضي. يجب أن تشعر علامتك التجارية بأنها محلية في كل مكان.

15. الاستنتاج

إن الوصول إلى العالمية يعني 10% ترجمة و90% هندسة معمارية. يمكنك الاستعانة بأفضل المترجمين، ولكن إذا كانت بنية عنوان URL الخاص بك تربك Google، فسوف تفشل. إذا لم يعرض الدفع الخاص بك الضرائب المحلية، فسوف تفشل. قم ببناء “مركز عالمي” باستخدام التوجيه المناسب والبرمجيات الوسيطة ومعالجة العملات. إذن، العالم هو سوقك.

هل فقدت الترجمة؟

نحن نصمم عمليات الطرح العالمية للعلامات التجارية التي ترفض التنازل عن الفروق الدقيقة المحلية.

عولمة متجري. قم بتوظيف مهندسينا.