לדלג לתוכן הראשי

ייבוא דף מותאם אישית מקובץ JSON - מבנה הקובץ

איך בנוי קובץ ה־JSON לייבוא דף מותאם אישית, מה כותבים בכל בלוק, ואיך להיעזר בכלי AI כדי להכין את הקובץ

כפתור ייבוא דף מקבל קובץ JSON, אבל רק אם הוא בנוי במבנה של mypips


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


שני סוגי קבצים

  • דף שלם (mypips-landing-page): קובץ עם כתובת הדף, הכותרת ורשימת הבלוקים. זה הקובץ שמייבאים מכפתור ייבוא דף.

  • בלוק בודד (mypips-landing-block): קובץ עם אזור תוכן אחד, להוספה לדף קיים.

בשני המקרים הקובץ נפתח בשדות _type ו־_version, בדיוק בערכים שמופיעים בדוגמאות.


דוגמה לדף שלם

{
  "_type": "mypips-landing-page",
  "_version": 1,
  "page": {
    "slug": "about",
    "title": "אודות המשק",
    "enabled": true,
    "seo": { "title": "אודות המשק שלנו", "description": "הסיפור מאחורי המשק ומה חשוב לנו." },
    "blocks": [
      { "type": "hero", "props": { "title": "ברוכים הבאים למשק", "subtitle": "ירקות טריים, ישר מהשדה", "imageUrl": "https://example.com/cover.jpg", "buttonText": "לכל המוצרים", "buttonLink": "products" } },
      { "type": "text", "props": { "heading": "מי אנחנו", "headingLevel": 2, "body": "<p>כאן כותבים את הסיפור שלכם. אפשר <b>להדגיש</b>, להוסיף קישורים ורשימות.</p>" } },
      { "type": "gallery", "props": { "heading": "מהשטח", "layout": "grid", "columns": 3, "images": [
        { "imageUrl": "https://example.com/field1.jpg", "alt": "קטיף בוקר" },
        { "imageUrl": "https://example.com/field2.jpg", "alt": "ארגזים בדרך ללקוחות" }
      ] } },
      { "type": "accordion", "props": { "heading": "שאלות נפוצות", "items": [
        { "question": "מתי מגיעים המשלוחים?", "answer": "<p>בימי שלישי ושישי.</p>" }
      ] } },
      { "type": "cta", "props": { "heading": "מוכנים להזמין?", "buttons": [ { "text": "לכל המוצרים", "link": "products" } ] } }
    ]
  }
}


שדות הדף

  • slug (חובה): הכתובת של הדף. אותיות באנגלית קטנות, ספרות ומקפים בלבד, עד 15 תווים. כתובות של המערכת (כמו products, cart, manager) שמורות ולא יתקבלו.

  • title (חובה): שם הדף.

  • enabled: האם הדף מוצג ללקוחות. ברירת המחדל היא true.

  • seo: הגדרות התצוגה לגוגל, אובייקט עם title, description ו־ogImage (תמונת שיתוף).

  • blocks: רשימת הבלוקים, לפי הסדר שבו יופיעו בדף. עד 200 בלוקים.


הבלוקים: מה כותבים בכל אחד

