AJAX в OpenCart 2.0

Навык работы с ajax при создании сайтов на opencart является базовым, половина стандартной темы не работала бы без него. Так же таким образом можно проводить отладку функций контроллеров, посылая ajax запросы определенным функциям и выводя ответы в консоль.

Даный урок является предисловием к уроку про то, как сделать свою форму обратной связи в OpenCart, так же подразумеваем, что opencart у нас 2.0
Первым делом нам нужно отправить на сервер информацию, для этого создадим простую форму на любой странице (к примеру – главная, файл home.tpl)

<div class="main-forma">
<h2>ФОРМА </h2>
<div class="form-pol">
<input type="text" name="testItem"/>
<input type="submit" id="ret" value="отправить"/>
</div>
<div id="resp">ответ</div>
</div>

Отправляем значение из testItem, результат будем выводить в консоль и в блок #resp.

Html часть нашей формы готова, теперь обратим внимание на серверную часть. Так как хотелось бы создавать разные формы, сделаем отдельный контроллер, хотя функцию отправки можно вставлять в любой уже созданный контроллер.

Создадим в папке common файл sendmail.php с таким содержимым:

<?php
class ControllerCommonSendmail extends Controller {
 public function index() {
 
 }
 public function sendmailCustom (){
 }
}

Таким образом получаются данные от любых форм на opencart методом post.

Обрабатывать не будем, сразу создадим массив и запишем в него значения:

$json = array();
$json['test'] = 'test';
$json['test1'] = $testVar;

Далее пишем заголовок ответа – данные JSON и сам массив:

$this->response->addHeader('Content-Type: application/json');
$this->response->setOutput(json_encode($json));

Через $this -> response в opencart выводятся все данные на отображение, туда мы суем массив json предварительно кодировав его в … JSON

Серверная часть окончена, мы рассмотрели получение данных, обработку и вывод. Теперь клиентская.

Открываем файл шаблона tpl (там где форма)

В конце документа пишем скрипт, который должен:

Выбрать данные
Отправить серверу
Получить ответ
Выполнить нужные програмисту действия

<script type="text/javascript">
$('#ret').click(function(){ // Отправлять будем по клику
 $.ajax({
 url: 'index.php?route=common/sendmail/sendmailCustom',
 type: 'post',
 data: $('input[type=\'text\']'),
 dataType: 'json',
 beforeSend: function() {
 console.log('отослано');
 },
 success: function(json) {
 console.log(json);
 $('#resp').html(json['test1']);
 }
 });
});
</script>

Разберем подробней:
По клику кнопки в форме делаем ajax запрос:

url – куда мы отправляем – папка common файл sendmail ФУНКЦИЯ в нем sendmailCustom, так можно “достучаться” до любой функции в любом контроллере.
тип – post – post или get, нам нужен post так как принимаем мы в контроллере именно таким методом
data: $(‘input[type=\’text\’]’), здесь обычный объект jquery, обычно собираются нужные input’ы
beforeSend: перед отправкой пишем в консоли, чтобы понятно было что происходит, к примеру пишем в консоль, что отправили данные.
success: function(json) эта функция анонимная получает именно то, что отправил сервер в этой строчке $this->response->setOutput(json_encode($json)); так как мы используем jquery, он сам расшифрует строку и сделает из нее массив с именем json. Мы выведем полученное в консоль, а так же переменную test1 – то, что вы изначально ввели в input перед отправкой.

На этом все, после нажатия на кнопку “отправить” текст отправится на сервер, сервер отправит его обратно и запишет результат в блок #resp, ajax запрос выполнен!

Итого, весь код залпом:

контроллер:

<?php
class ControllerCommonSendmail extends Controller {
 public function index() {
 
 }
 public function sendmailCustom (){
 ($this->request->post['testItem']) ? $testVar = $this->request->post['testItem']:5;
 $json = array();
 $json['test'] = 'test';
 $json['test1'] = $testVar;
 $this->response->addHeader('Content-Type: application/json');
 $this->response->setOutput(json_encode($json));
 }
}

html:

<div class="main-forma">
 <h2>ФОРМА </h2>
 <div class="form-pol">
 <input type="text" name="testItem"/>
 <input type="submit" id="ret" value="отправить"/>
 </div>
 <div id="resp">ответ</div>
</div>

js:

<script type="text/javascript">
$('#ret').click(function(){ // Отправлять будем по клику
 $.ajax({
 url: 'index.php?route=common/sendmail/sendmailCustom',
 type: 'post',
 data: $('input[type=\'text\']'),
 dataType: 'json',
 beforeSend: function() {
 console.log('отослано');
 },
 success: function(json) {
 console.log(json);
 $('#resp').html(json['test1']);
 }
 });
});
</script>