بالوما
قالب Zid مخصّص لعلامة تجارة إلكترونيّة سعوديّة. RTL افتراضيًّا، صفحات منتجات أسرع، إتمام شراء أنظف، كلّ كتلة قابلة للتخصيص من لوحة التاجر.
عن المشروع.
بالوما علامة تجارة إلكترونيّة سعوديّة تعمل على منصّة Zid، والقوالب الجاهزة لم تكن سريعة ولا مرنة بالقدر الذي تطلّبه طموحُها. بنيت لها قالبًا مخصّصًا من الصفر بـ Liquid وTailwind: RTL افتراضيًّا، صفحات منتجات أسرع، إتمام شراء أنظف، وكلّ كتلة قابلة للتخصيص من لوحة التاجر كي يستطيع الفريق إعادة ترتيب صفحة هبوط في منتصف حملة دون سؤالي.
ما الذي تغيّر.
زيادة في تحويل الـ checkout
من البدء إلى الإطلاق
ما الذي وجدناه.
علامة تجارة إلكترونيّة سعوديّة على Zid أرادت قالبًا سريعًا، RTL افتراضيًّا، وقابل للتهيئة من لوحة تاجر فيستطيع الفريق إعادة ترتيب صفحة هبوط خلال حملة دون مساعدة هندسيّة.
ما الذي فعلناه.
قالب Zid مخصّص من الصفر بـLiquid + Tailwind. تخطيط RTL-أوّلًا، خروج أنظف، كلّ كتلة مكشوفة كـZid Section ليعيد التجّار ترتيبها في اللوحة.
ما الذي أصبح.
صفحات منتجات أسرع، خروج أنظف، كتل هبوط قابلة للتحرير من التاجر.
دوري الفعليّ في هذا المشروع.
منفرد · 100٪ — تصميم + قوالب Liquid + تهيئة Tailwind + نموذج Zid Section. زوّدت العلامة الهويّة + تصوير المنتجات؛ كلّ شيء تقنيّ لي.
مهندس قالب (Zid)
قوالب Liquid للمنتج، التشكيلة، السلّة، الخروج. مخطّط Zid Sections فيعدّل التجّار كتل الهبوط حيًّا.
مصمّم (RTL-أوّلًا)
تمريرة تخطيط RTL-أوّلًا على كلّ صفحة. طباعة عربيّة (Tajawal) أساسيّة، إنجليزيّة ثانويّة.
مهندس أداء
مضبوط يدويًّا لموبايل-أوّلًا؛ وسائط lazy-loaded؛ خروج دون 3 رحلات.
الأرقام التي تهمّ.
- RTL-أوّلًالغة التصميمالتخطيط مصمّم بالعربيّة؛ الإنجليزيّة هي المرآة — لا العكس.
- حيّتحرير هبوط من التاجرZid Sections تتيح للعلامة إعادة ترتيب الكتل خلال حملة دون إعادة نشر.
- <2.5sصفحة منتج موبايلKSA 4G؛ من أسرع قوالب Zid في الكتالوج.
- 0إطار JS مخصّصJavaScript عاديّ + Tailwind فقط. وزن القالب دون 80KB JS.
ما الذي كان معطّلاً فعلاً.
القوالب الافتراضيّة لـZid كانت إمّا بطيئة أو جامدة. علامة تجارة إلكترونيّة سعوديّة نامية تحتاج إطلاق حملات أسبوعيًّا — تعديلات صفحة هبوط، تبديل أبطال، رايات استعجال — دون رفع تذكرة. المطلوب: قالب تمتلك فيه العلامة سطح الهبوط كاملاً من لوحة Zid، بينما تبقى الأسس التي يتحكّم فيها المطوّر (السلّة، الخروج، تفاصيل المنتج) عالية الأداء.
المساحة الصعبة من المشروع.
- 01مخطّط Zid Section لكلّ كتلة قابلة لإعادة الاستخدام (بطل، شريط منتج، شهادة، راية، فيديو).
- 02تخطيط RTL-أوّلًا لا يشعر كقالب LTR معكوس.
- 03أداء على شبكات الموبايل السعوديّة (قوالب Zid الافتراضيّة قد تكون +200KB JS).
- 04تدفّق خروج تحت قيود Zid (بعض الحقول يفرضها المنصّة وغير قابلة للنقل).
انتصارات هندسيّة تستحقّ التسمية.
تصميم مخطّط Zid Sections
كلّ كتلة قابلة لتحرير العلامة هي Zid Section بإعدادات مكتوبة (نصّ، صورة، لون، رابط، متكرّر). يحصل التاجر على محرّر مهيكل؛ كود القالب يقرأ كائن Liquid واحد لكلّ كتلة.
افتراضيّات طباعة عربيّة
Tajawal كوجه أساسيّ، line-height مضبوط للعربيّة (1.85 للجسم)، tabular nums للأسعار، معالجة سليمة لأقواس السعر اليمنى-اليسرى (SAR 99 مقابل 99 ر.س).
كيف يتشابك النظام.
منصّة Zid المستضافة
طبقة القالب المخصّص
القرارات وراء كلّ اختيار.
Zid (منصّة)
- منصّة تجارة إلكترونيّة أصليّة لـKSA مع تكاملات Mada + STC Pay جاهزة.
- نطاق PCI تحتفظ به Zid — التاجر + القالب لا يلمسان بيانات البطاقة أبدًا.
- مخطّط Section يعطي قابليّة تحرير التاجر دون إعادة نشر القالب.
JavaScript عاديّ عوضًا عن إطار
- وزن القالب يهمّ أكثر من راحة المطوّر لمتجر.
- Zid Sections + Liquid يتعاملان مع معظم التفاعليّة؛ الجزء الصغير المتبقّي 20 سطرًا من JS عاديّ.
ما علّمنا إيّاه هذا البناء.
- مخطّطات Section هي شيفرة الغشّ لقوالب قابلة لتحرير التاجر. صمّم سطح التحرير كما تصمّم السطح البصريّ.
- RTL-أوّلًا قرار تصميم، لا تبديل CSS. خطّط بالعربيّة، ثمّ تأكّد أنّ الإنجليزيّة تنعكس بنظافة.