@avdoshka89

Как на WordPress создать форму связи на Ajax?

Всем доброго времени суток друзья помогите с обработчиком ajax на WordPress. У меня на сайте есть форма обратной связи я хотел бы что бы она работала на AJAX. Я пытаюсь это сделать но у меня не чего не получается. Потому что я не имею знаний в AJAX и не гуру в программировании я хотел бы что бы когда пользователь нажмет на один из шести чекбоксов это может быть несколько чекбосов сразу с выбранной проблемой, введет свой телефон и имя мне на почту приходило письмо с его выбранной проблемой, именем и телефоном. Я создал папку в директории wp-content/plugins в папке /my-plygin я создал файл и назвал его mail_ajax.php. Далее я в него добавил код
<?php
/*
Plugin Name: Ajax_Mail
*/

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
function my_enqueue_scripts() {
    wp_enqueue_script( 'my-ajax-script', plugin_dir_url( __FILE__ ) . '/assets/components/ajaxform/js/default.js', array( 'jquery' ) );
    wp_localize_script( 'my-ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}

add_action( 'wp_ajax_send_mail_ajax', 'send_mail_ajax_callback' );
add_action( 'wp_ajax_nopriv_send_mail_ajax', 'send_mail_ajax_callback' );
function send_mail_ajax_callback() {
    // получаем данные из запроса
    $problem = $_POST['problem'];
    $callbackfio = $_POST['callbackfio'];
    $callbacktel = $_POST['callbacktel'];
    $iagree = $_POST['iagree'];

    // проверяем, что все поля заполнены
    if ( empty( $problem ) || empty( $callbackfio ) || empty( $callbacktel ) || empty( $iagree ) ) {
        echo json_encode( array( 'success' => false, 'message' => 'Заполните все поля формы.' ) );
        wp_die();
    }

    // отправляем письмо на почту администратора сайта
    $to = 'sales@skvazhinaremont.ru';
    $subject = 'Новая заявка с сайта';
    $body = 'Проблема: ' . implode( ', ', $problem ) . "\n";
    $body .= 'Имя: ' . $callbackfio . "\n";
    $body .= 'Телефон: ' . $callbacktel . "\n";
    $headers = array( 'Content-Type: text/html; charset=UTF-8' );
    wp_mail( $to, $subject, $body, $headers );

    // отправляем ответ клиенту
    echo json_encode( array( 'success' => true, 'message' => 'Спасибо за обращение, сообщение отправлено. Наш менеджер перезвонит вам в ближайшее время.' ) );
    wp_die();
}

?>

Всем доброго времени суток друзья помогите с обработчиком ajax на WordPress. У меня на сайте есть форма обратной связи я хотел бы что бы она работала на AJAX. Я пытаюсь это сделать но у меня не чего не получается. Потому что я не имею знаний в AJAX и не гуру в программировании я хотел бы что бы когда пользователь нажмет на один из шести чекбоксов это может быть несколько чекбосов сразу с выбранной проблемой, введет свой телефон и имя мне на почту приходило письмо с его выбранной проблемой, именем и телефоном. Я создал папку в директории wp-content/plugins в папке /my-plygin я создал файл и назвал его mail_ajax.php. Далее я в него добавил код

<?php
/*
Plugin Name: Ajax_Mail
*/

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
function my_enqueue_scripts() {
wp_enqueue_script( 'my-ajax-script', plugin_dir_url( __FILE__ ) . '/assets/components/ajaxform/js/default.js', array( 'jquery' ) );
wp_localize_script( 'my-ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}

add_action( 'wp_ajax_send_mail_ajax', 'send_mail_ajax_callback' );
add_action( 'wp_ajax_nopriv_send_mail_ajax', 'send_mail_ajax_callback' );
function send_mail_ajax_callback() {
// получаем данные из запроса
$problem = $_POST['problem'];
$callbackfio = $_POST['callbackfio'];
$callbacktel = $_POST['callbacktel'];
$iagree = $_POST['iagree'];

// проверяем, что все поля заполнены
if ( empty( $problem ) || empty( $callbackfio ) || empty( $callbacktel ) || empty( $iagree ) ) {
echo json_encode( array( 'success' => false, 'message' => 'Заполните все поля формы.' ) );
wp_die();
}

// отправляем письмо на почту администратора сайта
$to = 'sales@skvazhinaremont.ru';
$subject = 'Новая заявка с сайта';
$body = 'Проблема: ' . implode( ', ', $problem ) . "\n";
$body .= 'Имя: ' . $callbackfio . "\n";
$body .= 'Телефон: ' . $callbacktel . "\n";
$headers = array( 'Content-Type: text/html; charset=UTF-8' );
wp_mail( $to, $subject, $body, $headers );

// отправляем ответ клиенту
echo json_encode( array( 'success' => true, 'message' => 'Спасибо за обращение, сообщение отправлено. Наш менеджер перезвонит вам в ближайшее время.' ) );
wp_die();
}

?>
Развернуть фрагмент
Далее перешел в админ панель WordPress плагины и активировал плагин Ajax_Mail который я создал в директории /wp-content/plugins/my-plygin.


Это js код который находиться в директории /assets/components/ajaxform/js/ и называется default.js
var AjaxForm = {

    initialize: function (afConfig) {
        if (!jQuery().ajaxForm) {
            document.write('<script src="' + afConfig['assetsUrl'] + '/js/lib/jquery.form.min.js"><\/script>');
        }
        if (!jQuery().jGrowl) {
            document.write('<script src="' + afConfig['assetsUrl'] + '/js/lib/jquery.jgrowl.min.js"><\/script>');
        }

        $(document).ready(function () {
            $.jGrowl.defaults.closerTemplate = '<div>[ ' + afConfig['closeMessage'] + ' ]</div>';
        });

        $(document).off('submit', afConfig['formSelector']).on('submit', afConfig['formSelector'], function (e) {
            $(this).ajaxSubmit({
                dataType: 'json',
                data: {pageId: afConfig['pageId']},
                url: afConfig['actionUrl'],
                beforeSerialize: function (form) {
                    form.find(':submit').each(function () {
                        if (!form.find('input[type="hidden"][name="' + $(this).attr('name') + '"]').length) {
                            $(form).append(
                                $('<input type="hidden">').attr({
                                    name: $(this).attr('name'),
                                    value: $(this).attr('value')
                                })
                            );
                        }
                    })
                },
                beforeSubmit: function (fields, form) {
                    //noinspection JSUnresolvedVariable
                    if (typeof(afValidated) != 'undefined' && afValidated == false) {
                        return false;
                    }
                    form.find('.error').html('');
                    form.find('.error').removeClass('error');
                    form.find('input,textarea,select,button').attr('disabled', true);
                    return true;
                },
                success: function (response, status, xhr, form) {
                    form.find('input,textarea,select,button').attr('disabled', false);
                    response.form = form;
                    $(document).trigger('af_complete', response);
                    if (!response.success) {
                        AjaxForm.Message.error(response.message);
                        if (response.data) {
                            var key, value, focused;
                            for (key in response.data) {
                                if (response.data.hasOwnProperty(key)) {
                                    if (!focused) {
                                        form.find('[name="' + key + '"]').focus();
                                        focused = true;
                                    }
                                    value = response.data[key];
                                    form.find('.error_' + key).html(value).addClass('error');
                                    form.find('[name="' + key + '"]').addClass('error');
                                }
                            }
                        }
                    }
                    else {
                        AjaxForm.Message.success(response.message);
                        form.find('.error').removeClass('error');
                        form[0].reset();
                        //noinspection JSUnresolvedVariable
                        if (typeof(grecaptcha) != 'undefined') {
                            //noinspection JSUnresolvedVariable
                            grecaptcha.reset();
                        }
                    }
                }
            });
            e.preventDefault();
            return false;
        });

        $(document).on('keypress change', '.error', function () {
            var key = $(this).attr('name');
            $(this).removeClass('error');
            $('.error_' + key).html('').removeClass('error');
        });

        $(document).on('reset', afConfig['formSelector'], function () {
            $(this).find('.error').html('');
            AjaxForm.Message.close();
        });
    }

};


//noinspection JSUnusedGlobalSymbols
AjaxForm.Message = {
    success: function (message, sticky) {
        if (message) {
            if (!sticky) {
                sticky = false;
            }
            $.jGrowl(message, {theme: 'af-message-success', sticky: sticky});
        }
    },
    error: function (message, sticky) {
        if (message) {
            if (!sticky) {
                sticky = false;
            }
            $.jGrowl(message, {theme: 'af-message-error', sticky: sticky});
        }
    },
    info: function (message, sticky) {
        if (message) {
            if (!sticky) {
                sticky = false;
            }
            $.jGrowl(message, {theme: 'af-message-info', sticky: sticky});
        }
    },
    close: function () {
        $.jGrowl('close');
    },
};
  • Вопрос задан
  • 90 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы