
גיא חברוני
E-COMMERCE · אפיון · UX/UI · בנייהגיא חברוני הוא פסל קרמיקה שחי ועובד בירושלים. העבודות שלו הן בגדים בלי גוף: שמלות, חליפות, מעילים ובגדי ים מחומר, כשהגוף שנעדר הוא הסיפור. האתר הקודם שלו הציג מחירים, אבל לא אפשר לקנות כלום. בניתי לו אתר באנגלית שנראה כמו קטלוג של גלריה ועובד כמו חנות בינלאומית לפריטים יחידים: 65 עבודות, מחיר בשקלים לישראל ובדולרים לשאר העולם, ואמצעי תשלום שבאמת מתאים לכל קונה. עבדתי לבד, מהאפיון ועד הליטוש האחרון.

30 שניות, אם אתה ממהר.
פסל עם קהל בינלאומי של אספנים, אוצרים וגלריות, ואתר מתבנית גנרית בלי עגלה, בלי תשלום ובלי טופס פנייה על יצירה. הבקשה הייתה אתר ברמה של גלריה, שלא ייראה כמו תבנית. בדרך התברר שמסוף הסליקה לא סולק דולרים, שאין תעריף משלוח קבוע לפסל שבור, ושכתובת הסטודיו היא גם הבית.
קודם עיצוב, ורק אחריו חנות. עברתי מכיוון כהה עם סריף ללבן של גלריה עם Helvetica Neue, ונעלתי שפה עיצובית ב-11.6. ב-2.7 הפכתי את העבודות למוצרי WooCommerce בלי לשנות אף כתובת, ואז בניתי שכבה אחרי שכבה: מטבע, תשלום, משלוח, טפסים, עמודים משפטיים והעברת דומיין.
אתר חי ב-hivroni.art עם 65 עמודי עבודה, גלריה וסרטון תהליך לכל עבודה, פורטפוליו עם סדרות וחיפוש חי, ומסלול Inquire שממלא את הטופס מראש. מחו"ל רואים ומשלמים בדולרים דרך PayPal, ובישראל בשקלים, עם כרטיס, Bit או PayPal. העבודות הן מוצרים שהאמן עורך בעצמו.
חנות שלא נראית כמו חנות.
גררו את הקו כדי להשוות. משמאל: העגלה של WooCommerce כמו שהיא יוצאת מהקופסה על Astra. מימין: אותה עגלה אחרי שעיצבתי אותה בשפת האתר (12.7.2026). את הטפסים של Woo לא החלפתי, רק הלבשתי.
לפניאחרי


