在Woocommerce中的订单付款页面上查询并保存帐单信息

时间:2019-03-01 18:53:52

标签: php woocommerce hook

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

在该页面(带有模板template / checkout / 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');

如何在付款时验证并保存这些字段的值(覆盖退出的帐单信息)?

1 个答案:

答案 0 :(得分:4)

这是一个多步骤解决方案,但它一直为我工作。

确保已将form-pay.php文件复制到您的子主题(yourtheme / woocommerce / checkout / form-pay.php),这样您就不会丢失所有更新工作。

在form-pay.php的顶部,在define('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的文件。 我使用以下代码将新的js文件放入我的functions.php中:

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

当客户单击“下一步”按钮时,它将数据保存到其个人资料中,您可以在订单上看到帐单信息。

希望这会有所帮助!