הוספת שדות חדשים (Custom Fields) למוצרי ווקומרס

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

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

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

הוספת שדות חדשים למוצרי ווקומרס

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

ההוקים הנכונים

השלב הראשון הינו להצמיד פעולה (action) ל woocommerce_product_options_general_product_data. הפונקציה שנצמיד תהיה אחראית להצגה של השדות החדשים שניצור. הוק נוסף (also an action) בו נשתמש הוא woocommerce_process_product_meta ותפקידו יהיה לשמור את הערכים שהכנסנו.

באופן בסיסי שתי הפעולות יתבצעו על ידי הוספת קוד זה לקובץ functions.php של התבנית (או תבנית הבת שלכם):

// Display Fields
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );

// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );

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

הוספת שדות חדשים למוצר ווקומרס

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

function woo_add_custom_general_fields() {

  global $woocommerce, $post;
  
  echo '<div class="options_group">';
  
  // Custom fields will be created here...
  
  echo '</div>';
	
}

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

הוספת שדה טקסט – Text Field Type

בכדי ליצור שדה טקסט נשתמש בקוד הבא:

// Text Field
woocommerce_wp_text_input( 
	array( 
		'id'          => '_text_field', 
		'label'       => __( 'My Text Field', 'woocommerce' ), 
		'placeholder' => 'http://',
		'desc_tip'    => 'true',
		'description' => __( 'Enter the custom value here.', 'woocommerce' ) 
	)
);

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

הוספת שדה מספרי – Number Field Type

בכדי ליצור שדה מספרי נשתמש בקוד הבא:

// Number Field
woocommerce_wp_text_input( 
	array( 
		'id'                => '_number_field', 
		'label'             => __( 'My Number Field', 'woocommerce' ), 
		'placeholder'       => '', 
		'description'       => __( 'Enter the custom value here.', 'woocommerce' ),
		'type'              => 'number', 
		'custom_attributes' => array(
				'step' 	=> 'any',
				'min'	=> '0'
			) 
	)
);

השינוי העיקרי במקרה זה לעומת הקוד הקודם הוא שקבענו כי התכונה type תהיה number. באפשרותכם אף לקבוע תכונות נוספות כמו הצעדים בהם המספר יקפוץ (step) ואף ערך מינימלי ומקסימלי.

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

שדה איזור טקסט – Textarea Field Type

בכדי ליצור איזור טקסט נשתמש בקוד הבא:

// Textarea
woocommerce_wp_textarea_input( 
	array( 
		'id'          => '_textarea', 
		'label'       => __( 'My Textarea', 'woocommerce' ), 
		'placeholder' => '', 
		'description' => __( 'Enter the custom value here.', 'woocommerce' ) 
	)
);

שום נקודה מיוחדת לגבי שדה מסוג זה…

שדה  בחירה מסוג DropDown

בכדי ליצור שדה בחירה מסוג DropDown נשתמש בקוד הבא:

// Select
woocommerce_wp_select( 
array( 
	'id'      => '_select', 
	'label'   => __( 'My Select Field', 'woocommerce' ), 
	'options' => array(
		'one'   => __( 'Option 1', 'woocommerce' ),
		'two'   => __( 'Option 2', 'woocommerce' ),
		'three' => __( 'Option 3', 'woocommerce' )
		)
	)
);

התכונה options קובעת את האפשרויות שיוצגו בשדה ה DropDown.

שדה Checkbox

בכדי ליצור checkbox השתמשו בקוד הבא:

// Checkbox
woocommerce_wp_checkbox( 
array( 
	'id'            => '_checkbox', 
	'wrapper_class' => 'show_if_simple', 
	'label'         => __('My Checkbox Field', 'woocommerce' ), 
	'description'   => __( 'Check me!', 'woocommerce' ) 
	)
);

שדה נסתר – Hidden Field

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

// Hidden field
woocommerce_wp_hidden_input(
array( 
	'id'    => '_hidden_field', 
	'value' => 'hidden_value'
	)
);

שדה מותאם אישית – Custom Field Type

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