האתר הקודם נבנה בבונה האתרים של art.art ואין לי ממנו צילום מקומי, לכן ההשוואה כאן היא של שכבת החנות. בצילומי 12.7 עוד רואים שדה קופון והעברה בנקאית. את שניהם ביטלנו ב-23.8.
מחיר בדולרים, ושום דרך לקנות.
באפיון (14.5.2026) ניתחתי את האתר הקיים. היו לו תמונות טובות ותיאורים אינטלקטואליים. חסרו לו עומק של טכניקה וחומר, מחירים ברורים ומסלול מסחרי עם קריאה לפעולה. ככל שהתקדמתי, כל שכבה חשפה בעיה שלא הייתה בתוכנית.
תבנית גנרית בלי מסלול קנייה
האתר הקודם נבנה ב-art.art: תפריט About / Portfolio / Contacts, כפתור "Donate", שיתוף ל-Twitter, Pinterest ו-Tumblr, וכותרות תבנית כמו "My Best Artwork". כל עבודה ישבה בכתובת UUID עם מחיר בדולרים, בלי עגלה, בלי תשלום ובלי טופס פנייה.
דומיין שהוביל למקום אחר
hivroni.com הפנה לחנות Etsy שלא קשורה לפיסול. גיליתי את זה רק כשהעברתי את הדומיין.
מסוף שלא סולק דולרים
הקהל בינלאומי, אבל מסוף הסליקה הישראלי של הלקוח לא היה מסוגל לסלוק USD. זה התגלה רק ברכישת בדיקה.
אין תעריף קבוע לפסל קרמיקה
משלוח של פריט שביר לחו"ל לא נכנס לטבלת תעריפים. בהתחלה לא היו באתר אזורי משלוח בכלל, והתקנון הבטיח חישוב משלוח בקופה שלא קרה.
הסטודיו הוא גם הבית
כתובת האיסוף היא כתובת המגורים של האמן, וקובץ קורות החיים שלו כלל כתובת וטלפון פרטיים.
כל רכיב רגיל שבר את העיצוב
העיצוב נבנה כבלוק HTML ו-CSS בתוך התוכן, על Astra. wpautop, ה-hover הכחול של Astra, מסגרות focus ודף ה-Shop הגנרי של Woo שברו כל אחד את המערכת העיצובית בדרך משלו.
האתגר האמיתי לא היה "לעצב פורטפוליו יפה". היה צריך לבנות חנות אמנות בינלאומית לפריטים יחידים שנראית כמו קטלוג של מוזיאון. נקודת הייחוס בבריף הייתה "Berlin gallery / MoMA store", והדרישה הייתה שזה לא ייראה כמו תבנית Astra ולא ייראה "AI". כבר בהתחלה הלקוח הוסיף דרישה: העבודות צריכות להיות מוצרים שהוא עורך בעצמו, לא דפים בקוד.
סדרות, נשימה ואפס רעש ויזואלי.
מכל מקום בעולם, במטבע המקומי ובאמצעי תשלום שעובד.
לשאלות על יצירה, להזמנה אישית ולצפייה פרטית.
מחירים, מלאי ו-"Sold" מנוהלים מממשק WooCommerce רגיל, בלי קוד.
עמודים משפטיים, הצהרת נגישות ורק טענות ביוגרפיות מאומתות.
ארבעה פריטים בתפריט. 65 עבודות מתחתיו.
בבריף המקורי היה גם "Gallery", והוא ירד. התפריט הראשי נשאר Home, Portfolio, About ו-Contact. כל השאר נמצא שכבה אחת מתחת.
עמודי תוכן
- HomeHero · Selected Works · About · טופס
- Portfolio/portfolio/
- Aboutביו · תערוכות · פרסים · CV
- Contact/contact/
עבודות
- 65 עמודי עבודה/work-{slug}/
- גלריה + וידאו תהליך
- Add to Cart + Inquire
חנות
- Cart · Checkout
- My Account · Thank-you
- מעוצבים בשפת האתר
משפטי
- Privacy Policy/privacy-policy/
- Terms/terms/
- Accessibility/accessibility/
בוטל
- Shop/shop/ → 301 לפורטפוליו
- ארכיוני קטגוריות301 לפורטפוליו
שלושה אספנים, שלושה מסלולים.
כל החלטה, והסיבה שמאחוריה.
סדרות, לא גלריה
כל גוף עבודה מוצג כיחידה עם שם, ספירת עבודות ותיאור. הסדרה החדשה, Wedding Dresses of No Body, מופיעה ראשונה תחת ALL, לבקשת הלקוח.
חיפוש חי בפורטפוליו
עם 65 עבודות, אספן ששמע על עבודה מסוימת צריך למצוא אותה מהר. הספירות מתעדכנות תוך כדי הקלדה, סדרות ריקות נעלמות, ויש מצב "No works found".
מחיר אחד, ממקור אחד
בבית, בפורטפוליו ובעמוד העבודה המחיר נשלף מ-WooCommerce, אז שלושת המקומות לא יכולים להציג מספרים שונים. תיקנתי את זה אחרי שהגריד הציג מחיר בדולרים ועמוד העבודה מחיר בשקלים. "Sold" החליף את "Not for sale" בכל האתר.
בלי קרוסלות ובלי רוטציה
הגלריה בעמוד העבודה התחלפה לבד כל 3.5 שניות. מי שקרא את המפרט איבד את התמונה שהסתכל עליה. לבקשת הלקוח (20.8) כל רוטציה אוטומטית ירדה, והמבקר בוחר על מה להסתכל. רק ה-crossfade של ה-Hero נשאר, ב-CSS בלבד.
Selected Works אקראיות בכל טעינה
דף הבית שמור ב-cache מלא, ולכן הערבוב קורה בדפדפן (Fisher-Yates) על מאגר JSON. הוא רץ מתחת לקו הגלילה, כך שההחלפה לא נראית.
משלוח: אמת לפני הקנייה
לא הבטחתי "משלוח חינם". הלקוח ביקש שהקונה ידע לפני הרכישה שהמשלוח לא כלול ושמכס ומסים הם חיוב נפרד. לכן שורת המשלוח מופיעה כבר בעמוד העבודה, ומחו"ל כתוב "Quote after order".
אמצעי תשלום אחד לכל קהל
במצב דולר מוצג רק PayPal, בכוונה בלי fallback. רשימה ריקה עדיפה על הצעת PayMe להזמנה בדולרים, שהקונה יבחר ואז ייכשל בה. מאותה סיבה בוטלו (בהחלטת הלקוח) הקופונים וההעברה הבנקאית: שדה קופון כשאין קופונים מזמין חיפוש קודים, וההעברה הבנקאית הבטיחה פרטי חשבון שלא נשלחו לאף אחד.
ביטול דף ה-Shop
הלקוח הגיע אליו דרך "Return to shop" בעגלה ריקה, וראה דף בעיצוב שלא שייך לאתר. זה היה קטלוג שני וגרוע יותר ליד הפורטפוליו. הדף בוטל עם 301, והכפתור הפך ל-"Return to Portfolio" (31.8).
קישור נראה כמו קישור
הלקוח העיר שהטקסט בעמודת Contact בפוטר נראה בדיוק כמו הקישורים. הכלל שקבעתי: הבחנה רק ב-hover היא לא הבחנה. קישורים בצבע כהה, טקסט סטטי קטן ואפור, והמייל עם קו תחתון זהוב קבוע (16.7).
Read more בשורת הכותרת
הלקוח ביקש תיאור לכל סדרה, שנפתח ונסגר. בגרסה הראשונה שמתי את הכפתור בסוף שורת הטקסט. הלקוח שלח הדמיות: "באותה שורה" התכוון לשורת הכותרת. בגרסה הסופית התיאור מוסתר לגמרי במצב סגור, והכותרת היא SERIES · WEDDING DRESSES OF NO BODY · READ MORE (15.9).
מגלריה שחורה עם סריף, ללבן של מוזיאון.
התהליך מתועד בשמות הסקריפטים upload-v2 עד v15 ובכ-300 צילומי מסך מתוארכים. כל גרסה עלתה לאתר כבלוק HTML ו-CSS אחד, והלקוח ראה אותה חיה, לא כתמונה.
חמישה עמודים ופלטה שחור-לבן
אפיון, מבנה של חמישה עמודים ופלטה של שחור ולבן עם ירוק ל-CTA. בבריף נכתב "Narkis + Sans Serif". הכנתי מסמכי בנייה ל-Elementor, אבל בפועל בניתי את העיצוב כבלוק HTML ו-CSS אחד שנדחף לדף. כך שלטתי בכל פיקסל, בלי שכבות של בונה עמודים.
הכיוון הכהה
רקע #0b0b0b, Cormorant Garamond עם Inter, כפתורים זהובים עם פינות של 8px וציטוט באיטליק. נשמר checkpoint בשם "v13 STABLE". אחר כך הגיעו איטרציות Hero ב-1440, 1920 ו-3440 פיקסלים, שתי אופציות פסיפס (23.5), וב-v14 ניסוי של Jost עם Bodoni Moda על רקע בהיר.


