От автора: приветствую вас, друзья. Итак, мы продолжаем цикл статей, посвященных знакомству с одной из популярнейших CMS для создания интернет-магазинов – OpenCart (Оперкарт). В этой и нескольких следующих статьях мы будем работать непосредственно с кодом CMS и реализуем выгрузку товаров из заказов за выбранный период в Excel. Данную статью мы посвятим отправке запроса ajax, которым отправим на сервер выбранный промежуток дат.
Итак, в предыдущей статье мы добавили на страницу списка заказов два дополнительных поля, через которые планируется отправлять интервал дат для выборки товаров.
Теперь в этом же файле — admin\view\template\sale\order_list.tpl – напишем несложны скрипт, который будет получать введенные даты и отправлять их асинхронно. Скрипт поместим внизу файла, там, где находится прочий JS-код.
$('#button-export').on('click', function(){ var wfm_start_date = $("input[name='wfm_start_date']").val(), wfm_end_date = $("input[name='wfm_end_date']").val(), url = 'index.php?route=sale/order/wfm_export&token=<?php echo $token; ?>'; $.ajax({ url: url, data: {wfm_start_date: wfm_start_date, wfm_end_date: wfm_end_date}, type: 'GET', beforeSend: function(){ $('.preloader').fadeIn(300); }, success: function(res) { $('.preloader').delay(500).fadeOut('slow', function(){ $('.wfm-result').empty().html('<div class="alert alert-info" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>' + res + '</div>'); }); }, error: function () { alert('Error!'); } });
});
Немного прокомментируем данный скрипт. Вначале мы формируем три переменных:
wfm_start_date – начальная дата
wfm_end_date – конечная дата
url – адрес, на который отправится запрос.
Обратим внимание на адрес — index.php?route=sale/order/wfm_export&token=. Запрос будет отправлен в контроллер ControllerSaleOrder и, среди прочих, мы отправляем параметр token. Этот параметр необходим для проверки безопасности, чтобы запрос обрабатывался только от администратора.
Далее формируется сам запрос методом ajax. Здесь в свойстве data отправляются даты. В свойстве beforeSend включается прелоадер, который мы добавим чуть позже. Свойство success принимает ответ с сервера и выводит его в блок с классом wfm-result. Ну и свойство error сработает, если запрос на сервер не дойдет и вернет ошибку.
Теперь добавим перед формой с полями добавим прелоадер и немного стилей для него:
<style> .preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background-color: #fefefe; opacity: .7; display: none; } .preloader img { position: relative; left: 50%; top: 50vh; margin: -100px 0 0 -100px; }
</style>
<div class="preloader"><img src="/wfm_export_orders/ring.svg " alt=""></div>
Осталось протестировать запрос. Для этого откроем контроллер ControllerSaleOrder, который находится по пути admin\controller\sale\order.php, и добавим в него экшен, принимающий запрос, с простейшим кодом, который просто покажет данные запроса. Эти данные мы должны увидеть в качестве ответа на ajax-запрос.
В итоге мы должны увидеть примерно такой результат:
Как видим, запрос отправляется и ответ приходит. В момент отправки включается прелоадер, который выключается после получения ответа на запрос. Отлично! На этом пока что остановимся. В следующей статье мы напишем обработчик запроса, который на основе принятого диапазона дат сформирует файл Excel с выгрузкой товаров.
Больше об OpenCart вы можете узнать из наших бесплатных или платных уроков.