购物车中的自定义表单字段并在 Woocommerce 结帐时获取数据

Question

在 checkout.I 之前在购物车页面中添加发件人、收件人和消息字段已在 cart.php 文件中添加了一些代码，但在添加该代码之后购物车页面显示空白。

/**
* Add the order_comments field to the cart
**/
 add_action('woocommerce_cart_collaterals', 
'order_comments_custom_cart_field');

 function order_comments_custom_cart_field() {
  echo '<div id="cart_order_notes">';
  ?>
 <div class="customer_notes_on_cart">
 <label for="customer_notes_text"><?php _e('Order notes','woocommerce'); ?> 
 </label>
 <textarea id="customer_notes_text"></textarea>
 </div>
 <?php
  }
  /**
  * Process the checkout and overwriting the normal button
  *
  */
function woocommerce_button_proceed_to_checkout() {
$checkout_url = wc_get_checkout_url();
?>
   <form id="checkout_form" method="POST" action="<?php echo $checkout_url; 
  ?>">
   <input type="hidden" name="customer_notes" id="customer_notes" value="">
   <a  href="#" onclick="document.getElementById('customer_notes').value=document.getElementById('customer_notes_text').value;document.getElementById('checkout_form').submit()" class="checkout-button button alt wc-forward">
   <?php _e( 'Proceed to checkout', 'woocommerce' ); ?></a>
   </form>
   <?php
   }
  // getting the values in checkout again
 add_action('woocommerce_checkout_before_customer_details',function(){
 ?>
 <script>
 jQuery( document ).ready(function() {
jQuery('#order_comments' ).val("<?php echo 
 sanitize_text_field($_POST['customer_notes']); ?>");
  });
 </script>
<?php 
 });

在 cart.php 中，我在关闭表单标签之前以及表单之后在底部添加了这段代码 tag.But 在 [= 中添加这段代码后，我得到了一个空白页面21=].

我试图以相同的格式从、到和消息字段中获取它们。

Answer 1

以下代码将 post 从购物车页面中的自定义文本区域字段中估算的文本值到结帐订单备注字段：

// Add the order_comments field to the cart
add_action( 'woocommerce_cart_collaterals', 'order_comments_custom_cart_field' );
function order_comments_custom_cart_field() {
    ?>
    <div class="customer_notes_on_cart" style="clear:both;">
    <label for="customer_notes_text"><?php _e("Order notes", "woocommerce") ?></label>
    <textarea id="customer_notes_text"></textarea></div>
    <?php
}

// Process the checkout and overwriting the normal button
 add_action( 'woocommerce_proceed_to_checkout', 'change_proceed_to_checkout', 15 );
function change_proceed_to_checkout() {
    remove_action( 'woocommerce_proceed_to_checkout', 'woocommerce_button_proceed_to_checkout', 20 );

    ?>
    <form id="checkout_form" method="POST" action="<?php echo wc_get_checkout_url(); ?>">
        <input type="hidden" name="customer_notes" id="customer_notes" value="">
        <button type="submit" class="checkout-button button alt wc-forward" style="width:100%;"><?php
        esc_html_e( 'Proceed to checkout', 'woocommerce' ) ?></button>
    </form>
    <?php
}

// Jquery script for cart and checkout pages
add_action('wp_footer', 'customer_notes_jquery' );
function customer_notes_jquery() {
    ?>
    <script>
    jQuery(function($) {
        <?php // For cart
            if( is_cart() ) : ?>
            $('#customer_notes_text').on( 'blur', function(){
                $('#customer_notes').val($(this).val());
            });
        <?php // For checkout
            elseif( is_checkout() && ! is_wc_endpoint_url() ) : ?>
            $('#order_comments' ).val("<?php echo sanitize_text_field($_POST['customer_notes']); ?>");
        <?php endif; ?>
    });
    </script>
    <?php
}

代码进入您的活动子主题（或活动主题）的 function.php 文件。测试和工作。

Answer 2

我认为最好不要更改 "proceed to checkout" 表单，当字段中的数据更改时最好将 vars 存储在本地存储中，并在用户处于结帐表单时获取它。

function order_comments_custom_cart_field() {
      echo '<div id="cart_order_notes">';
      ?>
     <div class="customer_notes_on_cart">
     <label for="customer_notes_text"><?php _e('Order notes','woocommerce'); ?> 
     </label>
     <textarea id="customer_notes_text"></textarea>
     </div>
    <script>
       jQuery(document).ready(function (jQuery) { 
         jQuery("#customer_notes_text").on('change', function () {
           localStorage.setItem(jQuery(this).attr('id'), this.val());
         });
       });
    </script>
 <?php
  }

然后你可以用

得到它

LocalStore.getItem(项目);

获取元素后不要忘记销毁，

LocalStorage.removeItem(项目);

购物车中的自定义表单字段并在 Woocommerce 结帐时获取数据

Custom form fields in cart and get the data in checkout on Woocommerce

php

wordpress

jquery

cart

woocommerce