在 Woocommerce 的訂單支付頁面上詢問並保存賬單信息

Question

在 WooCommerce 后端，我手動為電話客戶創建訂單，然后向他們發送“客戶付款頁面”鏈接，以便他們完成付款。

在該頁面（“訂單-支付”，帶有模板模板/結帳/form-pay.php），我添加了以下代碼來顯示帳單：

<h3><?php _e( 'Billing details', 'woocommerce' ); ?></h3>
<?php do_action( 'woocommerce_before_checkout_billing_form', $order ); ?>
<div class="woocommerce-billing-fields__field-wrapper">
    <?php
    $fields = WC()->checkout->get_checkout_fields( 'billing' );
    foreach ( $fields as $key => $field ) {
        $field_name = $key;

        if ( is_callable( array( $order, 'get_' . $field_name ) ) ) {
            $field['value'] = $order->{"get_$field_name"}( 'edit' );
        } else {
            $field['value'] = $order->get_meta( '_' . $field_name );
        }   
        woocommerce_form_field( $key, $field, $field['value'] );
    }
    ?>

</div>
<?php do_action( 'woocommerce_after_checkout_billing_form', $order ); ?>

我希望客戶能夠編輯他們的帳單信息（姓名、電子郵件、電話、地址）並在付款時將其保存。 這是使用以下行在“常規”結帳頁面上完成的，但不適用於訂單支付端點。

$('body').trigger('update_checkout');

如何在付款時驗證和保存這些字段的值（覆蓋現有的帳單信息）？

Answer 1

這是一個多步驟的解決方案，但它一直對我有用。

確保您已將 form-pay.php 文件復制到您的子主題 (yourtheme/woocommerce/checkout/form-pay.php)，這樣您就不會在更新時丟失所有工作。

在 form-pay.php 的頂部，在 defined( 'ABSPATH' ) || 之后添加以下兩行代碼出口;

$tempateURL = get_stylesheet_directory_uri();
$orderID = wc_get_order_id_by_order_key($_GET["key"]);

接下來，您將在 order_review 表單中添加您的帳單字段。 我在結束表之后但在付款字段之前添加了我的。

<h3><?php _e( 'Billing details', 'woocommerce' ); ?></h3>
<?php do_action( 'woocommerce_before_checkout_billing_form', $order ); ?>
<div class="woocommerce-billing-fields__field-wrapper">
    <?php
    $fields = WC()->checkout->get_checkout_fields( 'billing' );
    foreach ( $fields as $key => $field ) {
        $field_name = $key;

        if ( is_callable( array( $order, 'get_' . $field_name ) ) ) {
            $field['value'] = $order->{"get_$field_name"}( 'edit' );
        } else {
            $field['value'] = $order->get_meta( '_' . $field_name );
        }   
        woocommerce_form_field( $key, $field, $field['value'] );
    }
    ?>

</div>

然后在關閉之后創建一個“下一步”按鈕？> 但在關閉賬單詳細信息之前，如下所示：

<div class="my-button">
    <input type="button" id="update-billing" class="button-next" value="Next">
</div>

它看起來像這樣：

<h3><?php _e( 'Billing details', 'woocommerce' ); ?></h3>
<?php do_action( 'woocommerce_before_checkout_billing_form', $order ); ?>
<div class="woocommerce-billing-fields__field-wrapper">
    <?php
    $fields = WC()->checkout->get_checkout_fields( 'billing' );
    foreach ( $fields as $key => $field ) {
        $field_name = $key;

        if ( is_callable( array( $order, 'get_' . $field_name ) ) ) {
            $field['value'] = $order->{"get_$field_name"}( 'edit' );
        } else {
            $field['value'] = $order->get_meta( '_' . $field_name );
        }   
        woocommerce_form_field( $key, $field, $field['value'] );
    }
    ?>
    <div class="my-button">
        <input type="button" id="update-billing" class="button-next" value="Next">
    </div>
</div>

我在我的子主題中創建了一個 js 文件夾並創建了一個名為 custom-jquery.js 的文件。 我使用以下代碼在我的functions.php中加入了新的js文件：

