דלג לתוכן

// סיפור לקוח · BNEI YEHUDA TLV

Bnei Yehuda

מועדון שלם.
במערכת אחת.

אתר רשמי, חנות וכרטיסים לאוהדים — וחדר בקרה לצוות המועדון.

בני יהודה תל אביב הוא מועדון כדורגל עם היסטוריה של 90 שנה, קהל נאמן ושכונה שלמה מאחוריו. האתר הרשמי היה צריך להיות הבית הדיגיטלי של כל זה: המשחק הבא, התוצאות והטבלה, הסגל, החדשות, חנות המוצרים הרשמית — ובמקביל, כלי עבודה אמיתי לאנשים שמנהלים את המועדון יום-יום.

onezero בנתה את האתר, את החנות ואת מערכת הניהול: Frontend ב-SSR, אינטגרציה לנתוני הליגה, חנות על WooCommerce עם הדפסת שם ומספר, סליקה וחשבוניות, ומערכת אדמין לניהול הזמנות, הפצה, הדפסות, התאמת תשלומים, מוצרים, משחקים, כרטיסים ומשתמשים.

bneiyehuda.co.il
עמוד הבית של bneiyehuda.co.il: המשחק הבא עם ספירה לאחור וכפתור לרכישת כרטיסים, חדשות המועדון, החנות וטבלת הליגה
NEXT MATCH · LIVE TABLE
החנות הרשמית במובייל: קולקציית 26/27, קולקציית BYTLV ומסנני עונות
OFFICIAL STORE
  • נתוני ליגהLIVEלוח משחקים, תוצאות וטבלה מה-API של הליגה
  • הפצה7שלבים מתשלום ועד מסירה — כולל תור הדפסה
  • יום משחק8קטגוריות בצ'קליסט שנוצר אוטומטית לכל משחק
  • תפקידים4בעלים · מנהל · אחראי הדפסות · צוות — הרשאות לפי עמוד

// 01 · מה בנינו

שלושה מוצרים. מועדון אחד.

האוהדים רואים אתר וחנות. הצוות רואה חדר בקרה. מאחורי שניהם — בסיס קוד אחד, מקורות נתונים משותפים ושפה עיצובית אחת בכתום של המועדון.

  • 01FANS · SSR · LIVE DATA

    האתר הרשמי

    המשחק הבא עם ספירה לאחור, לוח משחקים ותוצאות, טבלת הליגה, סגל השחקנים, חדשות וגלריה, דף המועדון עם חדר גביעים תלת-ממדי, הרכב כל הזמנים — והכול מהיר גם כשכולם נכנסים באותו ערב.

  • 02WOOCOMMERCE · PAYPLUS

    החנות הרשמית

    מדי משחק לפי עונות, קולקציית הלייף-סטייל BYTLV, הדפסת שם ומספר על החולצה עם תצוגה מקדימה, קופונים, משלוח או איסוף מהמועדון, סליקה וחשבונית אוטומטית.

  • 03ADMIN · OPERATIONS

    חדר הבקרה

    מערכת ניהול לצוות המועדון: הזמנות, הפצה בשלבים, תור הדפסות וייצוא לבית הדפוס, התאמת תשלומים, ניהול מוצרים ומלאי, ניהול משחקים עם צ'קליסטים, חלוקת כרטיסים ב-SMS ומשתמשים עם הרשאות.

// 02 · האתגר

מועדון כדורגל
הוא גם עסק קטן.

מאחורי כל משחק יש צוות קטן שמנהל חנות, מדפיס חולצות, מחלק כרטיסים ומתאם אוטובוסים ומלונות — בדרך כלל בטבלאות, בוואטסאפ ובזיכרון. המערכת הייתה צריכה לענות על כמה דרישות בבת אחת:

  • 01

    לאחד מקורות: חדשות ב-WordPress, מוצרים ב-WooCommerce, נתוני ליגה מ-API חיצוני, משחקים וכרטיסים במסד נתונים משלנו.

  • 02

    לעמוד בעומס של יום משחק — כולם נכנסים לראות את ההרכב והתוצאה באותה שעה.

  • 03

    להפוך חולצה מודפסת לתהליך: תשלום, הדפסה, אריזה, משלוח למועדון, מסירה — בלי שהזמנה תלך לאיבוד.

  • 04

    לתת לכל איש צוות רק את מה שהוא צריך: אחראי ההדפסות לא רואה מחירים ולא משנה הזמנות.

  • 05

    לשלוח כרטיסים לאוהדים, לשחקנים ולאורחים — בלי להדפיס, בלי אקסל, ועם מעקב מי קיבל מה.

  • 06

    להרגיש כמו המועדון: כתום, אריה, אצטדיון — ונגיש לפי WCAG 2.0 AA.

