JavaScript форма (SweetAlert) + JSON + отправка сообщения с данными из формы. Застрял)

triok · 11 грудня 2018

Добрый день коллеги, помогите разобраться.

Придумал себе задачу, сделать JS форму на сайте типа "Письмо директору", с двумя инпутами и кнопкой "ОК". При заполнении полей и нажатии на кнопку должна происходить отправка имейл сообщения.

Почему именно JS , потому что все всплывающие окошки на сайте сделаны через SweetAlert2.

Форму сделал соответственно тоже через SweetAlert2, при заполнении полей и нажатии на OK данные с инпутов кодируются в JSON, тут всё работает.

Вот так выглядит форма:

<script type="text/javascript">
  window.onload = function () {
    var a = document.getElementById('director');
    a.onclick = function() {
        Swal({
          type: 'warning',
          title: 'Письмо директору',
          html:
            '<input id="swal-input1" class="swal2-input" placeholder="Ваш иемйл">' +
            '<textarea id="swal-textarea1" class="swal2-textarea" placeholder="Введите текст сообщения..." style="display: flex;"></textarea>',          
          showCancelButton: true,
          confirmButtonText: 'Отправить',
          cancelButtonText: 'Отмена',
          preConfirm: function () {
            return new Promise(function (resolve) {
              resolve([
                $('#swal-input1').val(),
                $('#swal-textarea1').val()
              ])
            })
          },                    
        }).then(function (result) {
          var message = JSON.stringify(result);
        })

        return false;
    }
}
</script>

Собственно, вопрос , а дальше что? Я начал лепить аджакс запрос:

          $.ajax({
              url:"sendmail.php",
              type: 'POST',
              data: message,
              error: true,
              success:function(message){swal('success')},
            })
        })

Результат приходит как succes. Создал sendmail.php файл:

<?php

	$message = $_POST['message'];

	$mail = new \Mail();
	$mail->protocol = $this->config->get('config_mail_protocol');
	$mail->parameter = $this->config->get('config_mail_parameter');
	$mail->smtp_hostname = $this->config->get('config_mail_smtp_hostname');
	$mail->smtp_username = $this->config->get('config_mail_smtp_username');
	$mail->smtp_password = html_entity_decode($this->config->get('config_mail_smtp_password'), ENT_QUOTES, 'UTF-8');
	$mail->smtp_port = $this->config->get('config_mail_smtp_port');
	$mail->smtp_timeout = $this->config->get('config_mail_smtp_timeout');

	$mail->setTo('[email protected]'); // Кому
	$mail->setFrom($this->config->get('config_email')); // От кого
	$mail->setSubject("Test mail"); // Тема
	$mail->setHtml($message); // Текст
	$mail->send();

?>

И тут у меня возникла мысль, что я вообще не той дорогой иду))

Уважаемые коллеги, направьте меня на правильный путь.

Правильно ли я понял схему, сначала делаю форму, затем формирую ajax запрос в файл sendmail.php, а там ловлю json данные и произвожу отправку?

AlexDW · 11 грудня 2018

13 минут назад, triok сказал:

И тут у меня возникла мысль, что я вообще не той дорогой иду))

старайтесь придерживаться стандартов движка

как пример - посмотрите как сделана отправка комментария на странице товара, и делайте по аналогии

triok · 12 грудня 2018

Если долго мучиться, то что-нибудь получится. В итоге все сделал. Может кому понадобится, оставлю код здесь. Надеюсь кто-нибудь опытный поправит кои косяки и недоработки.

В общем повторю еще раз смысл:

В шапке магазина размещена ссылка, нажав на которую появляется модальное окошко SweetAlert с формой (имя, имейл, текст). Заполнив форму, жмем "ОК" и происходит отправка сообщения с данными формы на определенный имейл. В моем случае на почту директора.

Итак,

в header.tpl, ссылка выглядит так:

<a href="mailto:[email protected]"><p id="director" class="director">Письмо директору</p></a>

В footer.tpl, вставил скрипт JS(SweetAlert) + отправку формы через Ajax, json

<script type="text/javascript">
  window.onload = function () {
    var a = document.getElementById('director');
    a.onclick = function() {
        Swal({
          type: 'warning',
          title: 'Письмо директору',
          html:
            '<input name="name" id="swal-input1" class="swal2-input" placeholder="Ваше имя">' +
            '<input name="email" id="swal-input2" class="swal2-input" placeholder="Email для ответа">' +
            '<textarea name="text" id="swal-textarea1" class="swal2-textarea" placeholder="Введите текст сообщения..." style="display: flex;"></textarea>', 
          showCancelButton: true,
          confirmButtonColor: '#ff5908',
          cancelButtonColor: '#666',
          confirmButtonText: 'Далее',
          cancelButtonText: 'Отмена',
          preConfirm: function () {
            return new Promise(function (resolve) {
              resolve([
                $('#swal-input1').val(),
                $('#swal-input2').val(),
                $('#swal-textarea1').val()
              ])
            })
          },                    
        }).then(function (result) {
        var result = {};
        result.name = $('#swal-input1').val();
        result.email = $('#swal-input2').val(); 
        result.text = $('#swal-textarea1').val();         
          $.ajax({
              url:"/catalog/controller/common/director/index",
              type: "POST",
              data: JSON.stringify(result),
              error: function(xhr,status,error){
              console.log(status);
              console.log(error);
              }
            }).done(function() {
            Swal({type: 'success', text: 'Сообщение отправлено'});
          });
        })

        return false;
    }
}
</script>