add_action( 'wp_enqueue_scripts',  'my_enqueue_assets' ); 
function my_enqueue_assets() {
    wp_enqueue_script( 'my-jquery', get_stylesheet_directory_uri() . '/js/custom-jquery.js',"", false, false ); 
} 

然后我在 js 文件夾中創建了一個名為 woo-functions 的文件夾並創建了一個名為 update-cart.php 的文件

然后我寫了以下代碼：

<?php
    require_once(rtrim($_SERVER['DOCUMENT_ROOT'], '/') . '/wp-load.php');
    print_r($_POST);
    $orderID = $_POST["orderID"];
    $firstName = $_POST["firstName"];
    $lastName = $_POST["lastName"];
    $billingCompany = $_POST["billingCompany"];
    $billingAddress_1 = $_POST["billingAddress_1"];
    $billing_city = $_POST["billing_city"];
    $billing_state = $_POST["billing_state"];
    $billing_postcode = $_POST["billing_postcode"];
    $billing_phone = $_POST["billing_phone"];
    $billing_email = $_POST["billing_email"];

    update_post_meta( $orderID, '_billing_first_name', $firstName );
    update_post_meta( $orderID, '_billing_last_name', $lastName );
    update_post_meta( $orderID, '_billing_company', $billingCompany );
    update_post_meta( $orderID, '_billing_address_1', $billingAddress_1 );
    update_post_meta( $orderID, '_billing_city', $billing_city );
    update_post_meta( $orderID, '_billing_state', $billing_state );
    update_post_meta( $orderID, '_billing_postcode', $billing_postcode );
    update_post_meta( $orderID, '_billing_phone', $billing_phone );
    update_post_meta( $orderID, '_billing_email', $billing_email );

    echo $firstName;
?>

然后，我在 custom-jquery.js 文件中編寫了以下 jquery，以在單擊我創建的“下一步”按鈕時更新信息。

jQuery(document).ready(function($) {

$("#update-billing").on("click", function(e){
    var stylesheetURL = $("#order_review").attr("data-theme-url");
    var orderID = $("#order_review").attr("data-order-id");
    var firstName = $("#billing_first_name").val();
    var lastName = $("#billing_last_name").val();
    var billingCompany = $("#billing_company").val();
    var billingAddress_1 = $("#billing_address_1").val();
    var billing_city = $("#billing_city").val();
    var billing_state = $("#billing_state").val();
    var billing_postcode = $("#billing_postcode").val();
    var billing_phone = $("#billing_phone").val();
    var billing_email = $("#billing_email").val();

    console.log(firstName);
    $.ajax({
        method: "POST",
        url: stylesheetURL +  "/js/woo-functions/update-cart.php",
        data: {
            orderID: orderID,
            firstName: firstName,
            lastName: lastName,
            billingCompany: billingCompany,
            billingCountry: "US",
            billingAddress_1: billingAddress_1,
            billing_city: billing_city,
            billing_state: billing_state,
            billing_postcode: billing_postcode,
            billing_phone: billing_phone,
            billing_email: billing_email
        }
    })
    .done(function( msg ) {
        console.log(msg);
        $(".page-id-10 table.shop_table, .page-id-10 .the-payment-fields").slideToggle();
        $(".woocommerce-billing-fields__field-wrapper").slideToggle();
    });
});

我還添加了一個 .slideToggle 函數來在單擊“下一步”按鈕時隱藏計費字段。 Woocommerce 動態地將信息添加到結帳頁面，您的正常結帳頁面將具有相同的頁碼。 如果您不讓 slideToggle 函數針對一個唯一的類，它將影響您的正常結帳頁面。 因此，我在 form-pay.php 文件中的 div id“payment”中添加了一類“.the-payment-fields”。

<div id="payment" class="the-payment-fields">

當客戶點擊“下一步”按鈕時，它會將數據保存到他們的個人資料中，您可以看到訂單的賬單信息。

希望這可以幫助！