Boo
مباشرمتجر Shopify مخصص بالكامل بُني من الصفر لعلامة تجارية عصرية في التجارة الإلكترونية. بُني كل قسم في الصفحة الرئيسية بشكل مخصص باستخدام Liquid: بطل منقسم، وعرض دوّار سداسي المنشور، وشبكة الأكثر مبيعاً، وشبكة ألوان المتجر. يشغّل مخطط قسم واحد قابل لإعادة الاستخدام ست نسخ مستقلة في الصفحة الرئيسية للحفاظ على نظافة الشيفرة. تتضمن صفحة المنتج تصميم بطاقات زجاجية وعرضاً دوّاراً مركزياً وقسم lookbook قابلاً للنقر. شمل العمل على الأداء سرعة حركة العرض الدوّار على الحاسوب والجوال، وتحميل الفيديوهات كسولاً بحيث لا تُجلب إلا عند ظهورها، وتصحيح سلوك التحميل المسبق للفيديو لمنع الجلب الزائد.
ShopifyLiquidJavaScriptCSSReact
- المشكلة
- احتاج العميل إلى متجر يبدو فاخراً ومميزاً لعلامته، لا قالباً افتراضياً بمظهر جديد. تمثلت المتطلبات الأساسية في صفحة رئيسية مميزة بصرياً، وتجربة تصفح منتجات راقية على جميع الأجهزة، وأداء سريع رغم الاستخدام الكثيف للفيديو والعروض الدوّارة.
- الحل
- بنيتُ كل أقسام الصفحة الرئيسية من الصفر بـ Liquid: split-hero-features (ست نسخ من مخطط واحد)، وعرض hex-prism الدوّار، وbest-sellers-on-sale، وshop-color-grid. وحصلت صفحة المنتج على تصميم بطاقات زجاجية مخصص وعرض منتجات مركزي دوّار وlookbook قابل للنقر. أُضيف التحميل الكسول لفيديوهات العرض الدوّار بحيث لا تُجلب إلا عند وصول العرض إليها، وأُصلح منطق التحميل المسبق لتجنب الجلب الزائد عند التحميل الأولي. وضُبطت توقيتات حركة العرض الدوّار بشكل منفصل للحاسوب والجوال لتناسب هوية العلامة.
- التحديات
- قيادة ستة أقسام مختلفة بصرياً في الصفحة الرئيسية من مخطط قسم واحد تطلّبت تصميم مخطط دقيقاً يبقى مرناً دون أن يتضخم. وكان أكثر الأجزاء تعقيداً تقنياً في عمل الأداء مزامنة حالة التحميل المسبق للفيديو مع موضع العرض الدوّار، بحيث تكون الفيديوهات جاهزة عند الحاجة دون جلب مسبق مهدر.
- النتيجة
- متجر إنتاجي بـ 9 أقسام مخصصة بالكامل عبر الصفحة الرئيسية وصفحات المنتج والمجموعات. أصبح أداء العروض الدوّارة أكثر سلاسة بشكل ملحوظ مقارنة بالتنفيذ السابق، وتحافظ بنية الصفحة الرئيسية ذات المخطط الواحد على قابلية صيانة القالب كلما أضافت العلامة محتوى جديداً.