В папке controller/common/ создал контроллер director.php, который получает данные jSON и отправляет сообщение.

Вот так он выглядит:

<?php
class ControllerCommonDirector extends Controller {

		public function index() {

		$request_body = file_get_contents('php://input');
		$data = json_decode($request_body);

		$username = $data->name;
		$email = $data->email;
		$msg = $data->text;
		$message = '<div><span>Имя: </span><span><strong>'.$username.'</strong></span></div><br><div><span>Имейл: </span><span><strong>'.$email.'</strong></span></div><br><div>Текст сообщения:</div><br><div><strong>'.$msg.'</strong><div>';
		$subject = 'Письмо директору от: '.$email;

		$mail = new Mail();

		$mail->protocol = $this->config->get('config_mail_protocol');
		$mail->parameter = $this->config->get('config_mail_parameter');
		$mail->smtp_hostname = $this->config->get('config_mail_smtp_hostname');
		$mail->smtp_username = $this->config->get('config_mail_smtp_username');
		$mail->smtp_password = html_entity_decode($this->config->get('config_mail_smtp_password'), ENT_QUOTES, 'UTF-8');
		$mail->smtp_port = $this->config->get('config_mail_smtp_port');
		$mail->smtp_timeout = $this->config->get('config_mail_smtp_timeout');

		$mail->setTo('[email protected]'); // Имейл директора
		$mail->setFrom($this->config->get('config_email'));
		$mail->setSender(html_entity_decode($this->config->get('config_name'), ENT_QUOTES, 'UTF-8'));
		$mail->setSubject(html_entity_decode($subject, ENT_QUOTES, 'UTF-8'));
		$mail->setHtml($message);
		$mail->send();

    }			
}

Уверен, что можно было бы где-то что-то упростить, но вариант рабочий. Буду рад услышать критику.

chukcha · 12 грудня 2018

Никакой защиты от спама

		$request_body = file_get_contents('php://input');
		$data = json_decode($request_body);

хм..

triok · 13 грудня 2018

1) Немного переделал форму, так как если поля не заполнить и закрыть ее все равно появлялось уведомление что письмо отправлено. Поправил это. Новый код:

<script type="text/javascript">
  window.onload = function () {
    var a = document.getElementById('director');
    a.onclick = function() {
        Swal({
          type: 'warning',
          title: 'Письмо директору',
          html:
            '<input name="name" id="swal-input1" class="swal2-input" placeholder="Ваше имя">' +
            '<input name="email" id="swal-input2" class="swal2-input" placeholder="Email для ответа">' +
            '<textarea name="text" id="swal-textarea1" class="swal2-textarea" placeholder="Введите текст сообщения..." style="display: flex;"></textarea>',          
          showCancelButton: true,
          confirmButtonColor: '#ff5908',
          cancelButtonColor: '#666',
          confirmButtonText: 'Далее',
          cancelButtonText: 'Отмена',
          preConfirm: function () {
            return new Promise(function (resolve) {
              resolve([
                $('#swal-input1').val(),
                $('#swal-input2').val(),
                $('#swal-textarea1').val()
              ])
            })
          },                    
        }).then(function (result) {
        	if (result.value) { 
		        var result = {};
		        result.name = $('#swal-input1').val();
		        result.email = $('#swal-input2').val(); 
		        result.text = $('#swal-textarea1').val();         
	          	$.ajax({
	              url:"index.php?route=common/director/index",
	              type: "POST",
	              data: JSON.stringify(result),
	              success: function() {Swal({type: 'success', text: 'Сообщение отправлено'});},
	              error: function(xhr,status,error){
	              console.log(status);
	              console.log(error);
	              }
	            })
        	}
        })

        return false;
    }
}
</script>

2) Вопрос к знатокам, с точки зрения более чистого кода уместно ли было создать новый контроллер для обработки такого запроса. Или же логичнее было впихнуть функцию обработки например в контроллер хедера/футера?

Может быть вообще правильнее было всю логику вставить в функцию индекс хэдера/футера?

3)

11 часов назад, chukcha сказал:
Никакой защиты от спама
		$request_body = file_get_contents('php://input');
		$data = json_decode($request_body);
хм..

Защиту от спама не делал, во-первых не знаю как, а во-вторых на моем проекте она не нужна, спама нет)
А вот с file_get_contents , тут да. Я долго не мог поймать пост запрос и в итоге это единственное решение которое сработало.

Был бы признателен если бы указали как правильнее его поймать.

Я так понимаю что надо начать со строк:
if ($this->request->server['REQUEST_METHOD'] == 'POST') {

}

но как тут правильно все сделать не понимаю, у меня ничего не получилось

Змінено 13 грудня 2018 користувачем triok

chukcha · 13 грудня 2018

26 минут назад, triok сказал:

Я так понимаю что надо начать со строк:

Как бы ... Вы отправляете json и решение верное, но проверить бы REQUEST_METHOD - неужели нет POST?

Вхід

JavaScript форма (SweetAlert) + JSON + отправка сообщения с данными из формы. Застрял)

Recommended Posts

triok

Надіслати

Поділитися на інших сайтах

AlexDW

Надіслати

Поділитися на інших сайтах

triok

Надіслати

Поділитися на інших сайтах

chukcha

Надіслати

Поділитися на інших сайтах

triok

Надіслати

Поділитися на інших сайтах

chukcha

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Ваші замовлення

ocStore

Шаблони

OpenCart.Pro

Important Information