תיעוד טכני מלא של ymarket.co.il
אתר סטטי לסחר B2B, מאוחסן ב-GitHub Pages עם CDN של Cloudflare
אתר סטטי (Static Site) שנבנה עם HTML/CSS/JS טהורים ומיוצר ע"י סקריפטי Node.js
הקוד ב-repo yunagler/ymarket-catalog, branch master. כל push מפעיל deploy אוטומטי.
DNS + SSL + Cache + Security headers. הדומיין ymarket.co.il מנותב דרך Cloudflare.
CDN + SSLללא frameworks. HTML סטטי + CSS מותאם אישית + Vanilla JavaScript. פונט Heebo + Font Awesome.
No Frameworkסקריפטים שמייצרים אוטומטית 825 דפי מוצר ו-167 דפי קטגוריה מתוך קובץ products.json.
lang="he" dir="rtl" בכל הדפים. URLs באנגלית (SEO friendly), תוכן בעברית.
עיצוב Navy + Blue gradient, כרטיסים עם backdrop-filter, hover effects ו-micro animations.
Custom DesignHeader/Footer דינמיים: הקובץ new-header-inject.js מחליף את ה-header וה-footer הישנים בגרסה חדשה (glassmorphism) בכל הדפים בזמן טעינה. הדפים שומרים את ה-HTML הישן לצורך תאימות.
מבנה הקבצים הראשי של הפרויקט
28 דפים ראשיים + 825 מוצרים + 167 קטגוריות + 31 בלוג + 7 משפטי
| דף | נתיב | גודל | תפקיד |
|---|---|---|---|
| דף הבית | / | 122 KB | Hero קרוסלה, קטגוריות, מוצרים מובילים, סגמנטים |
| קטלוג | /catalog | 48 KB | חיפוש, סינון, כל המוצרים עם קרוסלות לפי קטגוריה |
| אודות | /about | 36 KB | סיפור, ערכים, סטטיסטיקות, סוגי לקוחות, אזורי שירות |
| צרו קשר | /contact | 18 KB | טופס יצירת קשר (שולח ל-CRM API), טלפון, וואטסאפ |
| בלוג | /blog | 43 KB | אינדקס פוסטים, סינון לפי קטגוריה |
| עגלה | /cart | 18 KB | ניהול עגלת קניות (localStorage), עדכון כמויות |
| Checkout | /checkout | 18 KB | שליחת הזמנה בוואטסאפ עם פירוט סל |
| כניסה | /login | 17 KB | טופס כניסה (מפנה ל-CRM) |
| הרשמה | /register | 20 KB | טופס הרשמה + יתרונות מועדון |
| FAQ | /faq | 60 KB | שאלות נפוצות באקורדיון + Schema FAQ |
| מעקב | /tracking | 16 KB | מעקב הזמנות (placeholder) |
| 404 | /404.html | 15 KB | דף שגיאה מעוצב |
| משפטי | /legal/* | 7 דפים | תקנון, פרטיות, משלוחים, החזרות, נגישות, עוגיות |
שכבתי: variables → base → layout → components → pages → new-header override
הסטייל הראשי. כולל variables, base, layout, components מאוחדים. נטען בכל דף.
ה-override של העיצוב V2. מחליף צבעים, border-radius, shadows, header/footer styles. נטען אחרון ודורס הכל.
CSS ייעודי לכל סוג דף: catalog.min.css, product-detail.min.css, blog.min.css, contact.min.css, checkout.min.css, legal.min.css.
סדר טעינה חשוב: style.min.css → pages/*.min.css → new-header.css (אחרון, דורס הכל עם !important). שינויים ב-style.min.css לא ישפיעו אם new-header.css דורס אותם.
כל ה-JS טהור (Vanilla) ללא ספריות חיצוניות
| קובץ | גודל | נטען | תפקיד |
|---|---|---|---|
main.min.js | 11 KB | כל הדפים | ניווט, sticky header, אנימציות scroll, עגלה (localStorage), toast, חיפוש, טופס קשר, cookie consent |
new-header-inject.js | 8.8 KB | כל הדפים | מחליף header/footer ישנים ב-V2 glassmorphism. מוסיף announcement bar, mobile menu, cart badge |
catalog.min.js | 15 KB | catalog.html | חיפוש מוצרים, סינון, מיון, lazy loading, תצוגת grid/list |
cart.min.js | 3.5 KB | cart.html | ניהול עגלת קניות: הצגה, עדכון כמויות, מחיקה, סיכום מחירים |
checkout.min.js | 4.8 KB | checkout.html | טופס checkout, ולידציה, שליחת הזמנה ל-CRM API (/api/b2c/orders). Fallback לוואטסאפ אם השרת לא זמין |
schema-markup.js | 34 KB | כל הדפים | מייצר JSON-LD Schema.org (Organization, Product, BreadcrumbList, FAQ) |
analytics.min.js | 2.7 KB | כל הדפים | Google Analytics 4 (G-MKVGJ3XRK5), Facebook Pixel, אירועי ecommerce |
עגלת הקניות מבוססת על localStorage (מפתח: ym_cart). בעת checkout, ההזמנה נשלחת ל-CRM API (app.ymarket.co.il/api/b2c/orders), נוצר לקוח (אם חדש), נוצרת הזמנה בסטטוס "חדשה", ונשלחת הודעת WhatsApp ליובל. ניהול ואישור ההזמנה מתבצע בממשק ה-CRM.
14 קטגוריות ראשיות + 133 תתי-קטגוריות, נוצרות אוטומטית מ-products.json
| # | קטגוריה | URL Slug | תתי-קטגוריות |
|---|---|---|---|
| 1 | חומרי ניקוי וכימיקלים | industrial-cleaning-supplies-wholesale | 8 (אקונומיקה, רצפות, כלים, ידיים...) |
| 2 | מוצרי נייר וניגוב | bulk-paper-towel-office-supplies | 5 (טואלט, מגבות, מפיות, תעשייתי...) |
| 3 | חד פעמי ואירוח | disposable-catering-food-service | 6 (כוסות, צלחות, סכום, קשיות...) |
| 4 | אריזות מזון ו-Take Away | food-packaging-delivery-solutions | 10 (מגשים, קופסאות, שקיות...) |
| 5 | שקיות ופתרונות אשפה | heavy-duty-garbage-bags-wholesale | 4 |
| 6 | טקסטיל, מטליות וסחבות | professional-cleaning-cloths-microfiber | 5 |
| 7 | קפה, שתייה וכיבוד | office-coffee-breakroom-supplies | 1 |
| 8 | בטיחות ומיגון אישי | safety-ppe-equipment-for-business | 5 |
| 9 | ציוד משרדי וכללי | office-supplies-wholesale-business | 8 |
| 10 | ציוד טכני ואחזקה | maintenance-technical-equipment-wholesale | 6 |
| 11 | עטיפה, אריזה ולוגיסטיקה | warehouse-packaging-supplies-wholesale | 1 |
| 12 | עזרה ראשונה - רפואי | first-aid-medical-equipment-business | 6 |
| 13 | טואלטיקה וטיפוח | personal-hygiene-products-wholesale | 5 |
| 14 | כלי עבודה וציוד משקי | institutional-cleaning-tools-equipment | 5 |
מבנה דף קטגוריה: Hero עם שם + תיאור → Trust badges → תתי-קטגוריות → גריד מוצרים (כרטיסים עם תמונה, מחיר, "הוסף לעגלה") → FAQ → SEO content. כל מוצר מוצג עם תמונת thumb.webp.
825 דפי מוצר, כל אחד בתיקייה נפרדת עם index.html
/products/{slug}/
לדוגמה: /products/אקונומיקה-3-5-ריחנית-4-ליטר-BLINX/
כל מוצר עם תמונה ב-/items/{id}.webp + thumbnail ב-/items/{id}-thumb.webp. Fallback ל-JPG.
Breadcrumb → תמונה + גלריה → שם + מחיר + יחידה → תיאור + מפרט → כפתור הוסף לעגלה → מוצרים קשורים
כל המוצרים מיוצרים מ-data/products.json (1.4 MB) ע"י build/generate-products.js
3,345 תמונות מוצרים ב-3 פורמטים + לוגואים + אייקונים
| תיקייה | תוכן | פורמט | גודל טיפוסי |
|---|---|---|---|
/items/ | תמונות מוצרים (1,115 מוצרים x 3) | JPG + WebP + Thumb | JPG: 300KB-1.7MB, WebP: 11-21KB |
/images/logo/ | 8 וריאנטים של הלוגו | PNG | dark, white, hebrew, 2x |
/images/blog/ | 11 אייקונים תמטיים | SVG | ~2-5 KB |
/assets/products/ | 15 תמונות לדף הבית | JPG | ~100 KB |
31 פוסטים (20 באנגלית + 11 בעברית), ממוקדי SEO ותוכן מקצועי
מדריכים לחברות ניקיון, סיטונאות, ציוד מוסדי
8 פוסטיםציוד חד פעמי, אריזות Take Away, ציוד למסעדות
5 פוסטיםאיך לבחור ספק, רכש חכם, חיסכון בנייר, לפי סוג עסק
7 פוסטיםמוסדות ציבוריים, משרדים, סופרים, מרכזי ספורט
6 פוסטיםאופטימיזציה מלאה לגוגל עם Schema.org, sitemaps ו-meta tags
Organization - פרטי חברה
Product - כל מוצר עם מחיר וזמינות
BreadcrumbList - ניווט
FAQPage - שאלות ותשובות
CollectionPage - קטגוריות
sitemap.xml (280 KB) - ראשיsitemap-products.xml (171 KB) - מוצריםsitemap-blog.xml (3.5 KB) - בלוג
כל דף כולל: title, description, canonical, og:*, twitter:card, hreflang, robots
Google Analytics 4 (G-MKVGJ3XRK5)
Facebook Pixel
אירועי ecommerce: AddToCart, ViewContent
סקריפטי Node.js שמייצרים את האתר מתוך קובץ JSON אחד
| סקריפט | פקודה | מה עושה |
|---|---|---|
generate-products.js |
node build/generate-products.js |
קורא data/products.json → מייצר 825 דפי HTML בתיקיית products/ |
generate-categories.js |
node build/generate-categories.js |
קורא products.json → מחלק לקטגוריות → מייצר 167 דפי קטגוריה |
generate-sitemap.js |
node build/generate-sitemap.js |
סורק את כל הדפים → מייצר 3 קבצי sitemap |
optimize-images.js |
node build/optimize-images.js |
ממיר JPG → WebP, יוצר thumbnails |
sync-header.js |
node build/sync-header.js |
מעדכן את ה-header בכל הדפים (1,057 קבצים) |
תהליך עדכון קטלוג: מעדכנים את data/products.json → מריצים generate-products.js + generate-categories.js → git push → GitHub Pages מפרסם אוטומטית.
מהכניסה לאתר ועד להזמנה
זרימת הזמנה מלאה: הלקוח ממלא checkout באתר → POST /api/b2c/orders → ולידציית מחירים server-side → יצירת לקוח (אם חדש) → הזמנה בסטטוס "חדשה" ב-CRM → התראת WhatsApp ליובל → אישור ועדכון סטטוס ב-CRM → שליחה לרווחית (תעודת משלוח/חשבונית) → משלוח ללקוח.
CRM Backend: ממשק ניהול ב-app.ymarket.co.il (Next.js + PostgreSQL). כולל: רשימת הזמנות עם סינון לפי מקור/סטטוס, דף פירוט הזמנה עם עריכה, שינוי סטטוסים (חדשה → אושרה → בהכנה → נשלחה → נמסרה), שליחה לרווחית, ויצירת הזמנות ידנית.
