OverGuard: متجر Shopify لملابس رياضية
قالب Shopify مخصص بالكامل، صُمّم من الصفر، وكل ميزة فيه مبنية داخله لا مستأجرة كتطبيق.
- الدور
- قالب مخصص، صُمّم وبُني من الصفر
- المدة
- أقل من 7 أسابيع، 2026
- النوع
- متجر Shopify مخصص لعلامة مصرية للملابس الرياضية
- المنصات
- ويب، للهواتف أولاً
التقنيات
المشكلة
OverGuard علامة مصرية للملابس الرياضية يتجاوز عدد عملائها 10,000 عميل ولا يزال في ازدياد. كان على متجرها أن يحمل مظهر العلامة على الهواتف أولاً، وأن يعامل الدفع عند الاستلام كوسيلة دفع أساسية، وأن يُبنى للعربية والإنجليزية معاً. قالب جاهز مع استبدال الشعار فقط، تسنده كومة من تطبيقات الاشتراك الشهرية، لم يكن ليبدو أو يتصرف كالعلامة.
دورات التعديل على قوالب Shopify بطيئة: الإجابة عن سؤال تصميمي في صفحة يمكن إعادة تحميلها أرخص منها في قالب يجب رفعه إلى المتجر، وحين يعرض القالب منتجات حقيقية لا يبقى ما يُقارن به. أردنا أن تُصمَّم الصفحات الأساسية وتُحسم قبل كتابة أي سطر Liquid، وأن نملك طريقة قياس تثبت أن القالب يطابقها، لا مراجعة بالعين.
المنهجية
تصميم في نموذج مرجعي، ونقل حتى آخر بكسل
بنينا التصميم أولاً كنموذج مرجعي يعمل فعلاً: ثماني صفحات بـ HTML و CSS و JavaScript مكتوبة يدوياً، يجمعها سكربت بناء صغير بـ Python، بلا أي إطار عمل. هناك حُسمت أسئلة مثل ما الذي تقوله السلة الفارغة، وأين يستقر التركيز بعد حذف سطر منها. ثم أبقت أداة اختبار مبنية على Playwright قالب Shopify مطابقاً لذلك النموذج بهامش تفاوت صفري في البكسل، عبر 36 تركيبة من العرض واللغة واللمس وكثافة البكسل، بينما تحققت مقارنة لشجرة DOM من كل عقدة وكل نص بالعربية والإنجليزية. تحققنا من الأداة نفسها قبل أن نثق بها: 20 تشغيلاً كاملاً بلا أي نتيجة متذبذبة، والتقاط تغيير بمقدار 1px في شطف الزاوية. وكشفت الأداة خطاً مستضافاً ذاتياً فقد محور العرض بصمت، ودرج سلة لم يكن يُفتح بالعربية أصلاً. وعاملنا الرفع بالريبة نفسها: أمر الرفع في Shopify يخرج بالرمز 0 حتى حين يرفض الخادم ملفاً، لذا يمر كل رفع إلى قالب التطوير عبر غلاف يقرأ مخرجات الأخطاء ويفشل بوضوح.
معلومات القطعة تُحفظ مع القطعة نفسها
تحتاج صفحة المنتج إلى نحو عشرين معلومة لا يستطيع المنتج نفسه أن يوفرها: القَصّة، والقماش، وجدول القياسات، ومناطق الدعم، وصور التفاصيل. أعطت النسخة الأولى معظمها قيماً افتراضية على مستوى المتجر كله، فإذا بصفحة البوكسرات تصف قميص ضغط، حتى تركيبة قماشه وجدول قياس صدره. لذلك انتقلت هذه المعلومات إلى metaobjects في Shopify تُحرَّر من لوحة الإدارة: ورقة مواصفات واحدة لكل قطعة، تتشاركها كل ألوانها بدل كتابتها من جديد لكل لون، وتشير إلى جداول مقاسات وملاحظات مناطق تتشاركها القطع المتشابهة. وصارت القاعدة أن القيمة الافتراضية قد تصف المتجر لكنها لا تصف قطعة أبداً، وأن القسم الذي لا يملك ما يقوله بصدق يختفي بدل أن يستعير أرقام منتج آخر. نُقلت القياسات من أدلة المقاسات الخاصة بالعميل، ويوضح كل جدول ما إذا كان يقيس الجسم أو القطعة، لأن قراءة القياس الخطأ تبيع المقاس الخطأ.
السلة هي سلة Shopify الحقيقية
كان النموذج المرجعي يحفظ سلته داخل المتصفح، وهذا يكفي للتصميم ولا ينفع للبيع. ولجعلها حقيقية وضعنا تحتها AJAX Cart API الخاصة بـ Shopify، بينما بقي الدرج وصفحة السلة والشارة كما صُممت تماماً: لم يتغير سوى الدوال الأربع التي تملك البيانات. والسلال الحقيقية جلبت مشكلات حقيقية. صار كل تعديل يُرسم مرتين، مرة بتفاؤل ومرة حين ترد Shopify، وكانت إعادة البناء الثانية تُضيّع تركيز لوحة المفاتيح، فصار التركيز يُسجَّل قبل كل إعادة بناء ويُستعاد بعدها. ومعرّفات المتغيرات من 14 رقماً، وكانت اختصارات التحويل إلى أعداد صحيحة في حزمة الكود المجمّعة تقطعها بصمت إلى 32 بت، فتنتج معرّفاً مختلفاً يبدو مع ذلك صالحاً. وحين أضيف إلى الدرج زر دفع مباشر، كان الرابط العادي قادراً على بلوغ صفحة الدفع قبل أن تكتمل الإضافة التي فتحت الدرج، فصار الدفع ينتظر عمليات الكتابة المعلّقة في السلة، بحد أقصى 2.5 ثانية.
ثنائي اللغة بموجب عقد
بُني المتجر بلغتين: لكل نص في الواجهة نسخة إنجليزية وأخرى عربية، ومقارنة شجرة DOM تتحقق من الاثنتين، فلا يمكن أن تسقط العربية بصمت أثناء النقل. يطبّق سكربت صغير في رأس الصفحة اللغة المحفوظة قبل أول رسم، أما الاتجاه من اليمين إلى اليسار فيعكس التخطيط، ويقلب الزوايا المشطوفة، ويعكس اتجاه شرائح العرض. لم يكن بحث Shopify نفسه يعيد أي نتيجة لعمليات البحث بالعربية في هذا المتجر، لذا يطابق مربع البحث النص أثناء كتابته، داخل المتصفح، مع كتالوج يرسمه الخادم في الصفحة، مع جدول مرادفات يربط الكلمات العربية وكتابتها بالحروف اللاتينية بمصطلحات الكتالوج الإنجليزية. وبطلب من العميل، عُطّلت العربية أمام المتسوقين حالياً. ويتحكم فيها إعداد واحد في القالب دون حذف أي شيء، وتعطيلها يمسح أيضاً أي اختيار محفوظ للعربية، فلا يبقى أحد عالقاً خلف زر مخفي.
النتيجة
أُطلق OverGuard في 16 أكتوبر 2026 على overguard.me، بعد أقل من سبعة أسابيع من تسلّم موجز المشروع. يدير العميل المتجر من لوحة إدارة Shopify: شريط الإعلانات، والقائمة، والحملات، وشرائح تسوّق الإطلالة، ومعلومات كل قطعة، كلها قابلة للتحرير دون لمس الكود، ولا توجد أي تطبيقات اشتراك خارجية يُدفع لها أو تُحدَّث أو يُلتف عليها.
وتركّز العمل على السرعة في الآليات نفسها: خطوط مستضافة ذاتياً، يُحمَّل مسبقاً الخطّان اللذان تحتاجهما الشاشة الأولى مع ضبط سمة CORS كي لا ينزّلهما المتصفح مرتين، وعرض وارتفاع لكل صورة يرسمها الخادم، وتدرّج مقاسات srcset لبطاقات المنتجات ومعارض الصور ومعظم الصور الفوتوغرافية، مكتوب يدوياً لأن أداة الصور في Shopify تُسقط قيم العرض الأكبر. والتخطيط العربي مبني ومعطّل بطلب من العميل، ويعيده إعداد واحد في القالب بمجرد ترجمة أسماء المنتجات وأوصافها.
تريد شيئاً مشابهاً؟
أخبرنا بما تبنيه وسنعطيك تقييماً صادقاً للنطاق والجدول الزمني والتكلفة.