כיוון חדש: לבן של גלריה, Helvetica בלבד
המעבר ללבן: Hero לבן, כפתורים בירוק יער ו-About על רקע שמנת. באותו יום עבר כל האתר ל-Helvetica Neue, והכלל של הלקוח נקבע: אין סריף, אף פעם. הבריף ביקש "גלריה או מוזיאון לבן, לא תבנית", והכיוון הכהה נזנח.


לא צר וממורכז, ולא full-bleed עם חורים
בדקתי את האתר ב-3440 פיקסלים. הלקוח דחה גם תוכן צר וממורכז וגם full-bleed עם חורים. הפתרון: מסגרת תוכן של כ-2200 פיקסלים, רקעים ותמונות שנמשכים לרוחב מלא, ו-zoom מדורג של 1.12 / 1.25 / 1.4.

רשת שני הקווים, ו-"Design language locked"
ב-10.6, לבקשת הלקוח, כל אלמנט באתר נצמד לאחד משני קווים אנכיים, וה-Hero קיבל crossfade של חמש תמונות. ב-11.6 נעלתי את השפה העיצובית במסמך DESIGN-SYSTEM.md. סטייה אחת מתועדת: בסבב של 6.7 ה-Hero חזר להיות full-bleed משמאל, והתמונה נוגעת בקצה המסך, בניגוד לכלל שתמונות מכבדות את השוליים. זה מה שחי היום.
12 גרסאות לעמוד אחד
עמוד Contact עבר 12 גרסאות. ב-About הפורטרט הוקטן ליחס 4/5, לפי הדמיה שהלקוח הכין. ב-6.7 נקבע כלל טיפוגרפי אחרי הערה שלו על כותרת עמוד Contact: הכותרת הראשית של כל עמוד במשקל 300, כמו ה-Hero, וכותרות משנה ב-400.
מדפים בנויים ביד, למוצרים
ב-2.7 הפכתי 48 עבודות למוצרי WooCommerce, בלי לשנות אף כתובת. ב-7.7 נוספו חיפוש חי וסדרת Wedding, ובאותו סבב תיקונים הלקוח ביקש hover עדין וניקוי של קווים מפרידים. ב-11.7 הקטלוג הושלם: 65 עבודות, כולן עם חומר מלא ומחיר.