כל בלוק ברשימה מקבל type (באנגלית) ואובייקט props עם התוכן שלו. אלה הבלוקים והשדות העיקריים של כל אחד:

  • באנר ראשי hero: title הכותרת הגדולה, subtitle משפט משנה, imageUrl תמונת הרקע (או videoUrl לווידאו רקע), ו־buttonText + buttonLink לכפתור. רוצים טקסט לצד התמונה במקום על גביה? מוסיפים "layout": "two-col-text-start".

  • טקסט text: heading כותרת המקטע, headingLevel דרגת הכותרת (1 עד 6), ו־body הטקסט עצמו. אפשר טקסט פשוט, ואפשר עיצוב בסיסי עם תגיות כמו <p>, <b>, רשימות וקישורים.

  • תמונה image: imageUrl (חובה), alt תיאור קצר לנגישות ולגוגל, caption כיתוב מתחת לתמונה, ו־link אם רוצים שלחיצה על התמונה תוביל לקישור.

  • וידאו video: videoUrl. עובד עם קישור רגיל ל־YouTube או Vimeo, או קובץ וידאו (mp4). אפשר להוסיף heading ו־caption.

  • גלריה gallery: images רשימת תמונות, לכל אחת imageUrl, alt ו־caption. layout הוא grid (רשת) או scroll (גלילה לרוחב), ו־columns קובע כמה עמודות (1 עד 6). לחיצה על תמונה פותחת אותה בתצוגה מלאה.

  • סטוריז stories: stories עד 5 פריטים, לכל אחד mediaUrl (תמונה או וידאו) ו־title. מוצג כשורת עיגולים שנפתחים לצפייה במסך מלא, כמו באינסטגרם.

  • רשת grid: מסדר בלוקים אחרים זה לצד זה. children רשימת הבלוקים הפנימיים, columns כמה עמודות בכל גודל מסך, למשל { "xs": 1, "md": 2 } (עמודה אחת בנייד, שתיים במחשב).

  • קריאה לפעולה cta: heading ו־subheading לכותרת ולמשפט מתחתיה, ו־buttons עד 3 כפתורים, לכל אחד text ו־link.

  • רווח spacer: height גובה הרווח, למשל "40px". שימושי לאוויר בין מקטעים.

  • אקורדיון accordion: items רשימת פריטים שנפתחים בלחיצה, לכל אחד question ו־answer. מושלם לשאלות ותשובות. mode הוא single (נפתח אחד בכל פעם, ברירת המחדל) או multiple.

  • שלבים story-flow: ציר "איך זה עובד" צעד אחרי צעד. steps רשימת שלבים, לכל אחד title ו־body, ואפשר גם image עם url ו־alt. המספור מתווסף אוטומטית.

  • המלצות testimonials: items המלצות של לקוחות, לכל אחת quote הציטוט ו־author השם, ואפשר גם role (תפקיד או יישוב) ו־rating דירוג 1 עד 5 (מוצג כשמוסיפים "showRating": true לבלוק). layout הוא cards כרטיסים זה לצד זה, carousel גלילה, או quote ציטוט אחד גדול.

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


דוגמה לבלוק בודד

{
  "_type": "mypips-landing-block",
  "_version": 1,
  "block": { "type": "accordion", "props": { "heading": "שאלות נפוצות", "items": [
    { "question": "מתי מגיעים המשלוחים?", "answer": "<p>בימי שלישי ושישי.</p>" },
    { "question": "אפשר לאסוף עצמאית?", "answer": "<p>בטח, בתיאום מראש.</p>" }
  ] } }
}


כללים שחשוב להכיר

  • הקובץ חייב להיות JSON תקין: בלי פסיקים מיותרים ובלי הערות.

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

  • קישורים וכתובות של תמונות חייבים להיות כתובת אינטרנט מלאה (https) או כתובת יחסית בתוך החנות, למשל products.

  • מגבלות כמות: עד 100 תמונות בגלריה, עד 5 סטוריז, עד 50 פריטים באקורדיון, עד 30 שלבים, עד 24 המלצות, ועד 3 כפתורים בבלוק קריאה לפעולה.

  • "enabled": false על בלוק שומר אותו בדף אבל מסתיר אותו מהלקוחות, נוח להכנת תוכן מראש.


הדרך הקלה: להכין את הקובץ עם AI

לא צריך לכתוב את הקובץ ידנית. נותנים לכלי AI (כמו ChatGPT או Claude) את הקישור למאמר הזה יחד עם התוכן שלכם, ומבקשים קובץ JSON לפי המבנה שמתועד כאן. את הקובץ שמתקבל מייבאים בלחיצה, והדף נפתח בעורך להמשך עריכה ועיצוב.

🏆 טיפ! יש לכם כבר דף אודות באתר אחר או טקסט מוכן? הדביקו אותו לכלי ה־AI יחד עם המאמר הזה ובקשו "תבנה לי מזה קובץ ייבוא ל־mypips".


למפתחים

ל־mypips יש גם API מלא לניהול דפים, יצירה, עדכון ועריכת בלוקים באופן אוטומטי. פרטים במאמר על ה־mypips API.


🏆 טיפ

  • צריכים עזרה נוספת? קבלו תמיכה בקבוצת הפייסבוק של הלקוחות שלנו, ותקבלו תשובות מהירות גם מלקוחות ותיקים וגם מצוות המומחים שלנו.

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

האם קיבלת תשובה לשאלתך?