От автора: приветствую вас, друзья. Итак, мы продолжаем цикл статей, посвященных знакомству с одной из популярнейших CMS для создания интернет-магазинов – OpenCart (Оперкарт). В этой и нескольких следующих статьях мы будем работать непосредственно с кодом CMS и реализуем выгрузку товаров из заказов за выбранный период в Excel.
Итак, как уже отмечалось выше, в этой статье мы с вами начнем работать с кодом 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 -->
Мне кажется, лучше всего наша новая форма будет смотреться вверху страницы отдельным блоком, поэтому я размещу наш блок перед блоком с фильтрами. В результате мы должны увидеть новый блок с двумя полями, в которых уже можно вызывать календарики и выбирать даты.
Обратите внимание, после кнопки идет пустой блок:
<div class="wfm-result col-sm-12" style="margin-top: 10px;"></div>
В этот блок будет подгружаться ответ с сервера. В ответе, если все пройдет успешно, будет ссылка для скачивания файла. В рамках данных статей я не буду останавливаться на оформлении кода. Например, для пустого блока стили я написал инлайново. По-хорошему, их конечно же, стоит перенести в подключаемый файл стилей. Думаю, это вы сможете сделать затем самостоятельно.
Ну что же, на этом мы, пожалуй, пока остановимся. В следующей части попробуем принять данные из полей на сервере, используя для этого возможности асинхронных запросов – AJAX.
Больше об OpenCart вы можете узнать из наших бесплатных или платных уроков.