סבבים לפי עין של לקוח מדויק
פוטר שמבחין בין קישור לטקסט (16.7). הסרת נקודות מתוויות בנות שורה אחת, ביטול ה-autoplay, וכפתורי נגישות ועוגיות כזוג זהוב (20.8). תיאורי סדרה (14.9), ו-Read more בשורת הכותרת לפי ההדמיות של הלקוח (15.9).


שום דבר לא צף חופשי.
לבן של גלריה, Helvetica Neue בלבד, אפס צללים וכפתורים בלי פינות מעוגלות. העבודות של גיא הן הצבע. האתר רק מחזיק אותן.
טוקנים
רקע העמודים לבן. השמנת שמורה ל-About, לניווט ולפוטר.
טיפוגרפיה: Helvetica Neue בלבד
הכותרת הראשית של כל עמוד במשקל 300 וכותרות המשנה ב-400. הלוגו 14px עם ריווח של 3px. הסריף נזנח בגלל כלל מפורש של הלקוח.
רשת שני הקווים. הקו השמאלי, --side, מחזיק את הלוגו, את "Selected Works", את כותרת ה-Inquire, את המותג בפוטר ואת תמונת About. הקו הימני, --rl, הוא --side + --c1 + --gap, והוא מחזיק את קישורי הניווט, טקסט ה-Hero, טקסט About, טופס יצירת הקשר ועמודות הפוטר. הרשת הגיעה מהלקוח, ושמרתי עליה גם בעמודים המשפטיים (תוכן עניינים על --side, המסמך על --rl) ובקורות החיים.
כפתורים בלי פינות
מלא בירוק או outline אפור (#cfcdc9), ריפוד 13px 28px, טקסט 11px ב-uppercase. אותו כלל חל על שדות הטופס.
קלף עבודה עם hover כחול רך
קלף לבן, תמונה ב-object-fit:contain, שם ומחיר. ב-hover: מסגרת #6d87b5 וזום עדין של ×1.05. הלקוח ביקש כחול במפורש, עדין ולא "הכחול האגרסיבי של Astra".
כפתורים צפים כזוג זהוב
נגישות ועוגיות, שני עיגולים זהובים של 36px בתחתית משמאל, במרחק 10px זה מזה. 36px הוא הגודל הקטן של התוסף, ועדיין מעל המינימום של 24px ב-WCAG 2.5.8.
תפריט מובייל על שכבת שמנת
שכבה על כל המסך, קישורים גדולים במשקל 300, העמוד הנוכחי בזהב עם קו שמאלי, אייקוני רשתות ותווית PORTRAITS OF NOBODY. מתחת ל-860px.
כללים שאסור לשבור
- Helvetica Neue בלבד. אף פעם לא סריף.
- כל תוכן נצמד ל---side או ל---rl.
- פלטה קבועה: ירוק, זהב, שמנת, כהה, אפור ולבן.
- אין נקודה בסוף תווית בת שורה אחת.
- אין קרוסלות ואין רוטציה אוטומטית.
- ה-crossfade של ה-Hero ב-CSS בלבד, בלי JS.
חנות שלמה, בלי גישה לשרת.
לא הייתה לי גישת FTP. כל עמוד הוא בלוק HTML ו-CSS אחד בתוך התוכן, וכל לוגיקה בצד השרת נכתבה כ-Code Snippet. את הכל דחפתי דרך REST API, ובדקתי עם Playwright ועם 67 סקריפטי Python לבנייה ולפריסה.
#5 Product Pageמרנדר את כל עמוד העבודה מנתוני המוצר: breadcrumb, גלריה sticky עם thumbnails ווידאו תהליך, מפרט, Add to Cart ו-Inquire ושורת משלוח.
#6 Product URLsשומר את הכתובות /work-{slug}/ עם rewrite ו-301 מ-/product/. מאז 14.9 גם 301 מהכתובת השגויה /protfolio/.
#7 Selected Worksארבע עבודות אקראיות בכל טעינה, גם כשהדף שמור ב-cache.
#8 Store Chromeעגלה, Checkout, חשבון ו-Thank-you בשפת האתר, בלי להחליף את הטפסים של Woo.
#10 Mobile Menuהמבורגר לכל האתר מתחת ל-860px, עם Esc, נעילת גלילה ו-aria.
#11 Cookie Bannerהתאמת באנר העוגיות למותג, ב-CSS בלבד. לוגיקת ההסכמה לא נגעה.
#12 Contact Formמחליף טופס mailto בטופס צד-שרת עם nonce, honeypot ו-wp_mail.
#16 Currencyשקל לישראל, דולר אמיתי לשאר העולם, וסינון אמצעי תשלום לפי מטבע.
#17 Portfolio Pricesמחיר חי מ-WooCommerce, או "Sold".
#18 Shippingנוסחי משלוח לפי אזור, "Quote after order", הערת מכס והמרת תעריף לדולר.
#19 Outgoing mailReply-To לאמן על כל מייל שהמערכת שולחת.
#20 Retire Shop301 מ-/shop/ ומכל ארכיוני הקטגוריות לפורטפוליו.
כל קונה רואה רק מה שבאמת יעבוד לו.
| קהל | מטבע ותשלום | משלוח |
|---|---|---|
| ישראל | שקלים. PayMe (כרטיס, Bit, Apple Pay, Google Pay) או PayPal, לבחירת הקונה. | איסוף חינם מהסטודיו, או משלוח מבוטח בתעריף קבוע. |
| שאר העולם | דולרים אמיתיים, ו-PayPal בלבד. זיהוי המדינה לפי IP. | הצעת מחיר אחרי ההזמנה, שמשולמת בלינק נפרד. מכס ומסים בנפרד, ונאמר מראש. |
48 דפים הפכו למוצרים
ב-2.7 כל עבודה הפכה למוצר יחיד: ניהול מלאי, כמות 1 ומכירה בודדת, עם מאפייני Medium, Size ו-Year ושדות לווידאו ולסדרה. הכתובות /work-*/ נשמרו, אז כל קישור מהבית ומהפורטפוליו המשיך לעבוד. התמונות של 47 עבודות היו hotlink מהשרת של art.art, והעברתי אותן לספריית המדיה. אחר כך הלקוח העלה תיקייה של כ-860 קבצים: 43 עבודות הועשרו ב-4–14 תמונות, מידות, שנה, וידאו וטקסט, ונוספו 9 עבודות חדשות וסדרת Wedding של 8.
משקל אחד לשני מטבעות
PayMe חובר ב-20.7. יום אחר כך התברר שהמסוף לא סולק USD, והחנות עברה לשקלים: 60 מחירים הומרו ועוגלו ל-100 הקרוב, לפי בחירת הלקוח. זה גם מה שאפשר Bit. כשהלקוח חיבר PayPal, הסניפט עבר ממצב "info" (שקל ולידו "≈ $") למצב מלא: מחו"ל רואים ומשלמים דולר אמיתי, וטבלת המחירים בדולר מנוהלת בשורה אחת לכל מדרגה.
מודל משלוח ותקנון, ביחד
לפני 23.8 לא היו אזורי משלוח בכלל, ו-Woo דילג על השלב. בניתי אותם לפי התהליך שהלקוח תיאר, ובאותו יום כתבתי מחדש את סעיפים 5.1, 5.2 ו-6 בתקנון. הכלל מאז: מודל המשלוח והתקנון משתנים יחד. עמודי המוצר לא נשמרים ב-cache מלא, ולכן מבקר מחו"ל מקבל משפט נוסף על מכס.
עמודים משפטיים מאפס
Privacy (14 סעיפים), Terms (16) ו-Accessibility (9), באנגלית, לפי חוק הגנת הצרכן, חוק הגנת הפרטיות ותקנות אבטחת מידע, חוק שוויון זכויות ו-GDPR (17.8). כל עמוד קיבל תוכן עניינים דביק ו-handler לקפיצות עוגן, כי משהו בעמוד "בלע" קפיצות #hash.
העברת שני דומיינים
ב-14–16.7 העברתי את שני הדומיינים, משני רשמים שונים, לשרת חדש עם SSL. hivroni.art הוגדר ראשי ו-hivroni.com מפנה ב-301. החלפתי 24 כתובות קשיחות בעמודים, ובווידאו של המוצרים הרצתי replace ב-SQL. שני הדומיינים באורך 11 תווים, אז נתונים מסודרים ב-serialize נשארו תקינים. אחרי ההגירה: 0 הפניות ל-.com.
טפסים, מייל ופרטיות
טופס ה-mailto הציג "This form is not secure", ומבקרים בלי תוכנת מייל איבדו את ההודעה בשקט. החלפתי אותו בטופס צד-שרת (26.7). התראות ההזמנה הופנו לאמן, והשולח הוחלף לכתובת על הדומיין, כי Gmail נכשל ב-SPF מהשרת. ב-Contact כתוב "Studio — Jerusalem, by appointment", ואת קובץ קורות החיים ערכתי והסרתי ממנו כתובת וטלפון לפני ההעלאה.
עבדתי על הפרויקט לבד. לפני כל שינוי בסניפט שמרתי גיבוי של הקוד, ואחרי כל שמירה בדקתי שהסניפט עדיין פעיל ושהעמוד לא נדרס. הפוטר מופיע בתשעה מקומות בלי תבנית משותפת, ולכן כל שינוי בו הוחל בכולם.
רק מה שנמדד, עם תאריך.
על האתר הזה לא הורץ PageSpeed ואין מדידת Lighthouse מתועדת. ניסיון מדידה ב-1.10.2026 נכשל על מכסה יומית. לכן אין כאן ציוני ביצועים, רק בדיקות פונקציונליות שעשיתי בפועל.
פריסה ומובייל
- 19.7: תוכן עמוד המוצר היה ברוחב 510px במסך של 390px, וכפתור Add to Cart היה מחוץ למסך. אחרי התיקון: 0 גלילה אופקית ב-10 עמודים × 3 רוחבים (360 / 390 / 768).
- 8.7: באג של wpautop הכפיל רווחים. קישורי הניווט 38→76px, אייקוני הניווט 16→32px, אייקוני הפוטר 14→28px. תוקן ל-0.
- 17.8: העמודים המשפטיים: 0 גלישה ו-0 שגיאות console בשבעה רוחבים (360–1920).
כתובות ו-SEO טכני
- 14.9: שגיאת הכתיב /protfolio/ תוקנה: 54 קישורים פנימיים ב-7 עמודים ו-4 סניפטים. אחרי התיקון: 0 מופעים ב-11 משטחים, ו-301 בקפיצה אחת.
- 24.8: Tagline ברירת המחדל "My WordPress Blog" הוחלף, ומוצר בדיקה שהיה גלוי למכירה וב-sitemap הוסתר.
- /shop/ וארכיוני הקטגוריות, שהיו ניתנים לסריקה, מפנים לפורטפוליו.
משלוח ונגישות
- 24.8: המשלוח מתקן את עצמו. הזנת תעריף לישראל העלימה את "Quote after order" בלי לשנות שורת קוד.
- עמודי המוצר מציגים נוסח שונה לכל מבקר, כי הם לא נשמרים ב-cache מלא (אומת ב-24.8).
- הצהרת נגישות (IS 5568 / WCAG 2.1 AA), ווידג'ט Ally בצבעי המותג, aria על תיאורי הסדרות ו-prefers-reduced-motion. לא בוצע audit נגישות מדוד.
כשכל רכיב של WordPress נלחם בעיצוב.
רוב הבעיות בפרויקט הזה היו בגודל של כמה פיקסלים, אבל השורש שלהן היה עמוק. לחצו על כל אחת כדי לפתוח אותה.
01המסוף לא סולק דולריםוה-API אמר שהכל בסדר
+
רכישת בדיקה נכשלה גם בכרטיס וגם ב-Bit, עם Error 420.
יצירת עסקה ב-API הצליחה בכל צירוף, כי אימות המטבע קורה רק בשלב החיוב. PayMe אישרו במייל: [424] המטבע USD לא מורשה, ו-[427] הסכום נמוך מדי. טעות שלי בדרך: קראתי "מינימום 100" כ-$100, וה-API עובד באגורות.
החנות עברה לשקלים ו-60 מחירים הומרו. אחר כך כתבתי את סניפט המטבע: דולר אמיתי דרך PayPal לחו"ל ושקל לישראל, וכל אמצעי תשלום מוצג רק במטבע שהוא מסוגל לסלוק.
02רווחים שהוכפלו בשקטwpautop בתוך flex
+
הלקוח שלח צילומים: הניווט והפוטר לא עקביים בין עמודים, והאייקונים נדחקים לקצה.
בעמודים כל <a> ישב בשורה נפרדת, ו-wpautop הזריק <br> ביניהם. כל <br> נהיה פריט flex והכפיל את ה-gap. עמודי המוצר, שמרונדרים ב-PHP דרך hook, לא נפגעו ושימשו לי כקבוצת ביקורת.
כל רשימת inline במכל flex נכתבת בשורה אחת. זה אחד משלושה מצבי כשל של wpautop שתיעדתי: בשני הוא עטף טקסט ב-<p> ששורת זכויות היוצרים נעלמה בגללו, ובשלישי תוכן העניינים הציג רק "CONTENTS".
03עמוד המוצר נחתך בטלפוןבלי פס גלילה
+
כפתור הקנייה מחוץ למסך, והמפרט חתוך באמצע מילה.
grid-template-columns:1fr הוא בפועל minmax(auto,1fr), ורצועת ה-thumbnails דרשה רוחב מינימלי של 510px. overflow:clip הסתיר את הגלישה.
minmax(0,1fr) ו-min-width:0, וגלילה אופקית לרצועה עצמה. עבר בדיקה ב-10 עמודים × 3 רוחבים.
04"קו מנוקד לא מקצועי"בשדה החיפוש
+
מסגרת כחולה מנוקדת ב-focus על שדה החיפוש, הערה של הלקוח.
זה היה border ענק של Astra, לא outline, אז איפוס outline לא עשה כלום. גם המדידה הטעתה: מעבר של 0.2 שניות גרם ל-getComputedStyle להחזיר צבע מאמצע המעבר.
longhands עם !important (border-style:none). בטופס Contact המסגרת הפכה לקו אחיד, כי דווקא שם רק 2 מתוך 4 שדות היו מנוקדים.
05הכחול של Astra בכפתורי הפילטרו-"View cart" בזהב על ירוק
+
כפתורי הפילטר בפורטפוליו נצבעו בכחול ב-hover. בהודעת העגלה הקישור יצא זהוב על רקע ירוק, ומסגרת כחולה הופיעה ונעלמה.
כל <button> יורש את button:hover הכחול של Astra, שגובר על background:none בגלל ספציפיות. בעגלה, שני כללים עם ספציפיות זהה (0,2,2) והמאוחר ניצח. המסגרת הייתה focus ring של הדפדפן, כי Woo ממקד את ההודעה בשביל קוראי מסך.
איפוס עם !important, a:not(.button), ו-outline:none רק על ההודעה. ה-tabindex וה-focus לקורא המסך נשארו בכוונה.
06Placeholders שחוזרים לבדב-Checkout
+
תיקנתי את ה-placeholders בשרת, והם חזרו בדפדפן.
הפילטר בשרת תיקן את הרינדור, אבל address-i18n.js כותב אותם מחדש בדפדפן מתוך get_default_address_fields().
שני פילטרים, לא אחד. ובאותו אזור: תגית "Free" שהתכווצה לרוחב 10px בגלל text-indent של Woo שעבר בירושה. text-indent:0, ואימות ב-390px.
07שמירה שנמחקה אחרי 13 שניותסשן מקביל על עותק ישן
+
ב-14.9 הדף נשמר עם התיקון, ואז חזר לגרסה הישנה.
דרך /revisions מצאתי שתי גרסאות בהפרש של 13 שניות. סשן עבודה מקביל שמר גרסה שנבנתה על עותק מלפני התיקון.
rebase על התוכן החדש, והחלה מחדש של התיקון שלי בלבד. מאז אני בודק את modified אחרי כל שמירה.
08סניפט שכובה בלי שגיאהוהחנות איבדה את העיצוב
+
העגלה והקופה חזרו פתאום לעיצוב הגולמי של Woo.
backslash ב-regex של PHP הפך בדרך לבייט 0x08. Code Snippets כיבה את הסניפט עם code_error:null, כלומר בלי שום הודעה.
regex בלי backslash, assert בשלב הבנייה, ובדיקה של active אחרי כל POST.
09WAF שתוקע בקשותו-JS שמת בשקט
+
בקשת POST עם בלוק <style> נתקעה לנצח. במקביל, סקריפט inline בתוכן פשוט לא רץ.
חומת האש של השרת זיהתה את התגית בגוף הבקשה. ו-WordPress קודד את ה-&& בתוך ה-<script> ל-&&, שזו שגיאת תחביר.
escape ל-< ול-> בתוך ה-JSON: PHP מפענח את זה לקוד זהה, וה-WAF לא רואה תגית. סניפט של 22KB עלה ב-3.5 שניות. ה-JS נכתב בלי & ובלי <, עם if מקוננים.
10דומיין "נעול"רשומות שאי אפשר למחוק
+
במעבר לשרת החדש, hivroni.com לא קיבל את הרשומה החדשה.
ה-Forwarding לחנות ה-Etsy אצל GoDaddy הזריק שתי רשומות A של "Parked", שאי אפשר למחוק ישירות.
מחקתי את ה-Forwarding עצמו, הרשומות נעלמו איתו, ואז הוספתי רשומה חדשה.
המוצר עצמו.
הצילומים נלקחו מהאתר החי ומצילומי הבדיקה שלי. העבירו את העכבר על דף הבית כדי לגלול אותו, ולחצו על כל תמונה כדי להגדיל.

דף הבית המלא: Hero של סדרת Wedding, ארבע Selected Works אקראיות, About קצר על רקע שמנת וטופס Inquire



שורת הכותרת של הסדרה עם READ MORE, ספירת עבודות וקלפים לבנים עם מחיר חי מ-WooCommerce.

גלריה עם thumbnails, eyebrow של הסדרה והשנה, ושורת משלוח שמופיעה לפני הקנייה, רק כשהעבודה במלאי.

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

טופס צד-שרת, וסטודיו "by appointment" במקום כתובת.

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

תוכן עניינים דביק על הקו השמאלי, המסמך על הקו הימני. 14 סעיפים ב-Privacy.

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

מעמוד העבודה הטופס נפתח עם באנר REGARDING, שדה נסתר עם שם העבודה והודעה ממולאת מראש.

מחיר בדולרים ו-PayPal בלבד, בלי אמצעי תשלום שלא יעבוד.
אותה גלריה, בכף היד.






העבודה שלכם ראויה ליותר מתבנית?
פורטפוליו שנראה כמו גלריה, וחנות שמוכרת לכל העולם, במטבע ובאמצעי תשלום שבאמת עובדים.
בואו נדבר →