قائمة فحص RTL لمتجر شوبيفاي: 8 أشياء يجب أن تكون من اليمين إلى اليسار فعلًا

أدلة «طراز» · نُشر في أغسطس 2026

دعم RTL الحقيقي في شوبيفاي يعني ثمانية أشياء: اتجاه يُضبط من لغة المتجر، وتخطيط مكتوب بالخصائص المنطقية لا بملف تجاوز، وأسعار وأكواد معزولة عن تقلّبات النص المختلط، وطباعة تحترم الحرف العربي، وأيقونات تنعكس حين ينبغي فقط، وحركة تتبع اتجاه القراءة، وأرقام على العرف الإقليمي، ومحتوى مختلط عربي–لاتيني يصمد في الاتجاهين.

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

لا توجد عربية في متجرك بعد؟ شوبيفاي يدعم العربية لغةً لواجهة المتجر: أضفها من الإعدادات ← اللغات، وترجم ما تحتاجه بتطبيق شوبيفاي المجاني Translate & Adapt. صفحة إتمام الشراء تترجمها المنصة بنفسها؛ أما كل ما قبلها فمسؤولية قالبك — والتفصيل في دليل هل يدعم شوبيفاي اللغة العربية؟

قائمة الفحص

1. الاتجاه يأتي من اللغة — الصفحة كلها تنقلب، لا النص وحده.
2. التخطيط مبني من اليمين إلى اليسار من الأساس، لا معكوس لاحقًا — ولا عنصر أفلت من الانعكاس.
3. الأسعار والأكواد وأرقام الهواتف تُقرأ صحيحة.
4. الحروف العربية تبقى متصلة.
5. الأيقونات تنعكس حين ينبغي فقط.
6. الحركة تتبع اتجاه القراءة.
7. الأرقام على العرف الإقليمي.
8. المحتوى المختلط العربي–اللاتيني يصمد في الاتجاهين.

1. بدّل لغة المتجر إلى العربية — هل تنقلب الصفحة كلها أم النص وحده؟

بعض القوالب «يقلب» الاتجاه بقواعد CSS وحدها: تتحرك الصناديق، لكن محرك النص ثنائي الاتجاه في المتصفح لا يعمل أصلًا، لأن سمة dir لم تُضبط على المستند قط. الأعراض معروفة: علامات ترقيم تهبط في الطرف الخطأ من الجملة، وسلاسل مختلطة عربية–لاتينية تترتب بترتيب معكوس، ومؤشر كتابة يبدأ من الجهة الخطأ في حقل البحث.

أجرِ الفحص في متصفح سطح مكتب والمتجر بالعربية. علامتان لا تخطئهما العين: المستند الذي ضُبط اتجاهه فعلًا ينقل شريط التمرير الرأسي إلى الحافة اليسرى على معظم الأنظمة المكتبية، ومؤشر الكتابة في حقل البحث يبدأ من اليمين. نصٌّ محاذًى إلى اليمين يفشل في العلامتين هو علامة اتجاه تجميلي لا أكثر.

في «طراز»: تُضبط dir على المستند من لغة واجهة المتجر، فيتبع الاتجاهُ اللغةَ النشطة — لا مفتاح RTL تحتاج إلى ضبطه أصلًا.

2. تنقّل بين كل الصفحات — هل بقي عنصر لم ينقلب؟

الطريقة الشائعة في جعل متجر شوبيفاي من اليمين إلى اليسار هي ملف تجاوز يعكس خصائص CSS الفيزيائية بأثر رجعي: margin-left تصبح margin-right، عبر مئات القواعد. القاعدة المنسية لا تُظهر أي خطأ — تترك مكوّنها على اتجاهه الإنجليزي إلى الأبد. والنتيجة عناصر أفلتت من الانعكاس: شارة تخفيض مثبتة في الزاوية الخطأ، قائمة منسدلة تنفتح خارج الشاشة، قسم واحد يصرّ على محاذاة اليسار بينما انقلب كل ما حوله. (الفرق بين النهجين في دليل تطبيق RTL أم قالب RTL؟)