ובעיקר — כל כסף שנגבה חייב להתאים להזמנה. בלי 'נעלם לנו תשלום'.

// 03 · הפתרון

שבוע של משחק.
בתוך המערכת.

במקום רשימת פיצ'רים, בנינו את המערכת סביב הלו"ז האמיתי של המועדון. כך נראה שבוע אחד — מהרגע שהליגה מפרסמת את המחזור ועד שהשריקה הסופית מתעדכנת בטבלה:

  1. 01

    המשחק נכנס לניהול המשחקים — ידנית או בסנכרון מלוח הליגה — עם מועד, אצטדיון וערוץ שידור

  2. 02

    צ'קליסט נוצר אוטומטית לפי בית/חוץ: לוגיסטיקה, תפעול, אבטחה ורפואה, קבוצות וצוותים, קהל וכרטיסים, חוויית משחק, מדיה, לאחר המשחק

  3. 03

    הצוות סוגר משימות עם שדות מובנים — שעת יציאת אוטובוס, אישור מלון, רשימות, קבצים מצורפים — וחדר הבקרה מראה מה עדיין פתוח

  4. 04

    חלוקת הכרטיסים: מכסות רגילים וכבוד, אנשי קשר לפי קבוצות, 'הקבועים' בלחיצה, ו-PDF שנשלח ב-SMS מתיקיית Drive של המשחק

  5. 05

    באתר: המשחק הבא עם ספירה לאחור, כפתור לרכישת כרטיסים, והחנות מקבלת את גל ההזמנות של לפני המשחק

  6. 06

    אחרי השריקה: התוצאה, לוח המשחקים וטבלת הליגה מתעדכנים מנתוני הליגה — בלי שמישהו צריך להקליד

  7. 07

    ובחנות, במקביל: ההזמנות שנכנסו עוברות לתור ההדפסה, לרשימה היומית לבית הדפוס ולשלבי ההפצה

האתר הרשמי · עמוד הבית

המשחק הבא, הטבלה, החדשות והחנות — במסך אחד, בשפה של המועדון: כתום על שחור, אריה, אצטדיון.

bneiyehuda.co.il
עמוד הבית של בני יהודה תל אביב בדסקטופ: כרטיס המשחק הבא עם ספירה לאחור, קרוסלת חדשות, החנות וטבלת הליגה
NEXT MATCH · COUNTDOWN

// 04 · החנות

חולצה עם השם שלך.
ותהליך מאחוריה.

החנות הרשמית יושבת על WooCommerce — אבל האוהד לא פוגש את WooCommerce. הוא פוגש חנות מהירה בצבעי המועדון, מסודרת לפי עונות, עם קולקציית BYTLV ועם הדפסת שם ומספר שרואים על החולצה לפני שמשלמים.

  • 01קטלוג לפי עונות: 26/27, 25/26, 24/25 וקלאסיקות
  • 02BYTLV Collection — ליין לייף-סטייל עם עמוד נחיתה משלו
  • 03הדפסת שם ומספר: תבניות חולצה, סגנונות ספרות, תצוגה מקדימה
  • 04צ'ק-אאוט בצד השרת עם PayPlus וחשבונית אוטומטית
  • 05קופונים — כולל קופוני משלוח חינם של WooCommerce
  • 06משלוח או איסוף מהמועדון, מיילים ללקוח בכל שלב
  • 07מלאי לפי מידה, וסרטוני מוצר
  • 08קאש בצד השרת שמתנקה אוטומטית כשמוצר משתנה
החנות הרשמית במובייל: כותרת 'חנות', קישורים לקולקציית 26/27 ול-BYTLV Collection, מסנני עונות וכרטיס הקולקציה החדשה
BYTLV · STORE

// 05 · הפצה והדפסות

מתשלום למסירה.
בלי הזמנה שנופלת.

כל הזמנה ששולמה נכנסת לזרימה של שבעה שלבים: הדפסה (אם צריך), מוכן אחרי הדפסה, ממתין למשלוח, נשלח למועדון, הגיע למועדון, נמסר ללקוח. המצב נשמר על ההזמנה עצמה ב-WooCommerce, עם היסטוריה מלאה — אז אין מסד נתונים נוסף שצריך לסנכרן.

  • 01מעברים רק לפי טבלה מפורשת — אין קפיצות שרירותיות
  • 02נעילה אופטימית: שני אנשים לא דורסים זה את זה
  • 03חזרה אחורה — רק למנהל, ורק עם סיבה
  • 04אחראי ההדפסות רואה רק את תור ההדפסה, בלי מחירים
  • 05רשימה יומית וייצוא Excel לבית הדפוס, דף הדפסה לכל הזמנה
  • 06לוח הזמנות: SLA של 30 ימי עסקים, התראות על הזמנות מתעכבות
  • 07התאמת תשלומים: כל עסקה ב-PayPlus מול ההזמנה ב-WooCommerce
  • 08הזמנה ידנית מהאדמין — טלפון, דלפק, ספונסר

