משחקים עם עמוד ״החשבון שלי״ בווקומרס

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

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

כך נראה עמוד החשבון שלי (כברירת מחדל) בתבנית החינמית StoreFront של ווקומרס:

כיצד להסיר פריטים מתפריט ״החשבון שלי״

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

הנה הקוד שמאפשר לעשות זאת:

function sv_remove_my_account_links( $menu_links ){

	unset( $menu_links['edit-address'] ); // כתובות


	//unset( $menu_links['dashboard'] ); // לוח בקרה
	//unset( $menu_links['payment-methods'] ); // אפשרויות תשלום
	//unset( $menu_links['orders'] ); // הזמנות
	//unset( $menu_links['downloads'] ); // הורדות
	//unset( $menu_links['edit-account'] ); // פרטי חשבון
	//unset( $menu_links['customer-logout'] ); // התנתקות

	return $menu_links;

}

add_filter ( 'woocommerce_account_menu_items', 'sv_remove_my_account_links' );

הסרת נקודות הקצה (Endpoints) עבור אותם פריטים

האפשרות נעלמה מהתפריט, אך אם תגשו ישירות לכתובת של אותה ״נקודת קצה״, כלומר /my-account/edit-address/, עדיין יופיע לכם אותו עמוד כתובות.

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

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

הוספת קישור עם כתובות משלכם

יש באפשרותכם להוסיף קישור עם כתובת URL משלכם לתפריט החשבון שלי:

function sv_one_more_link( $menu_links ){

	// we will hook "anyUniqueText" later
	$new = array( 'anyUniqueText' => 'מתנה!' );

	// array_slice() is good when you want to add an element between the other ones
	$menu_links = array_slice( $menu_links, 0, 1, true )
	              + $new
	              + array_slice( $menu_links, 1, NULL, true );


	return $menu_links;

}
add_filter ( 'woocommerce_account_menu_items', 'sv_one_more_link' );




function sv_hook_endpoint( $url, $endpoint, $value, $permalink ){

	if( $endpoint === 'anyUniqueText' ) {

		// ok, here is the place for your custom URL, it could be external
		$url = site_url();

	}
	return $url;

}
add_filter( 'woocommerce_get_endpoint_url', 'sv_hook_endpoint', 10, 4 );

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

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

מה עם האייקון?

אם אתם מעוניינים להוסיף אייקון לאותו אלמנט בתפריט תוכלו לעשות זאת באמצעות CSS. התבנית StoreFront של ווקומרס (עליה אני מדגים) – עובדת עם ספריית האייקונים של FontAwesome כך שעליכם לבחור אייקון כלשהו מאותה ספרייה ולהוסיף את קוד ה unicode בשורה מספר 3 ב CSS הבא:

body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link--anyUniqueText a:before{
	content: "\f1fd"
}

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

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

function sv_surprise_link( $menu_links ){

	$menu_links = array_slice( $menu_links, 0, 5, true )
	              + array( 'surprise' => 'הפתעה!' )
	              + array_slice( $menu_links, 5, NULL, true );

	return $menu_links;

}
add_filter ( 'woocommerce_account_menu_items', 'sv_surprise_link', 40 );



function sv_add_endpoint() {

	add_rewrite_endpoint( 'surprise', EP_PAGES );

}
add_action( 'init', 'sv_add_endpoint' );




function sv_my_account_endpoint_content() {

	// of course you can print dynamic content here, one of the most useful functions here is get_current_user_id()
	echo 'הפתעה !!!!';

}
add_action( 'woocommerce_account_surprise_endpoint', 'sv_my_account_endpoint_content' );

וזה האייקון שנבחר:

body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link--surprise a:before{
	content: "\f1da";
}

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

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

הוספת תוכן לפני התפריט או אחריו באמצעות הוקים

כבונוס קטן, תוכלו להשתמש בשני ההוקים הבאים בכדי להוסיף תוכן לפני ואחרי אלמנט התפריט <nav> בעמוד ״החשבון שלי״:

<?php

function sv_some_content_before() {
	echo 'טקסט לפני...';
}
add_action( 'woocommerce_before_account_navigation', 'sv_some_content_before' );


function sv_some_content_after() {
	?>
    <p>טקסט אחרי...</p>
	<?php
}
add_action( 'woocommerce_after_account_navigation', 'sv_some_content_after' );

אך זה מעט טריקי מכיוון ותאלצו לשחק קצת עם CSS בכדי לגרום לזה להראות כראוי וזאת מפני שבתבנית זו (StoreFront) לאלמנט ה <nav> התכונה float : right…

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

This article is completely based on the following article.