php - 在 Woocommerce 的订单支付页面上询问并保存账单信息

Question

在 WooCommerce 后端，我为电话客户手动创建订单，然后向他们发送“客户付款页面”链接，以便他们完成付款。

在那个页面(“order-pay”，模板 templates/checkout/form-pay.php)，我添加了以下代码来显示billing form:

<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">

当客户点击“下一步”按钮时，它会将数据保存到他们的个人资料中，您可以在订单上看到账单信息。

希望这对您有所帮助!