ניתוח מקרה
בניית אתר וחנות eleyori.co.ilניתוח Case Study
הפרויקט נועד להקים אתר להצגת עבודותיה של האומנית אליאור שניר ולמכירתן לקהל הישראלי, וליצור תשתית לקמפיינים עתידיים של פרויקט ״ואהבת״.
למי המאמר מיועד
לבעלי עסקים המעוניינים להקים או לחדש אתר וחנות מקוונת, ולמפתחים ויועצים שרוצים להבין כיצד אפשר לשלב כלי AI בבנייה ובתחזוקה של אתר עסקי.
מה מטרת המאמר
להציג, באמצעות פרויקט אמיתי, כיצד שילבנו אתר Astro עם חנות WooCommerce וכלי פיתוח מבוססי AI. המאמר מסביר את השיקולים בבחירת הפתרון, את השימוש בחומרים ממערכות קיימות ואת הפיתוחים שנועדו להקל על תפעול העסק.
מטרת הפרויקט והדרישות המרכזיות
מטרת הפרויקט הייתה להקים את האתר על בסיס החומרים הקיימים, ולהקל על התחזוקה והעדכון שלו לאורך זמן. לשם כך הגדרנו חמש דרישות מרכזיות:
- שימוש חוזר בחומרים קיימים: ייבוא תיאורים, תמונות ופרטי מוצרים מהמערכות הקיימות, והתאמתם לקהל הישראלי.
- חוויית שימוש נוחה: אתר מהיר, נגיש ומאובטח, המותאם למחשב, לטאבלט ולטלפון.
- תוכן שקל למצוא ולהבין: מבנה ברור, מידע מובנה ותשתית טכנית התומכת בגילוי התוכן במנועי חיפוש ובמערכות AI.
- גמישות בפיתוח ובעיצוב: אפשרות לעדכן את התוכן, העיצוב והקוד באמצעות סביבות פיתוח מבוססות AI, כגון Cursor, Claude Code ו-Codex.
- תמיכה בתפעול העסק: אפשרות להיעזר ב-AI בהעלאת מוצרים ובניהול הזמנות, עם בקרה אנושית על השינויים.
מצב ראשוני — מערכות קיימות
בהתאם לדרישה הראשונה איתרנו את ארבע המערכות הקיימות:
- חנות אליאורי חו״ל — חנות שופיפיי המשרתת קהל בארצות הברית וקנדה.
- חנות אטסי חו״ל — חנות של מעל 10 שנים שצברה מעל 5,000 הזמנות וכמות ביקורות רבה.
- אתר החנות של פרויקט ואהבת — חנות ווקומרס המופעלת לפי קמפיין.
- אתר קטן למפגשים בישראל.
הפתרון הטכני שנבחר
בחרנו לשלב בין שתי מערכות: Astro להצגת התוכן ודפי הנחיתה, ו-WordPress עם WooCommerce לניהול החנות וההזמנות. החלוקה מאפשרת לנו לפתח את דפי התוכן בגמישות, לצד שימוש במערכת מסחר קיימת לניהול הרכישות.
מבחינת המבקר, האתר צריך להרגיש כמרחב אחד: להכיר את אליאור ואת יצירתה, לעבור לצפייה במוצרים ולהשלים רכישה. לכן, למרות החלוקה הטכנית, העיצוב והניווט בשני חלקי האתר צריכים להיות עקביים.
מה נמצא בכל מערכת?
Astro משמש לבניית דפי התוכן הכלליים ודפי הנחיתה. התוכן נשמר בקבצים, והמערכת מייצרת מהם דפים סטטיים. כך ניתן לעדכן את התוכן והעיצוב באמצעות סביבת פיתוח מבוססת AI, תוך שליטה ישירה בקוד ובמבנה הדפים.
WooCommerce משמש לדפי החנות, לסל הקניות, לתהליך התשלום ולניהול ההזמנות. לצורך העיצוב בחרנו בתבנית GeneratePress ובפיתוח תבנית בת (Child Theme), המאפשרת להוסיף התאמות בלי לשנות ישירות את קובצי התבנית המקורית. התקנת WordPress כוללת רק את התוספים הנחוצים לפעילות החנות.
מדוע בחרנו בשילוב הזה?
אפשר היה לבנות את האתר כולו באמצעות WordPress ו-WooCommerce. זהו פתרון מקובל, וגם במקרה שלנו הוא היה אפשרות מעשית. הבחירה ב-Astro נבעה מהרצון לשלוט באופן ישיר בדפי התוכן ובעיצובם, ולהתאים את תהליך העבודה לסביבות פיתוח מבוססות AI.
שיקול נוסף היה צמצום התלות בתוספים. באתר קודם של האומנית התרחשו אירועי אבטחה שדרשו זמן לתיקון ולשחזור. הניסיון הזה חיזק אצלנו את הרצון לצמצם רכיבים הדורשים תחזוקה ולהעביר את דפי התוכן לחלק סטטי. עם זאת, מספר קטן של תוספים אינו מבטיח אבטחה: מערכת החנות עדיין דורשת עדכונים, גיבויים, ניהול הרשאות ותחזוקה שוטפת, אך כל אלה הפכו לפעולה קלה בהרבה.
לשילוב יש גם מחיר: אנחנו מתחזקים שתי מערכות וצריכים לשמור על התאמה ביניהן בעיצוב, בניווט ובקישורים. בחרנו בחלוקה הזו משום שבפרויקט הזה הגמישות בדפי התוכן והשימוש במערכת מסחר קיימת הצדיקו את עבודת התיאום הנוספת.
כיצד כלי AI משתלבים בתהליך?
סביבות הפיתוח מבוססות ה-AI חוברו לשלושה רכיבים:
- GitHub לניהול גרסאות ולמעקב אחר שינויים בקוד.
- חיבור FTPS לשרת האתר להעברת קבצים ולפרסום עדכונים.
- ה-API של WooCommerce לעבודה עם מוצרים והזמנות, בהתאם להרשאות שניתנו לחיבור.
החיבורים מאפשרים להיעזר ב-AI ליצירת דפים, לשינוי עיצוב, לעריכת תוכן ולעדכון נתוני מוצרים. העבודה נעשית באמצעות הנחיות בשפה טבעית, אך התוצרים עדיין דורשים בדיקה לפני פרסום — במיוחד כשמדובר במחירים, במוצרים או בפעולות הקשורות להזמנות.
המטרה היא להרחיב את היכולת של אליאור לעדכן את האתר בעצמה ולהפחית את הצורך בעזרה בפעולות שגרתיות. בהמשך ניתן יהיה לבחון אילו פעולות היא מבצעת באופן עצמאי ואילו עדיין דורשות תמיכה מקצועית.
ייבוא חומרים ממערכות קיימות
כדי להקים את האתר במהירות ולעשות שימוש במידע שכבר היה קיים, סביבת הפיתוח מבוססת ה-AI סרקה את כתובות המוצרים שביקשנו בשופיפיי, באטסי ובאתר ואהבת. היא יצרה קובצי Markdown ו-JSON עם הפרטים, כולל תיאורים, מחירים, וריאציות ותמונות, וייבאה גם את דפי התוכן הסטטיים לקובצי Markdown.
לאחר מכן ביצענו תרגום ראשוני באמצעות AI, ועברנו על כל החומרים כדי להתאים את הטקסטים, המחירים והמידות לאתר הישראלי. כל התמונות עברו אופטימיזציה לקובצי WebP.
ספריית החומרים שימשה כבסיס ליצירת האתר החדש באמצעות AI.
פתרונות ופיתוחים ייחודיים
במהלך העבודה נתקלנו בכמה צרכים שדרשו פיתוחים ספציפיים:
- החלטנו לא לעשות שימוש בתוסף של Yoast, ובמקום זאת פיתחנו סקריפט קצר שיוצר סכמה מותאמת לכל דף. הסקריפט טוען את הנתונים מתיקיית סכמות שבה כל דף מיוצג בקובץ JSON.
- רצינו להציג את הביקורות מאטסי. לצורך כך יצרנו סקריפט שמתחבר לאטסי באמצעות API, מייבא את הביקורות ומעדכן קובצי JSON. אפשר להריץ את הסקריפט בכל פעם שרוצים לרענן את הרשימה. מתוך ה-JSON נבנים דפי הביקורות ב-Astro, כולל האזכור בדף הבית. הסקריפט גם מייבא תמונה של המוצר באטסי, כי לא כל המוצרים נמצאים באתר הישראלי.
- סקריפט שרץ פעם ביום ומייצר חשבוניות במערכת Green Invoice על בסיס הזמנות חדשות ב-WooCommerce.
- סקריפט לקופסאות הרשמה לרשימות נפרדות במנהל הרשימות Brevo. הסקריפט כולל נתוני אבטחה ופנייה ל-API של Brevo.
- עדכון העיצוב והטקסטים של הודעות הדוא״ל הנשלחות ללקוחות (Transactional emails) דרך תבנית הבת (Child Theme).
תוצאות הפרויקט
הפרויקט יצר בסיס לאתר ולחנות המותאמים לקהל הישראלי, תוך שימוש בחומרים שכבר היו קיימים בחנויות של אליאור. תיאורי מוצרים, תמונות, מחירים ווריאציות נאספו מהמערכות הקיימות, אורגנו בקובצי תוכן והותאמו לשפה ולשוק המקומי. כך נחסך הצורך להכין את כל חומרי האתר מחדש.
התשתית שנבנתה משלבת דפי תוכן ונחיתה ב-Astro עם חנות ומערכת ניהול הזמנות ב-WooCommerce. התוכן והקוד ניתנים לעדכון באמצעות סביבות פיתוח מבוססות AI, וניהול הגרסאות ב-GitHub מאפשר לעקוב אחר השינויים. בבדיקות Lighthouse שביצענו התקבלו ציוני ביצועים הקרובים ל-100 בדפים שנבדקו.
לצד האתר פותחו כלים לתמיכה בשיווק ובתפעול: ייבוא ביקורות מאטסי והצגתן באתר, הרשמה לרשימות תפוצה נפרדות ב-Brevo, הפקת חשבוניות על בסיס הזמנות והתאמת הודעות הדוא״ל הנשלחות ללקוחות. כלים אלה נועדו לצמצם עבודה ידנית ולחבר בין האתר למערכות העסק הקיימות.
השלב הבא הוא לבחון את התשתית בשימוש שוטף: אילו עדכונים אליאור יכולה לבצע בעצמה, כמה זמן נחסך בתפעול, ומה דורש שיפור. מדידה של ביצועי האתר, השלמת רכישות וזמן העבודה תאפשר להעריך את התועלת העסקית מעבר לעצם הקמת המערכת.
