Woocommerce - 以 ajax 形式显示通知答案

【问题标题】：Woocommerce - Display notice with ajax formWoocommerce - 以 ajax 形式显示通知
【发布时间】：2022-09-24 03:51:06
【问题描述】：

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

我在这里找到了类似的帖子，但无法根据我的表格弄清楚如何适应它。：Display woocommerce notice through Ajax callback on product page

我的问题是表单继续正常工作，当不尊重字段时，提交后我没有看到任何错误消息。但是，当页面重新加载时，消息会正确显示。所以我在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 Handling Error
        var $form = $(this);
        $.post(
      $form.attr(\'action\'), 
      $form.serialize(), 
      function(data) {
        $(\'.newdiv\').html(response);
          }, \'json\'
    );

    //Ajax Save settings
    $.ajax({
      type: \"POST\",
      data: $(\".mts-edit-account\").serialize(),
      beforeSend: function() {
        $(\".container_loader\").show(); 
      },
      success: function(response) {
        $(\".container_loader\").hide();
        //$(\'.newdiv\').html(data);
      }
    });

    });

});

函数.php- 更新
wc_add_notice(\"Field Name Required\", \"notice\"); 和 $response = wc_print_notices( true ); 它们允许您查看消息，但随后也会显示 woocommerce 成功默认消息，因此显示两条消息而不仅仅是一条。

add_action(  \'woocommerce_save_account_details_errors\', array( &$user, \'save_account_details\' ),  10, 1);
add_action( \'wp_ajax_save_account_details\', \'save_account_details\' );
function save_account_details( &$user ) {
  if (isset( $_POST[\'account_first_name\'] ) == \'\') {
    wc_add_notice(\"<b>Name</b> is required field\", \"error\");
    $response = wc_print_notices(true);
  } else if (isset($_POST[\'account_first_name\']) ) {  
    wc_add_notice(\"Test Message\", \"success\");
    $response = wc_print_notices(true);
  }
  echo json_encode($response);
  exit();
}

标签： javascript php jquery forms woocommerce

【解决方案1】：

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

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

应该是这样的。

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

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

打印单个通知。

ob_start();
wc_print_notice( 'Field Name Required', 'error' );
$response = ob_get_clean();

您可以在此处浏览完整的通知功能

https://woocommerce.github.io/code-reference/files/woocommerce-includes-wc-notice-functions.html#source-view.184

【讨论】：

谢谢，它的工作，我真的很感激。但是，我仍然有一些小疑问：wc_print_notices 中的 true 值返回带有标签和各种 \n \t \t \t 的文本，如果改为设置为 false，我将使用 div 和样式正确显示消息，但是超出了我的消息还找到空文本，它取决于什么？此外，如果我保存多次，我将同时显示多条消息，而我希望上一条消息消失并显示下一条消息。这怎么可能？
我刚刚发现我收到了两种类型的消息，一种来自 woocommerce 的原始消息，另一种是我使用 wc_add_notice 添加的。你能指导我如何只接收一条消息吗？
为了获得单个通知，您可以使用 wc_print_notice()。我会更新答案