OpenCart. Выгрузка заказов в Excel. Часть 2

Дата публикации: 2018-04-10

OpenCart. Выгрузка заказов в Excel

От автора: приветствую вас, друзья. Итак, мы продолжаем цикл статей, посвященных знакомству с одной из популярнейших 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">&times;</span></button>' + res + '</div>');
            });
        },
        error: function () {
            alert('Error!');
        }
    });
});

$('#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>

<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>

Осталось протестировать запрос. Для этого откроем контроллер ControllerSaleOrder, который находится по пути admin\controller\sale\order.php, и добавим в него экшен, принимающий запрос, с простейшим кодом, который просто покажет данные запроса. Эти данные мы должны увидеть в качестве ответа на ajax-запрос.

В итоге мы должны увидеть примерно такой результат:

Как видим, запрос отправляется и ответ приходит. В момент отправки включается прелоадер, который выключается после получения ответа на запрос. Отлично! На этом пока что остановимся. В следующей статье мы напишем обработчик запроса, который на основе принятого диапазона дат сформирует файл Excel с выгрузкой товаров.

Больше об OpenCart вы можете узнать из наших бесплатных или платных уроков.

Метки: opencart