I'm editing the woocommerce form-edit-account.php template. The template contains a form that allows users to change the settings (name, surname, etc.). Originally the form does not perform ajax requests, so to save the settings without refreshing the page I added ajax requests. Everything works fine except handling error. When a field is left blank or not respected in its conditions, woocommerce error messages do not appear.
I found a similar post here, but couldn't figure out how to fit it according to my form.: Display woocommerce notice through Ajax callback on product page
My problem is that the form continues to work normally, when the fields are not respected I do not see any error message after submitting. However when the page is reloaded the messages are displayed correctly. So I'm getting the messages inserted in functions.php but only after page refresh and not at submit time. Anyone help me figure out what am I wrong? I appreciate any help and thank you for any replies.
here's what i did
Example form (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 File
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);
}
});
});
});
functions.php - Updated
wc_add_notice("Field Name Required", "notice"); and $response = wc_print_notices( true ); They allow you to view the message, but then the woocommerce success default message is also displayed, so two messages are displayed and not just one.
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();
}
from Woocommerce - Display notice with ajax form
No comments:
Post a Comment