امشِ بالعربية في المسار: الرئيسية ← المجموعة ← المنتج ← سلة التسوق ← البحث، مطاردًا العنصر الذي لم يتحرك. تخطيط منعكس «في معظمه» مع عناصر لم تنقلب هو بصمة ملف تجاوز يعمل. وأعد الفحص بعد كل تحديث للقالب — فكل تحديث قد يضيف قاعدة غير معكوسة.

في «طراز»: كل قاعدة مكتوبة بالخصائص المنطقية (margin-inline-start، inset-inline-end)؛ لا وجود لملف rtl.css، والبناء نفسه يفشل إذا دخلت خاصية فيزيائية إلى الكود.

3. انظر إلى أي سعر — هل يُقرأ معكوسًا؟

الأرقام ورموز العملات وعلامات الترقيم لا اتجاه لها في ذاتها؛ داخل النص العربي يعيد المتصفح ترتيبها بحسب السياق. ومن دون عزل مقصود تُقرأ الأسعار معكوسة أو تقفز العملة إلى الجهة الخطأ، وتتبعثر أرقام الهواتف، وتتشوّه أكواد الخصم — في المواضع التي تُبنى فيها ثقة المتسوق تحديدًا.

افتح أي صفحة منتج بالعربية واقرأ السعر بصوت مسموع — العرض الصحيح يبدو هكذا: 349.00 ر.س، الأرقام سليمة والعملة حيث يتوقعها أهل المنطقة. ثم رقم الهاتف في الفوتر، وSKU لأي منتج، وكود خصم داخل سلة التسوق.

في «طراز»: كل سلسلة يسارية الاتجاه بطبيعتها — الأسعار وSKU وأكواد الخصم وأرقام الهواتف وأرقام العد التنازلي — تجلس في جزيرة عزل ثنائية الاتجاه خاصة بها، فتُقرأ صحيحة أينما حلّت.

4. قرّب النظر إلى العناوين — هل تتصل الحروف العربية؟

العربية حروفها متصلة، وتباعد الأحرف اللاتيني (letter-spacing) يفصل الوصلات بين الحروف — وهذه أوضح علامة على قالب لاتيني الأصل. ولا وجود للمائل في العربية: العنصر المائل مجرد حروف أُميلت قسرًا فتشوّه رسمها. وارتفاعات الأسطر المضبوطة لأحجام الحرف اللاتيني تقصّ النقاط والحركات حول الحرف العربي.

افحص عناوينك وأزرارك وبطاقات منتجاتك بالعربية: يجب أن تتصل الحروف، وألا يميل شيء، وألا يُقص شيء حول رسم الحرف. العنوان الذي يبدو كخرز متباعد على خيط هو تباعد لاتيني طُبّق على حرف عربي — والتفصيل في دليل الخطوط العربية لمتجر شوبيفاي.

في «طراز»: نظام طباعة عربي كامل — تباعد الأحرف مثبّت على الصفر في السياقات العربية، لا مائل زائف، حجم أساس معوّض للحرف العربي، ومكتبة من 53 عائلة خط عربية مدققة الترخيص لا يُحمَّل منها إلا ما تختاره.

5. افحص الأسهم — ثم افحص أيقونة البحث

تفشل الأيقونات بطريقتين متعاكستين. الانعكاس الناقص يترك الأسهم تشير على الطريقة اللاتينية: سهم «التالي» يشير عكس اتجاه القراءة، وسهم الرجوع يشير إلى الأمام. والانعكاس الزائد قلبٌ شامل: عدسة بحث معكوسة أو علامة صح مقلوبة تبدو خللًا في القالب، لا تعريبًا.

بالعربية، ينبغي أن تشير أسهم الكاروسيل وأسهم التالي/السابق مع اتجاه القراءة؛ وأن تبدو أيقونات البحث والصح والنجمة وسلة التسوق كما تبدو في الإنجليزية تمامًا.

في «طراز»: مكوّن أيقونات واحد يحمل السياسة كلها — الأيقونات الاتجاهية (الأسهم، الرجوع، الإرسال) تنعكس في RTL؛ والأيقونات الرمزية المتناظرة (البحث، الصح، النجمة، سلة التسوق) لا تنعكس أبدًا.

