מדריכי ווקומרס

דצמ 23 נכתב ע"י 

הוספת שדות מותאמים אישית לצ'קאווט / קופה

דרג פריט זה
(4 הצבעות)

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

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

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

להלן השלבים ליצירת שדות מותאמים אשית

שימו לב! כל קטעי הקוד יש להכניס לקובץ functions.php שבתיקיית התבנית "ילד" שלנו

שלב 1 - הוספת השדות לתבנית

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

add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );

function my_custom_checkout_field( $checkout ) {

    echo '<div id="my_custom_checkout_field"><h2>' . __('My title') . '</h2>';
    echo '<P>' . __('Short description of the fields') . '</P>';
    
         woocommerce_form_field( 'my_field_1', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('Full name in English, as spelled in your passport'),
        'placeholder'   => __('Full name in English'),
        ), $checkout->get_value( 'my_field_1' ));
        
        woocommerce_form_field( 'my_field_2', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-first'),
        'label'         => __('type number'),
        'placeholder'   => __('Enter type number'),
        ), $checkout->get_value( 'my_field_2' ));

   echo '</div>';

}

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

  • היכן שכתוב "My title" החליפו בכותרת של כל אזור השדות לדוגמה "פרטי בעל החיים". ניתן לוותר על הכותרת ע"י מחיקת כל השורת הקוד שלה.
  • היכן שכתוב "Short description of the fields" החליפו בטקסט קצר שתרצו לדוגמה "הפרטים ישמרו אצלנו ולא יעברו לשום גורם שלישי". לוותר על הטקסט ע"י מחיקת כל השורת הקוד שלו.
  • היכן שכתוב "my-field-class form-row-wide" החליפו במידה ותרצו להוסיף class לצורכי עיצוב השדה. אין זה חובה.
  • היכן שכתוב "Full name in English, as spelled in your passport" החליפו לצורך מתן שם לשדה לדוגמה "שם בעל החיים".
  • היכן שכתוב "Full name in English" החליפו כדי לתאר ללקוח מה צריך להכניס לשדה לדוגמה "רשמו את הכינוי של הכלב שלכם".

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

שלב 2 - הפיכת השדות לשדות חובה עם מתן הודעה ללקוח במידה ונשארו ריקים

הכניסו את הקוד הבא מיד לאחר הקוד הקודם

add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

function my_custom_checkout_field_process() {
    if ( ! $_POST['my_field_1'] )
        wc_add_notice( __( 'Please enter Full name' ), 'error' );
    if ( ! $_POST['my_field_2'] )
        wc_add_notice( __( 'Please enter Passport number' ), 'error' );  
}

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

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

שלב 3 - הוספת הנתונים לבסיס הנתונים

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

add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' );

function my_custom_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['my_field_1'] ) ) {
        update_post_meta( $order_id, 'Field name', sanitize_text_field( $_POST['my_field_1'] ) );
    }
    if ( ! empty( $_POST['my_field_2'] ) ) {
        update_post_meta( $order_id, 'Field type', sanitize_text_field( $_POST['my_field_2'] ) );
}

שלב 4 - הצגת הנתונים של השדות בהזמנה של הלקוח

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

add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );

function my_custom_checkout_field_display_admin_order_meta($order){
    echo '<h4><strong>' . __('My title') . '</strong></h4>';
    echo '<p><strong>'.__('Full name in English').':</strong> ' . get_post_meta( $order->id, 'Field name', true ) . '</p>';
    echo '<p><strong>'.__('type number').':</strong> ' . get_post_meta( $order->id, 'Field type', true ) . '</p>';
}

השדות המודגשים בתכלת חייבים להיות זהים לשדות הצהובים שהגדרנו בשלב 3

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

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

שלב 5 - הצגת הנתונים למייל הנשלח בסיום ההזמנה

בסיום ההזמנה נשלח מייל ללקוח ולמנהל החנות במידה ונרצה שהשדות שהזין הלקוח ישלחו גם הם למייל שלנו בלבד ולא של הלקוח יש להוסיף את הקוד הבא מיד לאחר הקוד שבשלב 4

add_action( 'woocommerce_email_order_meta_keys', 'my_custom_order_meta_keys', 10, 2 );
function my_custom_order_meta_keys( $keys, $is_admin ) {

	// Only for admin emails
	if ( ! $is_admin ) {
		return;
	}

	echo '<h2 style="color:#557da1;">' . __('My title') . '</h2>';
     $keys[] = 'Field name';
     $keys[] = 'Field type';
     return $keys;

}

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

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

אפשרות נוספת:

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

 

לסיום 2 בקשות

  1. אם המדריך עזר לכם אנא דרגו אותו בבקשה 5 כוכבים (הדרוג בראש הדף)
  2. שתפו את המדריך כדי לעזור גם לאחרים
7169 עודכן לאחרונה ב חמישי, 24 דצמבר 2015
מר קפה // יחי

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