Woocommerce - 使用 ajax 表格显示通知

Question

我正在编辑 woocommerce form-edit-account.php 模板。 该模板包含一个允许用户更改设置（姓名、姓氏等）的表单。 原来表单不执行 ajax 请求，所以为了保存设置而不刷新页面我添加了 ajax 请求。 一切正常，除了处理错误。 当字段留空或在其条件中不受尊重时，不会出现 woocommerce 错误消息。

我在这里找到了一个类似的帖子，但无法根据我的表格弄清楚如何适应它。： 通过产品页面上的 Ajax 回调显示 woocommerce 通知

我的问题是表单继续正常工作，当不尊重字段时，提交后我没有看到任何错误消息。 但是，当页面重新加载时，消息会正确显示。 因此，我收到了插入到 functions.php 中的消息，但仅在页面刷新后而不是在提交时。 任何人都帮我弄清楚我错了什么？ 感谢您的任何帮助，并感谢您的任何回复。

这就是我所做的

示例表单（form-edit-account.php）

form name="Form" class="mts-edit-account" action="<?php echo admin_url('admin-ajax.php'); ?>" method="post" enctype="multipart/form-data" <?php add_action( 'woocommerce_edit_account_form_tag', 'action_woocommerce_edit_account_form_tag' );?> > 
  <!-- Fist & Last Name Field -->
  <div class="row name_surname">
    <div class="form-row">
      <label class="t3" for="account_first_name">Nome *</label>
      <input type="text" placeholder="Inserisci il tuo nome" class="field-settings" name="account_first_name" id="account_first_name" value="<?php echo esc_attr( $user->first_name ); ?>" />
    </div>

    <div class="form-row">
      <label class="t3" for="account_last_name">Cognome *</label>
      <input type="text" placeholder="Inserisci il tuo cognome" class="field-settings" name="account_last_name" id="account_last_name" value="<?php echo esc_attr( $user->last_name ); ?>" />
    </div> 

    <!-- Save Settings -->
    <p style="margin-bottom: 0px!important;">
      <?php wp_nonce_field( 'save_account_details', 'save-account-details-nonce' ); ?>
      <button type="submit" class="edit-account-button" name="save_account_details" value="<?php esc_attr_e( 'Save changes', 'woocommerce' ); ?>"><?php esc_html_e( 'Salva modifiche', 'woocommerce' ); ?></button>
      <input type="hidden" name="action" value="save_account_details" />
    </p>
  </div>
</form>

JS文件

jQuery(document).ready(function($) {
    
    $('.mts-edit-account').on('submit', function(e) { 
        e.preventDefault(); 

    //Ajax function
    jQuery.ajax({
      
      type: "post",
      data: { action: 'save_account_details' },
      url: "wp-admin/admin-ajax.php",
      success : function( response ) {
        $('woocommerce-notices-wrapper').append(response);
      },

      error: function(error) {
        console.log(error);
      }  

    });
    });
});

功能。php

add_action( 'wp_ajax_save_account_details', 'save_account_details' );
add_action( 'wp_ajax_nopriv_save_account_details', 'save_account_details' );
add_action( 'woocommerce_save_account_details_errors','save_account_details', 10, 1 );
function save_account_details($args) {

  if (trim($_POST['account_first_name']) == '') {
    $response = wc_add_notice("Field Name Required", "notice");
  } else {
    $response = 'Settings Saved!';
  }

  // Don't forget to exit at the end of processing
  echo json_encode($response);
  exit();

}

Answer 1

wc_add_notice()在 session 中添加通知，以便在重新加载后打印。

在您的情况下，您需要使用打印 function wc_print_notices()

应该是这样的。

wc_add_notice("Field Name Required", "notice");
$response = wc_print_notices( true );

此外，您正在使用'wp_ajax_nopriv' ，这意味着任何未登录的用户都可以发送该请求并更改设置。 你需要删除它。