הוספת כפתורי כמות בעמוד מוצר בווקומרס

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

מדוע להוסיף כפתורי כמות?

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

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

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

הוספת כפתורי פלוס ומינוס לעמוד מוצר

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

שלב ראשון – הצגת כפתורים בעמוד מוצר

בתור התחלה עלינו להוסיף לעמוד מוצר את כפתורי הכמות מסביב לשדה בעמוד מוצר.
לכן נערוך את קובץ functions.php של תבנית הבת שלנו באתר ונדביק את הקוד הבא.

/**
 * Print plus button before quantity field.
 */
function dorzki_woocomerce_add_quantity_plus_button() {

	echo '<button type="button" class="qty-btn increase-qty">' .
			 '	<span class="screen-reader-text">' . esc_html__( 'Increase Quantity', 'dorzki' ) . '</span>' .
			 '	<span class="symbol">+</span>' .
			 '</button>';

}

add_action( 'woocommerce_before_add_to_cart_quantity', 'dorzki_woocomerce_add_quantity_plus_button' );


/**
 * Print minus button after quantity field.
 */
function dorzki_woocomerce_add_quantity_minus_button() {

	echo '<button type="button" class="qty-btn decrease-qty">' .
			 '	<span class="screen-reader-text">' . esc_html__( 'Decrease Quantity', 'dorzki' ) . '</span>' .
			 '	<span class="symbol">-</span>' .
			 '</button>';

}

add_action( 'woocommerce_after_add_to_cart_quantity', 'dorzki_woocomerce_add_quantity_minus_button' );

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

שלב שני – הוספת פונקציונליות לכפתורי כמות

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

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

(function( $ ) {

	$( 'form.cart .qty-btn' ).on( 'click', function( e ) {
		e.preventDefault();

		var _qty  = $( this ).parents( 'form.cart' ).find( '.qty' );

		var _val  = parseFloat( _qty.val() );
		var _step = parseFloat( _qty.attr( 'step' ) );
		var _min  = parseFloat( _qty.attr( 'min' ) );
		var _max  = parseFloat( _qty.attr( 'max' ) );

		var _newVal = 0;

		if( $( this ).hasClass( 'increase-qty' ) ) {

			_newVal = ( _val + _step <= _max || ! _max ) ? _val + _step : _max;

		} else {

			_newVal = ( _val - _step >= _min || ! _min ) ? _val - _step : _min;

		}

		_qty.val( _newVal );

	} );

} )( jQuery );

שלב שלישי – עיצוב כפתורי כמות

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

נפתח את קובץ העיצוב של תבנית הבת style.css ונכניס את הקוד הבא.

.single-product .product-type-simple form.cart,
.single-product .woocommerce-variation-add-to-cart {
	display: flex;
}

.single-product form.cart .quantity {
	margin: 0;
	float: none;
}

.single-product form.cart .quantity input {
	border-width: 1px 0;
}

.single-product form.cart .increase-qty {
	border-radius: 4px 0 0 4px;
}

.single-product form.cart .decrease-qty {
	border-radius: 0 4px 4px 0;
	margin-right: 10px;
}

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

שלב רביעי – הסתרת חיצי שדה כמות (אופציונלי)

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

נפתח שוב את קובץ ה-CSS של תבנית הבת שלנו style.css ונדביק את הקוד הבא.

.single-product form.cart .quantity input::-webkit-inner-spin-button,
.single-product form.cart .quantity input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

מימושים נוספים של כפתורי כמות

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

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

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

סיכום

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