// 06 · ניהול משחקים

כל משחק
מגיע עם צ'קליסט.

מודול ניהול המשחקים הוא הלב התפעולי של המועדון. משחק נוצר ידנית או מסונכרן מלוח הליגה, ומיד מקבל צ'קליסט לפי בית או חוץ. כל משימה יכולה לשאת שדות מובנים — כן/לא, שעה, כמות, טבלה — הערות וקבצים, ומתקדמת עם אחוז השלמה שרואים מחדר הבקרה.

  • 01סנכרון מלוח הליגה: יריבה, מועד, אצטדיון, מחזור
  • 02תבנית צ'קליסט לבית ולחוץ, שמורה למשחק ברגע היצירה
  • 03שמונה קטגוריות — מלוגיסטיקה ועד 'לאחר המשחק'
  • 04שדות מובנים: אוטובוס, מלון, רשימות צוות, חניות, ציוד
  • 05קבצים מצורפים, הערות, שמירה אוטומטית
  • 06Waze ו-Google Maps לאצטדיון, ערוץ השידור, סטטוס בהכנות/הושלם
admin/games
מסך ניהול המשחקים באדמין: המשחק הבא נגד הפועל רעננה עם מד התקדמות 1/7 משימות, ורשימת המשחקים הקרובים
BYTLV · MATCHES
admin/games/checklist
צ'קליסט של משחק באדמין: קטגוריות לוגיסטיקה וקהל וכרטיסים, משימות כמו הזמנת מלון ואוטובוס לשחקנים עם שדות שעה וקבצים
MATCH CHECKLIST · 8 CATEGORIES

// 07 · חלוקת כרטיסים

כרטיס ב-SMS.
לא בפתק.

לכל משחק יש מכסה של כרטיסים רגילים וכרטיסי כבוד — למשפחות שחקנים, להנהלה, לספונסרים, לאורחים מההתאחדות. עד היום זה נוהל ברשימות. עכשיו זה מודול: אנשי קשר לפי קבוצות, הצעות חכמות על בסיס משחקים קודמים, שורת 'הקבועים', ו-PDF של הכרטיס שנשלח ישירות לטלפון.

  • 01מכסות לבית ולחוץ, כרטיסים רגילים וכרטיסי כבוד
  • 02קבוצות קשר: שחקנים, משפחות, הנהלה, ספונסרים, התאחדות ועוד
  • 03ה-PDF נלקח מתיקיית Drive של המשחק — בלי להעלות ידנית
  • 04שליחה ב-SMS דרך ספק ישראלי, עם ספירת מקטעים בעברית
  • 05עמוד כרטיס אישי בטלפון שעובד גם בלי JavaScript
  • 06ייצוא ונתונים לכל משחק: מי קיבל, מתי, כמה

// 08 · חדר הבקרה

BYTLV / Club Operations.

למערכת הניהול יש מותג משלה. לא עוד אדמין אפור: קרם חם למשטחי העבודה, פחם לניווט, כתום המועדון רק לפעולה הראשית, Karantina לכותרות ומשפחת אייקונים של המועדון. הדאשבורד פותח בבוקר עם מה שחשוב: המשחק הבא, מה דורש טיפול, ואיפה כל הזמנה עומדת.

admin/control-room
חדר הבקרה של האדמין: ברכת בוקר, כפתורי פעולה מהירה, כרטיס 'המשחק הבא' עם סמלי הקבוצות ושעת המשחק, ואריחי מצב של ההזמנות
BYTLV · CLUB OPERATIONS
  • 01

    הרשאות נאכפות בשרת, לא רק בממשק

  • 02

    ארבעה תפקידים ורשימת עמודים לכל משתמש

  • 03

    אישור לפני כל פעולה הרסנית, הגנה על שינויים שלא נשמרו

  • 04

    Ctrl+K: ניווט, פעולות, פתיחת הזמנה לפי מספר

  • 05

    דאשבורד עם המשחק הבא, 'דורש טיפול' ומצב ההפצה

  • 06

    עובד בטלפון: סרגל טאבים, מגירות, טפסים בנייד

  • 07

    ניגודיות AA, RTL מלא, מספרים ואימיילים ב-LTR

  • 08

    נבדק ב-Playwright על כל מסך, ב-3 רזולוציות

admin/products
מסך המוצרים באדמין: אריחי סיכום, מסננים ורשימת מוצרים עם מלאי לפי מידה, מחיר, סוג הדפסה וסטטוס פרסום
PRODUCTS · STOCK PER SIZE

// 09 · לאוהדים

הטבלה מתעדכנת לבד.
הגביעים — בתלת-ממד.