// Custom field Type
?>
<p class="form-field custom_field_type">
	<label for="custom_field_type"><?php echo __( 'Custom Field Type', 'woocommerce' ); ?></label>
	<span class="wrap">
		<?php $custom_field_type = get_post_meta( $post->ID, '_custom_field_type', true ); ?>	
		<input placeholder="<?php _e( 'Field One', 'woocommerce' ); ?>" class="" type="number" name="_field_one" value="<?php echo $custom_field_type[0]; ?>" step="any" min="0" style="width: 80px;" />
		<input placeholder="<?php _e( 'Field Two', 'woocommerce' ); ?>" type="number" name="_field_two" value="<?php echo $custom_field_type[1]; ?>" step="any" min="0" style="width: 80px;" />
	</span>
	<span class="description"><?php _e( 'Place your own description here!', 'woocommerce' ); ?></span>
</p>
<?php

שדות מותאמים יכולים להיות כמעט כל דבר, אך שימו לב שאתם משתמשים בקלאס form-field על מנת שיוצגו כראוי.

שמירת הערכים של השדות למסד הנתונים של ווקומרס

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

כפי שהראינו בתחילה, אנו נשתמש בפונקציה woo_add_custom_general_fields_save אשר מוצמדת לפונקציה woocommerce_process_product_meta.

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

הנה הקוד המאפשר לשמור כל אחד מסוגי השדות שיצרנו:

function woo_add_custom_general_fields_save( $post_id ){
	
	// Text Field
	$woocommerce_text_field = $_POST['_text_field'];
	if( !empty( $woocommerce_text_field ) )
		update_post_meta( $post_id, '_text_field', esc_attr( $woocommerce_text_field ) );
		
	// Number Field
	$woocommerce_number_field = $_POST['_number_field'];
	if( !empty( $woocommerce_number_field ) )
		update_post_meta( $post_id, '_number_field', esc_attr( $woocommerce_number_field ) );
		
	// Textarea
	$woocommerce_textarea = $_POST['_textarea'];
	if( !empty( $woocommerce_textarea ) )
		update_post_meta( $post_id, '_textarea', esc_html( $woocommerce_textarea ) );
		
	// Select
	$woocommerce_select = $_POST['_select'];
	if( !empty( $woocommerce_select ) )
		update_post_meta( $post_id, '_select', esc_attr( $woocommerce_select ) );
		
	// Checkbox
	$woocommerce_checkbox = isset( $_POST['_checkbox'] ) ? 'yes' : 'no';
	update_post_meta( $post_id, '_checkbox', $woocommerce_checkbox );
	
	// Custom Field
	$custom_field_type =  array( esc_attr( $_POST['_field_one'] ), esc_attr( $_POST['_field_two'] ) );
	update_post_meta( $post_id, '_custom_field_type', $custom_field_type );
	
	// Hidden Field
	$woocommerce_hidden_field = $_POST['_hidden_field'];
	if( !empty( $woocommerce_hidden_field ) )
		update_post_meta( $post_id, '_hidden_field', esc_attr( $woocommerce_hidden_field ) );
	
}

הנה תמונה של תוצאה לאחר שמירת השדות:

שמירת שדות חדשים למוצרי ווקומרס

שליפת הערכים של השדות בתבנית שלכם

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

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

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

<?php
// Display Custom Field Value
echo get_post_meta( $post->ID, 'my-field-slug', true );
// You can also use
echo get_post_meta( get_the_ID(), 'my-field-slug', true );
?>

יצירת לשוניות משלכם בעמוד עריכת המוצר

לא נרחיב יותר מדי אך הנה סניפט במאפשר להוסיף לשונית חדשה בעמוד עריכת המותר של ווקומרס:

<?php
/***** BEGIN HERE *****/
function woo_add_custom_admin_product_tab() {
	?>
	<li class="custom_tab"><a href="#custom_tab_data"><?php _e('My Custom Tab', 'woocommerce'); ?></a></li>
	<?php
}
add_action( 'woocommerce_product_write_panel_tabs', 'woo_add_custom_admin_product_tab' );

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

שימו לב – אם אתם מעוניינים להוסיף שדות משלכם ל product variations (וריאציות מוצרים) מדריך זה אינו רלוונטי. אשתדל לכתוב מדריך נוסף המתאר כיצד לעשות זאת.

לדוגמה אתם יכולים להשתמש בהוק woocommerce_product_options_shipping בכדי להוסיף את השדות שלכם ללשונית shipping. תוכלו למצוא את כל ההוקים האפשריים תחת http://woocommerce/admin/post-types/writepanels/writepanel-product_data.php.

רועי יוסף
רועי יוסף

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

0תגובות...

השאירו תגובה

פעימות