בנייה ופיתוח של אתר מכירות פומביות בוורדפרס ואלמנטור

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

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

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

חלק 1 – הקמת תשתית עם אלמנטור ו-Jet Engine

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

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

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

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

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

חלק 2 – יצירת Shortcode לחישוב תאריך סיום על פי Metafields

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

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

השורטקוד נראה ככה:

function shifft_get_end_date_by_duration( $atts = [] ) {
	
	$atts = shortcode_atts( [
		'from_date' => '',
		'duration' => '',
	], $atts );
	
	$from_date = get_post_meta( get_the_ID(), $atts['from_date'], true );
	$duration = get_post_meta( get_the_ID(), $atts['duration'], true );
	
	if ( ! $from_date ) {
		return __( 'No from date provided.', 'shifft' );
	}
	
	if ( ! $duration ) {
		return __( 'No duration provided.', 'shifft' );
	}
	
	$end_date = strtotime( "+$duration days", strtotime( $from_date ) );
	
	return date( 'Y-m-d', $end_date );
	
}

add_shortcode( 'get_end_date_by_duration', 'shifft_get_end_date_by_duration' );

והשימוש בו נעשה בצורה הבאה:

[get_end_date_by_duration from_date="start-date" duration="duration"]

במשתנה של form_date הכנסתי את שם השדה שבו נמצא תאריך ההתחלה

במשתנה של duration הכנסתי את השדה שבו נמצא הערך לכמות הימים שתמשך המכירה

ניתן כמובן להשתמש בו בכל ווידג׳ט של אלמנטור בתור Dynamic Tags ולעטוף אותו בתוכן לפני ואחרי.

חלק 3 – יצירת מנגנון להגשת הצעות

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

ממשיכים ליצירת המנגנון דרכו המשתמשים יוכלו להגיש הצעות מחיר.

בחרתי ליצור את המנגנון הזה בעזרת טופס של Jet Engine Forms והקמת יישות חדשה לאחסון הצעות המחיר על בסיס CCT.

הסיבות שהחלטתי ללכת על CCT הן:

1. טבלה נפרדת בבסיס הנתונים – באתר מהסוג הזה אנחנו צופים הצעות רבות ואנחנו לא רוצים להכביד על טבלת הפוסטים שגם ככה עמוסה מאוד בוורדפרס.
2. ל-CCT אין עמודי פוסטים ואין ארכיון שזה בדיוק מה שאנחנו לא צריכים שיתאנדקס לנו בגוגל עבור כל הצעת מחיר.
3. שליפת הצעות המחיר מטבלה נפרדת מהירה יותר ויעילה יותר

על ההבדל בין CPT לבין CCT (Custom Content Type) אני אפרט בהמשך אבל בנתיים אלו ההבדלים העיקריים בינהם.

לאחר שיצרתי את הבסיס לשמירת הצעות המחיר, יצרתי טופס עם Jet Engine שמאפשר לנו ליצור פוסט חדש או Content Type חדש לאחר שליחתו.

הוספתי אותו בתבנית הפוסט ו… יש לנו מנגנון הצעת מחיר מוכן.

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

חלק 4 – איך להציג את הצעת המחיר הגבוהה ביותר

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

יש כמה דרכים לבצע את זה. האפשרות הראשונה שחשבתי עליה הייתה בעזרת Dynamic Function שזה פיצ׳ר קצת מתקדם ב-Jet Engine שמשום מה אני לא רואה הרבה שימושים בו.

הבעיה היא שגיליתי שאין אפשרות להשתמש ב-Dynamic Function על גבי CCT, באסה. 👎

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

חלק 5 – איך להציג את חמשת הצעות המחיר הגבוהות ביותר

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

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

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

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

סיכום לבנתיים

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