الملخّص.
أرادت Inches Home واجهة شوبيفاي تعكس مستوى الاهتمام نفسه الذي تعكسه منتجاتها. الكتالوج يمتدّ من موزّعات الحمّام (بمتغيّرَي العنبر واللؤلؤ) إلى أغطية الأرائك، ومفارش الطاولات، والشموع، والأكواب، والطاولات الجانبية والبوفات — كلّ فئة تتطلّب معالجة عرض مختلفة. ثيم عامّ لا يستطيع أن يحمل ذلك كلّه دون أن يبدو ثيماً عامّاً.
ما الذي شحّناه.
Sections built around merchandising, not the other way around.
الصفحة الرئيسية سلسلة من أقسام Liquid مخصّصة: شريط ترويجي "موزّعات الحمّام تبدأ من 150 جنيه"، كاروسيل الأكثر مبيعاً، عرض شموع "لمسة فخامة لكلّ فضاء" مع فيديو عمودي، شبكة عروض "جديد من Inches Home"، ولوحة لأغطية الأرائك / تنظيم الطاولات / الأكواب / الطاولات الجانبية. كلّ قسم تقوده metafields، فيتحرّك العرض دون تذاكر تطوير.
A product page that doesn't blow up.
خمسة أنواع بلوكات مخصّصة على صفحة المنتج، أكورديون بأيقونات SVG ينجو من تعقيم HTML الذي تُجريه شوبيفاي، وزرّ "أضف للسلّة" ثابت على الموبايل يُعوِّم السعر و الـCTA دون كسر التخطيط. نمط "التذييل-كـCTA-عائم" (صورة المنتج + الاسم + السعر + أضف للسلّة) يُطبَّق على الكتالوج كلّه.
The compare page.
مبنيّ على معماريّة fetch من جهة العميل — المنتجات المختارة تُجلَب مباشرةً بالـID، لا تُعرَض من الخادم. تنجو من تحرير التاجر للمتغيّرات خلف الكواليس؛ ولا ذاكرة مؤقّتة تحتاج إبطالاً.
The boring fix.
عبر كلّ قسم، معالج data-lq-action مفوَّض يحلّ محلّ مستمعي الأحداث المربوطين يدوياً. المعرّفات بشرطات (نمط متغيّرات شوبيفاي العادي) تتوقّف عن كسر الـJS. كود أقل، أخطاء أقل.
