验证在单个产品页面中添加到“添加到购物车”上方的自定义字段

Question

我在 WooCommerce 的单个产品页面中的“添加到购物车”按钮上方添加了表单，我想验证该表单，就像没有填写表单的用户应该无法单击 Add To Cart 按钮一样。

我的代码添加在 functions.php:

function add_name_on_tshirt_field() {
    echo '<div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-disabled"><table class="variations" cellspacing="0" width="100px">

        <tbody><tr>
          <td class="label" style="width:100px"><label for="color">Agent Name</label></td>
          <td class="value">
              <input type="text" name="name-on-tshirt" value="" required/>                      
          </td>
          </tr>
          <tr>
          <td class="label"><label for="color">Title</label></td>
          <td class="value">
              <input type="text" name="name-on-tshirt" value="" required/>                      
          </td>
          </tr>
          <tr>
          <td class="label"><label for="color">Phone No</label></td>
          <td class="value">
              <input type="text" name="name-on-tshirt" value="" required/>                      
          </td>
      </tr>
      </tbody>
      </table>
      </br>
 ';
}
add_action( 'woocommerce_before_add_to_cart_form', 'add_name_on_tshirt_field' );

使用上面的代码，已经添加了表单，但是如何在单击“添加到购物车”按钮之前验证表单。

非常感谢任何帮助。

Answer 1

您的字段需要在“添加到购物车”表单中，因此使用 woocommerce_before_add_to_cart_button 操作挂钩而不是 woocommerce_before_add_to_cart_form…

您的代码中存在错误，因为所有字段都具有相同的属性“名称”值。

将其替换为：

add_action( 'woocommerce_before_add_to_cart_button', 'add_name_on_tshirt_field' );
function add_name_on_tshirt_field() {
    echo '<div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-disabled">
        <table class="variations" cellspacing="0" width="100px">
            <tbody><tr>
                <td class="label" style="width:100px"><label for="color">' . __("Agent Name", "woocommerce") . '</label></td>
                <td class="value">
                    <input type="text" name="tshirt_name" value="" required/>
                </td>
            </tr>
            <tr>
                <td class="label"><label for="color">' . __("Title", "woocommerce") . '</label></td>
                <td class="value">
                    <input type="text" name="tshirt_title" value="" required/>
                </td>
            </tr>
            <tr>
                <td class="label"><label for="color">' . __("Phone No", "woocommerce") . '</label></td>
                <td class="value">
                    <input type="text" name="tshirt_phone" value="" required/>
                </td>
            </tr>
        </tbody>
    </table>
    </br>';
}

然后你就可以使用woocommerce_add_to_cart_validation钩子进行字段验证

// Field validation
add_action( 'woocommerce_add_to_cart_validation', 'validate_name_on_tshirt_field' );
function validate_name_on_tshirt_field( $passed ) {
    $error_notice = array(); // Initializing
    
    if ( isset($_POST['tshirt_name']) && empty($_POST['tshirt_name']) ) {
        $passed = false;
        $error_notice[] = __('"Agent Name" is a required field', 'woocommerce');
    }
    
    if ( isset($_POST['tshirt_title']) && empty($_POST['tshirt_title']) ) {
        $passed = false;
        $error_notice[] = __('"Title" is a required field', 'woocommerce');
    }
    
    if ( isset($_POST['tshirt_phone']) && empty($_POST['tshirt_phone']) ) {
        $passed = false;
        $error_notice[] = __('"Phone No" is a required field', 'woocommerce');
    }
    
    // Display errors notices
    if ( ! empty($error_notice) ) {
        wc_add_notice( implode('<br>', $error_notice), 'error' );
    }
    
    return $passed;
}

现在您需要将字段数据保存为自定义购物车项目数据并将它们显示在购物车和结帐页面中：

// Save as custom cart item data
add_filter( 'woocommerce_add_cart_item_data', 'add_cart_item_custom_data', 10, 2 );
function add_cart_item_custom_data( $cart_item_data, $product_id ) {
    if ( isset($_POST['tshirt_name']) && ! empty($_POST['tshirt_name']) ) {
        $cart_item_data['tshirt_name'] = sanitize_text_field($_POST['tshirt_name']);
    }
    
    if ( isset($_POST['tshirt_title']) && ! empty($_POST['tshirt_title']) ) {
        $cart_item_data['tshirt_title'] = sanitize_text_field($_POST['tshirt_title']);
    }
    
    if ( isset($_POST['tshirt_phone']) && ! empty($_POST['tshirt_phone']) ) {
        $cart_item_data['tshirt_phone'] = sanitize_text_field($_POST['tshirt_phone']);
    }
    
    return $cart_item_data;
}

// Display in cart and checkout
add_filter( 'woocommerce_get_item_data', 'display_on_cart_and_checkout', 10, 2 );
function display_on_cart_and_checkout( $cart_data, $cart_item ) {
    if ( isset($cart_item['tshirt_name']) ) {
        $cart_data[] = array( "name" => __("Agent name", "woocommerce"),  "value" => $cart_item['tshirt_name'] );
    }

    if ( isset($cart_item['tshirt_title']) ) {
        $cart_data[] = array( "name" => __("Title", "woocommerce"),  "value" => $cart_item['tshirt_title'] );
    }

    if ( isset($cart_item['tshirt_phone']) ) {
        $cart_data[] = array( "name" => __("Phone No", "woocommerce"),  "value" => $cart_item['tshirt_phone'] );
    }
    
    return $cart_data;
}

要完成，您需要将字段数据保存为自定义订单项目数据并在订单和电子邮件中显示它们：

// Display on orders and email notifications (save as custom order item meta data)
add_action( 'woocommerce_checkout_create_order_line_item', 'display_on_orders_and_emails', 10, 4 );
function display_on_orders_and_emails( $item, $cart_item_key, $values, $order ) {
    if ( isset($values['tshirt_name']) ) {
        $item->add_meta_data( __("Agent name", "woocommerce"), $values['tshirt_name'] );
    }

    if ( isset($values['tshirt_title']) ) {
        $item->add_meta_data( __("Title", "woocommerce"), $values['tshirt_title'] );
    }

    if ( isset($values['tshirt_phone']) ) {
        $item->add_meta_data( __("Phone No", "woocommerce"), $values['tshirt_phone'] );
    }
}

代码进入活动子主题（或活动主题）的 functions.php 文件。已测试并有效。

验证在单个产品页面中添加到“添加到购物车”上方的自定义字段

Validate custom fields added above the “Add To Cart” in Single Product pages

php

wordpress

validation

woocommerce

custom-fields