חנות שלמה בלי שרת
אין שרת ואין build step - הכל רץ בדפדפן, וסכמת Supabase של 17 טבלאות מתועדת ומוכנה לשלב הבא.
הטריק המרכזי הוא ארכיטקטורת ה-overlay: במקום backend, פאנל הניהול עורך עותק בזיכרון של PRODUCTS, CATEGORIES, COUPONS ו-SETTINGS ושומר אותו ב-localStorage, ו-data.js מחיל את ה-overlay לפני ש-shop.js מפרסר את הקטלוג - כך שהחיפוש, העגלה וספירות הקטגוריות רואים את הקטלוג המנוהל בלי לדעת שאין שרת. כפתור הייצוא אופה את ה-overlay לקובץ data.js מוכן לקומיט, שמשמש בו זמנית כפריסה לפרודקשן וכ-seed המיגרציה המדויק ל-Supabase. אותו עיקרון סוגר את מעגל ההזמנות: חוזה g4u_orders אחד שה-checkout כותב, ושני צרכנים בלתי תלויים - עמוד החשבון ופאנל הניהול - קוראים ממנו. וקופונים לעולם לא נשמרים כערך אלא כקוד בלבד: discountFor פותר את הקוד מול הקטלוג ומחשב את ההנחה מחדש מול subtotal חי, אז אחוז ישן לא ננעל בזיכרון וההנחה תמיד משקפת את העגלה הנוכחית.
מה זה
4MEN היא חנות אונליין לאקססוריז לגברים - שעונים, טבעות, משקפי שמש, חגורות, צמידים וכובעים - בעברית מלאה ומימין לשמאל. האתר בנוי vanilla HTML/CSS/JS בלי שום build step, עם מערכת עיצוב Liquid Glass, אנימציות GSAP ושכבת הגנה anti-clone בקצה. המותג עבר rebrand מלא מ-Gentleman4u ל-4MEN, כולל wordmark זהב חדש בסגנון ארט דקו.
מעבר לחזית החנות יש כאן פאנל ניהול בסגנון WooCommerce, עמודי משפט ואמון מלאים, וגלגל מזלות אינטראקטיבי שמחלק קופון להזמנה ראשונה. הכל חי ב-12 עמודי HTML סטטיים שנפרסים ל-Vercel.
הבעיה
הרף שהוגדר היה חוויית קנייה ברמת ASOS או Terminal X - אבל בלי backend בשלב הזה. סריקת פערים מקבילה ב-7 ממדים מול הרף הזה החזירה 89 ממצאים, מהם 16 חוסמים: חיפוש שלא באמת מחפש, לוגיקת קופונים מפוזרת בקוד, נתונים מדומים בעמוד החשבון, עמודים משפטיים חסרים ומספרי scale לא מבוססים.
היה גם אילוץ קשיח: העיצוב הוכרז final. כל עבודת הנגישות והחיזוק חייבת להיות ARIA-only - בלי החלפות תגים ובלי שינוי ויזואלי - כי החלפת תג אחת כבר שברה את העיצוב בעבר. וחנות אמיתית צריכה ניהול שוטף: מוצרים, הזמנות, קופונים והגדרות משלוח - בלי שרת שינהל אותם.
מה בניתי
שדרגתי את חזית החנות ב-5 חבילות עבודה נפרדות: חיפוש עם נרמול אותיות סופיות, מצב פילטרים ומיון שנשמר ב-URL וניתן לשיתוף, טעינת עוד מוצרים בעמוד הקטלוג, עמוד מוצר עם ביקורות, zoom, החלקה במובייל ומוצרים שנצפו לאחרונה, עגלה עם פס משלוח חינם, שמירה לאחר כך ו-cross sell, ו-checkout רב שלבי עם ולידציה מלאה בעברית ושיטות משלוח שמתומחרות באמת.
פאנל הניהול הוא WooCommerce בקטן: מסך KPI, ניהול CRUD מלא למוצרים כולל צבעים, מפרטים וביקורות, קטגוריות, ניהול סטטוס הזמנות, קופונים, לקוחות והגדרות חנות. הפאנל מייצא data.js ו-sitemap.xml מוכנים לקומיט, עם גיבוי וייבוא JSON ואיפוס לבסיס.
השלמתי גם את שכבת האמון: תקנון ישראלי מלא כולל ביטול עסקה, מדיניות פרטיות והצהרת נגישות לפי התקן הישראלי 5568. את תמונות הסטוק של הקטגוריות והמוצרים החלפתי ב-24 תמונות מותג שנוצרו ב-Meshy text-to-image בסגנון סטודיו אחד נעול - 7 תמונות קטגוריה ו-17 תמונות מוצר בפורמט webp מקומי.
איך זה עובד
כל הקטלוג חי ב-data.js אחד: המוצרים, הקטגוריות, window.SETTINGS עם דמי משלוח, סף משלוח חינם ופרטי קשר, ו-window.COUPONS - קטלוג קופונים מוקלד עם אחוז, סכום קבוע או משלוח, מינימום הזמנה ותוקף. פונקציה אחת, discountFor, פותרת קופון לפי קוד עבור העגלה, ה-checkout וגלגל המזל - אז שום עמוד לא סוטה מהמקור.
פאנל הניהול עורך עותק עבודה בזיכרון ושומר אותו כ-overlay ב-localStorage. ה-overlay מוחל בתוך data.js לפני ש-shop.js מפרסר את הקטלוג, ולכן החיפוש, העגלה וכל עמוד רואים את הקטלוג המנוהל כאילו הגיע משרת. כפתור הייצוא אופה את ה-overlay לקובץ data.js מוכן לקומיט - והוא בדיוק ה-seed לשלב ה-Supabase.
מעגל ההזמנות נסגר בצד הלקוח דרך חוזה משותף: ה-checkout כותב הזמנה ל-g4u_orders, עמוד החשבון מרנדר אותה עם סטטיסטיקות ופנקס כתובות, ופאנל הניהול קורא את אותו חוזה בדיוק. מעל הכל יושב middleware בקצה עם headers מוקשחים ושכבת anti-clone.
התוצאה
החנות חיה ב-gentleman4u.vercel.app ועברה QA אדברסרי: צי של 7 מאמתים עם שופטי הפרכה לכל ממצא הריץ 151 בדיקות רגרסיה על האתר החי - אפס ממצאים חוסמים, ובאג בינוני בודד שאותר תוקן ואומת חי באותו יום. בדיקת Playwright על 12 עמודים בשני viewports נתנה GO לאינטגרציית ה-DB.
המעבר ל-backend כבר מתועד: סכמה של 17 טבלאות Postgres, בחירה מנומקת ב-Supabase, וה-data.js שמיוצא מהפאנל הוא זרע המיגרציה המדויק. עד אז החנות מתפקדת במלואה בצד הלקוח - קטלוג, קופונים, הזמנות וחשבון - בלי שרת אחד, ובלי שנגענו בעיצוב הסופי.