6. افتح درج سلة التسوق — من أي جهة يدخل؟

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

بالعربية: انقر سهم «التالي» في الكاروسيل، وراقب شريط الإعلانات، وأضف منتجًا إلى سلة التسوق ولاحظ من أي جهة يدخل الدرج. كل شيء ينبغي أن يتحرك كأن الصفحة تُقرأ من اليمين إلى اليسار — لأنها كذلك فعلًا.

في «طراز»: الحركة مربوطة بالاتجاه المنطقي — الكاروسيلات والأشرطة المتحركة وتعبئة أشرطة التقدم وانزلاق الأدراج تُكتب مرة واحدة وتصح في الاتجاهين.

7. هل أسعارك بالأرقام الغربية؟

العرف الإقليمي، الذي تسير عليه كبريات المتاجر العربية، هو الأسعار بالأرقام الغربية (123)، وموطن الأرقام الهندية (٠١٢٣) السياقات الزخرفية — فترات التوصيل، وعدّادات القطع المتبقية، والشارات. وتخطئ القوالب في الاتجاهين: تحويل الأسعار نفسها إلى أرقام هندية، أو تثبيت الأرقام الغربية في كل موضع دون خيار.

قارن سعر منتجك بما تعرضه المتاجر التي يتسوق منها عملاؤك فعلًا: أرقام غربية، سليمة كما هي. ثم قرر بنفسك إن كنت تريد اللمسات الزخرفية بالأرقام الهندية — القرار قرارك، لا قرار القالب.

في «طراز»: الأسعار دائمًا بالأرقام الغربية وداخل جزيرة عزل ثنائية الاتجاه؛ والأرقام الهندية مفتاح يضبطه التاجر للسياقات الزخرفية فقط.

8. أعطِ منتجًا عنوانًا مختلط اللغة — هل يصمد؟

الكتالوجات الحقيقية ثنائية اللغة: أسماء علامات لاتينية داخل عناوين عربية، وخيارات المقاس واللون، والعناوين البريدية. دعم RTL الهش قد يصمد في كل موضع آخر، لكنه ينكسر هنا وبأعلى صوت — عنوان مثل «عباية كلاسيك من Noir Studio» يتبعثر ترتيب كلماته، أو خيار مثل «XL — أحمر» ينقلب إلى ترتيب بلا معنى.

تجربة خمس دقائق: أعد تسمية منتج واحد بعنوان عربي يتضمن اسم علامة لاتينيًّا، وأضف خيارًا يجمع مقاسًا لاتينيًّا مع لون عربي، ثم اعرض بطاقة المنتج وصفحته بالعربية والإنجليزية، على سطح المكتب والهاتف. وأعد كل شيء كما كان حين تنتهي.

في «طراز»: المحتوى المختلط العربي–اللاتيني — العناوين والخيارات والعناوين البريدية وأسماء العلامات — جزء من معيار اختبار القالب نفسه، ويُختبر في الاتجاهين.

كيف يجتاز «طراز» هذه القائمة؟

طراز — قالب شوبيفاي عربي مبني على RTL من السطر الأول — يجتاز القائمة بحكم البناء لا بالترقيع: الاتجاه من اللغة، وخصائص CSS منطقية بلا ملف rtl.css، وجزر عزل لكل سلسلة يسارية الاتجاه، ونظام طباعة عربي، وسياسة أيقونات واحدة، وحركة منطقية، وأرقام على العرف، واختبار للمحتوى المختلط في الاتجاهين. والعربية هي اللغة الافتراضية للقالب — حتى نصوص محرر القالب نفسها تقرؤها بالعربية — والإنجليزية إلى جانبها للمتاجر الثنائية، عبر 52 قسمًا و41 كتلة و16 قالب صفحة. وخطوات الإعداد في دليل البدء مع القالب.

«طراز» في مراحل التطوير الأخيرة ويمر بمراجعة متجر قوالب شوبيفاي. لا ننشر تاريخًا لا نستطيع الالتزام به؛ سعر الإطلاق المخطط هو $300 لمرة واحدة.

انضم إلى قائمة الانتظار

أدلة ذات صلة