אתר וחנות אונליין לספר: ספר הקקי הגדול

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

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

האתגרים המרכזיים:

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

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

אחר כך כתבנו את המערכת עצמה ב-Laravel, בקוד נקי ובלי שלב בנייה: CSS ו-JavaScript נקיים, מסד נתונים שמותקן בייבוא קובץ SQL אחד, וכל ההגדרות הרגישות, סליקה ודיוור, ניתנות לעריכה מממשק הניהול ולא מתוך הקוד.

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

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

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

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

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

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

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

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

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

מעל זה נוספו מפת אתר, נתונים מובנים לעמודי המוצר ואירועי מסחר ל-Google Analytics 4 ול-Meta, עם חיבור ל-Tag Manager ול-Search Console מתוך הממשק. אין הבטחה לדירוג, אבל מבנה נכון, כתובות יציבות ומדידה אמינה הם התנאי להתחרות ולהבין מאיפה מגיעות המכירות.