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

18 Мар 2023г. в 15:45

Итак, как уже отмечалось выше, в этой статье мы с вами начнем работать с кодом OpenCart и создавать свой собственный функционал, который вы в дальнейшем по своему желанию сможете оформить в виде модуля. В качестве задачи мы возьмем реализацию функционала выгрузки заказанных товаров за некоторый промежуток времени в Excel. Задача вполне реальна, и я взял ее из своей практики. Менеджерам достаточно часто необходимо анализировать продажи, скажем за месяц, и это куда удобнее сделать, имея список проданного в Excel, а не просматривая заказы в админке.

Для реализации поставленной задачи нам потребуется библиотека PHPExcel. Как работать с этой библиотекой – можно посмотреть в уроке на нашем сайте. Саму библиотеку вы можете найти на GitHub или взять из исходников к этой статье.

Давайте создадим в корне сайта OpenCart папку – я назову ее wfm_export_orders – и положим в нее библиотеку PHPExcel. Также в эту же паку поместим какую-нибудь анимационную картинку (у меня это будет файл ring.svg), которая нам понадобится в дальнейшем. В итоге должна получиться следующая структура:

В корне сайта на Опенкарт — kraplina.loc – находится папка wfm_export_orders с озвученным выше содержимым.

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



Задача понятна – выполняем. Откроем шаблон списка заказов — site\admin\view\template\sale\order_list.tpl и в нужном месте поместим следующий код:

<!-- export -->
<div class="panel-body">
<div class="well">
<h3>Экспорт заказов</h3>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label" for="wfm_start_date">Начальная дата</label>
<div class="input-group date">
<input type="text" name="wfm_start_date" value="" placeholder="Начальная дата" data-date-format="YYYY-MM-DD" id="wfm_start_date" class="form-control" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
</span></div>
</div>
</div>

<div class="col-sm-6">
<div class="form-group">
<label class="control-label" for="wfm_end_date">Конечная дата</label>
<div class="input-group date">
<input type="text" name="wfm_end_date" value="" placeholder="Конечная дата" data-date-format="YYYY-MM-DD" id="wfm_end_date" class="form-control" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
</span></div>
</div>
</div>

<div class="col-sm-12">
<button type="button" id="button-export" class="btn btn-primary pull-right"><i class="fa fa-filter"></i> Экспорт</button>
</div>
<div class="wfm-result col-sm-12" style="margin-top: 10px;"></div>
</div>
</div>
</div>
<!-- export -->

<!-- export -->
<div class="panel-body">
<div class="well">
<h3>Экспорт заказов</h3>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label" for="wfm_start_date">Начальная дата</label>
<div class="input-group date">
<input type="text" name="wfm_start_date" value="" placeholder="Начальная дата" data-date-format="YYYY-MM-DD" id="wfm_start_date" class="form-control" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
</span></div>
</div>
</div>

<div class="col-sm-6">
<div class="form-group">
<label class="control-label" for="wfm_end_date">Конечная дата</label>
<div class="input-group date">
<input type="text" name="wfm_end_date" value="" placeholder="Конечная дата" data-date-format="YYYY-MM-DD" id="wfm_end_date" class="form-control" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
</span></div>
</div>
</div>

<div class="col-sm-12">
<button type="button" id="button-export" class="btn btn-primary pull-right"><i class="fa fa-filter"></i> Экспорт</button>
</div>
<div class="wfm-result col-sm-12" style="margin-top: 10px;"></div>
</div>
</div>
</div>
<!-- export -->
Мне кажется, лучше всего наша новая форма будет смотреться вверху страницы отдельным блоком, поэтому я размещу наш блок перед блоком с фильтрами. В результате мы должны увидеть новый блок с двумя полями, в которых уже можно вызывать календарики и выбирать даты.



Обратите внимание, после кнопки идет пустой блок:

<div class="wfm-result col-sm-12" style="margin-top: 10px;"></div>
1
<div class="wfm-result col-sm-12" style="margin-top: 10px;"></div>
В этот блок будет подгружаться ответ с сервера. В ответе, если все пройдет успешно, будет ссылка для скачивания файла. В рамках данных статей я не буду останавливаться на оформлении кода. Например, для пустого блока стили я написал инлайново. По-хорошему, их конечно же, стоит перенести в подключаемый файл стилей. Думаю, это вы сможете сделать затем самостоятельно.

Ну что же, на этом мы, пожалуй, пока остановимся. В следующей части попробуем принять данные из полей на сервере, используя для этого возможности асинхронных запросов – AJAX.