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

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

שלב ראשון – קבלת וריאציות המוצר

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

/**
 * Display visual variations using variation images.
 *
 * @return bool
 */
function display_visual_variations() {

	global $product;

	$variations = $product->get_available_variations();

	if ( ! $variations ) {
		return false;
	}

	echo "<ul class='visual-variations'>";

	foreach ( $variations as $idx => $variation ) {

		echo "<li class='variation-id-{$variation['variation_id']}'>";
		echo "  <button type='button' data-var-idx='{$idx}'>";
		echo "      <img src='{$variation['image']['url']}' alt='{$variation['image']['alt']}'>";
		echo "	</button>";
		echo "</li>";

	}

	echo "</ul>";

	return true;

}

add_action( 'woocommerce_before_variations_form', 'display_visual_variations' );

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

שלב שני – עיצוב ממשק המשתמש

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

.single-product table.variations {
	display: none;
}

.single-product form.variations_form ul.visual-variations {
	display: flex;
	list-style-type: none;
	margin: 10px 0;
}

.single-product form.variations_form ul.visual-variations li {
	width: 56px;
	margin: 5px;
}

.single-product:not(.rtl) form.variations_form ul.visual-variations li:first-child {
	margin-left: 0;
}

.single-product.rtl form.variations_form ul.visual-variations li:first-child {
	margin-right: 0;
}

.single-product form.variations_form ul.visual-variations li button {
	padding: 5px;
	margin: 0;
	border: 1px solid #f2f2f2;
	background-color: transparent;
	cursor: pointer;
	transition: border-color .3s ease;
}

.single-product form.variations_form ul.visual-variations li button:hover,
.single-product form.variations_form ul.visual-variations li button:focus,
.single-product form.variations_form ul.visual-variations li button.active {
	border-color: #cccccc;
}

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

שלב שלישי – טיפול בלחיצה על תמונה

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

( function ( $ ) {

	$( '[data-var-idx]' ).on( 'click', function ( e ) {
		e.preventDefault();

		var _this = $( this );
		var _select = $( 'table.variations select:first' );
		var _idx = parseInt( _this.attr( 'data-var-idx' ) ) + 1;

		if( _this.hasClass( 'active' ) ) {

			_this.removeClass( 'active' ).blur();
			_idx = 0;

		} else {

			_this.parents( '.visual-variations' ).find( 'li button' ).removeClass( 'active' );
			_this.addClass( 'active' );

		}

		_select.find( 'option' ).eq( _idx ).attr( 'selected', true );
		_select.trigger( 'change' );

	} );

} )( jQuery );

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

צילום מסך של תצוגת ויזואלית של וריאציות מוצר בעמוד מוצר

סיכום

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

    כתיבת תגובה

    1. אלדד

      תודה רבה 🙂

      הגב
      1. דור צוברי

        היי אלדד,
        בבקשה 🙂

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

    2. יניב כהן

      מאמר מעולה , תודה רבה על שיתוף הידע
      האם יש אפשרות להציג שת שם הוריאציה בעגלה ?
      ע״י הוספת קוד ל functions.php
      לדוגמא :
      מוצר > נעל נייקי
      שם הוריאציה | וריאציה
      דגם : | אייר
      צבע : | אדום
      מידה: | 42

      הגב
      1. דור צוברי

        היי יניב 👋,
        האם הדגם, צבע ומידע מוגדרים כ-Attributes?

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

    שתפו