הצד הציבורי של האתר נבנה כדי להרגיש כמו המועדון ולא כמו תבנית. הנתונים הספורטיביים מגיעים אוטומטית, והתוכן השיווקי נשאר בידי הצוות ב-WordPress — בלי שמישהו צריך לגעת בקוד.

  • לוח משחקים, תוצאות וטבלה — מ-API הליגה, עם מצב ריק מסודר בין עונות
  • המשחק הבא: ספירה לאחור, ערוץ שידור, קישור לכרטיסים
  • סגל השחקנים עם מסך שיתוף לכל שחקן
  • חדר גביעים תלת-ממדי (Three.js) עם ציר זמן של התארים
  • הרכב כל הזמנים: האוהד בונה, משתף כתמונה
  • חדשות וגלריה מ-WordPress, דפי הנהלה וצוות, דוחות כספיים
  • ספלאש 90 שנה למועדון
  • הצהרת נגישות ועמידה ב-WCAG 2.0 AA

אותו קוד, אותם צבעים — בדסקטופ, בטאבלט ובטלפון באצטדיון.

bneiyehuda.co.il/league-table
טבלת ליגה לאומית באתר: בני יהודה תל אביב מודגשת במקום השני, עם משחקים, ניצחונות, תיקו, הפסדים, יחס שערים והפרש
LEAGUE TABLE · LIVE
bneiyehuda.co.il/games/schedule
לוח המשחקים באתר: כרטיסי משחק לפי מחזור עם סמלי הקבוצות, התוצאה, הליגה, התאריך, האצטדיון וערוץ השידור
FIXTURES · RESULTS

// 10 · עיצוב וביצועים

שלושה עקרונות.

  • 01

    כתום

    שפה אחת לאתר, לחנות ולאדמין: כתום המועדון, שחור, האריה והאצטדיון כרקע, Karantina לכותרות. גם מסך ניהול המלאי נראה כמו בני יהודה.

  • 02

    מהיר ביום משחק

    רינדור בצד השרת, קאש לכל מה שמגיע מ-WordPress, מ-WooCommerce ומהליגה, וניקוי קאש אוטומטי דרך webhooks כשמשהו משתנה. גם האדמין מוגש מקאש חם.

  • 03

    אחראי

    נגישות לפי WCAG 2.0 AA והצהרה מלאה, הרשאות בצד השרת, פרטי לקוחות מוסתרים ממי שלא צריך לראות אותם, והיסטוריה לכל שינוי בהזמנה.

// 11 · התוצאה

אתר לאוהדים.
מערכת למועדון.

bneiyehuda.co.il הוא היום הבית הדיגיטלי של המועדון: המשחק הבא, התוצאות והטבלה מתעדכנים לבד, החנות הרשמית מוכרת מדים ולייף-סטייל עם הדפסה אישית, והצוות מנהל את ההזמנות, ההדפסות, המשחקים והכרטיסים מחדר בקרה אחד — מהמחשב במשרד או מהטלפון באצטדיון.

המערכת ממשיכה לגדול עם המועדון: מודולים נוספים לניהול לקוחות, קופונים ותוכן כבר מסומנים בתפריט — על אותה תשתית, אותן הרשאות ואותה שפה.

// 12 · טכנולוגיות ויכולות

מה יש מתחת לדשא

אפליקציה אחת ב-SSR משרתת את האתר, את החנות ואת האדמין — עם מקורות נתונים שכל אחד מהם נשאר במקומו.

  • FRONTENDReact Router 7 · React 19 · SSR
  • DESIGNTailwind 4 עם מערכת tokens למותג
  • COMMERCEWooCommerce headless: מוצרים, הזמנות, קופונים
  • CONTENTWordPress לחדשות ולגלריה
  • DATASupabase/Postgres למשחקים, כרטיסים ומשתמשים
  • PAYMENTSPayPlus: סליקה, IPN, חשבוניות, התאמות
  • SPORTSAPI הליגה: לוח, תוצאות וטבלה
  • MESSAGINGSMS, אימייל ו-Google Drive לכרטיסים
  • OPSזרימת הפצה עם נעילה אופטימית והיסטוריה
  • PRINTINGייצוא Excel ודפי הדפסה לבית הדפוס
  • FANSThree.js לחדר הגביעים, שיתוף תמונות מהדפדפן
  • INFRAקאש בשרת, webhooks לניקוי, Docker

// 13 · מנהלים מועדון, ליגה או עסק עם יום שיא?

מאתר שיווקי
למערכת שמנהלת.

אנחנו בונים אתרים שמחזיקים עומס, חנויות שמוכרות, ומערכות ניהול שהצוות באמת משתמש בהן — עם הרשאות, תהליכים והיסטוריה. בואו נבנה את שלכם.

כתום. מהיר. מסודר.