בניית פריסת תגיות דינמיות לבחירה לעמוד מוצר

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

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

לוגיקת החלטה

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

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

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

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

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

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

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

בדוגמא הזאת ניתן לראות שאחד מתגיות המעבד מושבתים, הסיבה לזה היא כי אין מוצר שיכול להתקיים את שאר התגיות שנבחרו כבר שזה 2TB SSD מנפח אחסון ו-24GB מגודל זיכרון.

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

תצורות נוספות

לאור זאת שהמנגנון מספק את האפשרויות השונות ביקשו התנהגויות נוספות למנגנון, כאשר אין התאמה תמיד יש התאמה דומה ולכן ביקשו שיהיה אפשר לעבוד בין ההתאמות הדומות:

בודגמא הזאת ניתן לראות למטה שכתוב ״זמין בתצורה אחרת״ ברגיל זה לא יהיה כתוב אלה "לא זמין באפשרות שנבחרה״ וגם זה יהיה הרבה יותר מוסתר, כך בדוגמא הזאת נתנו הגדרה שכן רוצים ולכן אם נלחץ על זה אנחנו נעבור למוצר אם תגיות אחרות זה אומר שיכול להיות שנפח האחסון יהיה שונה לדוגמא אך הצבע יהיה בהתאם למה שבחרנו, הפונקציונליות הזאת יכולה להתאות אנשים כך זה מה שרצו 😆🤷‍♂️

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

תצוגה נוספת

בשלב מסוים ביקשו תצוגה של רשימה כך שהתגיות לא פרוסות מההתחלה בדף אלה נפתחת רשימה ובוחרים משם את התגיות, זה משמש במיוחד כאשר יש הרבה תגיות ופריסה שלהם מגדילה מאוד את הדף:

השוואת מחירים

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

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

מוצרים מייצגים

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

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

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

המוצר הזה מופיע בצורה קצת שונה באתר, לבלוק שלו יש הצללה פנימית ובתוך הדף ניתן רק לעבור בין האפשרויות כי הוא לא מוצר שניתן לרכוש:

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

לסיכום

המשימה הזאת הייתה משימה נחמדה במיוחד לאור העובדה שהיא משפיע באופן ישיר בעמוד מוצר.

הייתי צריך לחשוב על הלוגיקה מאחורי הקלעים על מנת ליצר אותה ולאפשר את מצבי התצוגה והאינטראקציה השונים.

זה בסיס לכל אתר היום שרוצה לתת חווית משתמש טובה לקונים שלו.