Yang's Kitchen
طبقة طلب مخصّصة فوق Squarespace لمطعم في لوس أنجلوس. CSS وJS مكتوبة باليد لثني المنصّة على قائمة طعام حقيقيّة وآليّة استلام عمليّة.
عن المشروع.
مطعم Yang's Kitchen في لوس أنجلوس التزم أصحابُه بـ Squarespace قبل أن يدركوا أنّها لا تحتمل قائمة الطعام وآليّة الاستلام التي يحتاجونها فعلًا. بدلًا من الانتقال، كتبت طبقة CSS وJavaScript مخصّصة تثني المنصّة على تجربة طلب حقيقيّة. كان درسًا مبكرًا في العمل ضمن القيود التي اختارها العميل لا ضدّها.
ما الذي وجدناه.
مطعم في لوس أنجلوس كان قد التزم بـSquarespace قبل إدراكه أنّ المنصّة لا تستطيع التعامل مع تدفّق القائمة + الاستلام الذي يحتاجه. الترحيل كان خارج الطاولة؛ قيد المنصّة ثابت.
ما الذي فعلناه.
طبقة CSS + JavaScript مخصّصة فوق Squarespace ثنت المنصّة إلى تجربة طلب حقيقيّة دون التخلّي عن المنظومة.
ما الذي أصبح.
تدفّق طلب وظيفيّ على Squarespace، تخطيط قائمة متوافق مع العلامة، لا فوضى plugins طرف ثالث.
دوري الفعليّ في هذا المشروع.
منفرد · 100٪ طبقة CSS + JavaScript مخصّصة فوق Squarespace. امتلك العميل قرار المنصّة والمحتوى؛ امتلكت كلّ سطر كود مخصّص جعل المنصّة المختارة تعمل فعلًا لحالة استخدامهم.
مطوّر فرونت-إند
CSS مخصّص مُحقَن عبر كتل كود Squarespace. JavaScript مخصّص لـwidgets القائمة + تدفّق الاستلام.
حلّال مشاكل UX
اشتغلت حول قيود Squarespace (حقول نموذج محدودة، لا طلب أصليّ، لا خطّافات دفع) عبر الطبقة فوقها.
مدمج تحليلات
تتبّع GA على تدفّق الطلب المخصّص فيستطيع المطعم رؤية بيانات تحويل حقيقيّة.
الأرقام التي تهمّ.
- عملضمن قيد المنصّةلا ترحيل؛ احتفظ العميل باستثماره الموجود في CMS.
- موبايل-أوّلًاهدف التصميمالروّاد يضربون الموقع من الهواتف لحظة قرار أين يأكلون.
- متتبَّع GAتدفّق الطلبكلّ خطوة قابلة للقياس؛ المطعم يستطيع رؤية بيانات التحويل الحقيقيّة.
ما الذي كان معطّلاً فعلاً.
كان العميل قد دفع وتعلّم Squarespace سلفًا. إخباره بالترحيل كان الجواب التقنيّ السهل والجواب التجاريّ الخاطئ — كان يعني التخلّي عن محتواهم، إعادة تدريب طاقمهم، وإعادة بناء الهويّة البصريّة المشحونة سلفًا. المطلوب: جعل المنصّة تفعل ما لا تستطيع فعله أصليًّا، عبر توسعتها بعناية.
المساحة الصعبة من المشروع.
- 01Squarespace تكشف خطّافات تخصيص محدودة — كلّ التفاف يجب أن يستخدم نقاط حقن موثّقة فقط.
- 02تدفّق طلب مخصّص يتكامل مع معالج الدفع الموجود دون انتهاك شروط خدمة Squarespace.
- 03تخطيط قائمة موبايل-أوّلًا داخل قيود كتل Squarespace.
انتصارات هندسيّة تستحقّ التسمية.
العمل ضمن حدود المنصّة
لا وصول كود باك-إند؛ كلّ المنطق يعيش في CSS + JS مُحقَن. الحالة في localStorage؛ إرسال السلّة يوجَّه إلى Squarespace Form Block تحت الغطاء.
قائمة متوافقة مع العلامة دون كتل Squarespace
كتل قائمة Squarespace محدودة. بنيت قائمة JSON-driven مخصّصة تُرسم بـJS مُحقَن تحترم تباعد + طباعة العلامة.
كيف يتشابك النظام.
Squarespace مستضاف
طبقة CSS + JS مخصّصة (هذا هو العمل)
القرارات وراء كلّ اختيار.
العمل مع Squarespace، لا ضدّها
- استثمار العميل في المنصّة لم يكن تافهًا. تكلفة الترحيل كانت ستتجاوز قيمة التدفّق الجديد.
- شروط خدمة Squarespace تسمح بـCSS + JS مخصّص عبر نقاط حقن موثّقة — الجسر يبقى داخل القواعد.
JS عاديّ عوضًا عن إطار
- النصوص المُحقَنة تتنافس مع إطار Squarespace نفسه. إطار ثانٍ سيضاعف وزن التحميل.
- الكود العاديّ قابل للتدقيق في ملفّ واحد — سهل على المُصين التالي (محتمل Squarespace نفسها).
ما علّمنا إيّاه هذا البناء.
- الجواب التقنيّ الصحيح أحيانًا «احترم المنصّة التي اختارها العميل، واجعلها تعمل» — لا «أعد البناء على المنظومة التي تفضّل».
- درس مبكر في المهنة بشأن تحجيم القرارات الهندسيّة بالقيود التجاريّة الفعليّة، لا بتفضيلات المهندس.