58
Структура шаблона для CMS DIAFAN является достаточно гибкой, что
позволяет интегрировать готовую верстку и дизайн-макеты любой сложности. Для
сайта Simbez.ru была создана древовидная структура директорий шаблона,
представленная на рисунке 12 и состоящая из следующих файлов и разделов:
● CSS — таблицы стилей.
● Fonts – сторонние шрифты, используемые в шаблоне.
● Images – изображения, интегрированные в макет (иконки, фоны и
прочее).
● JS – скрипты и сценарии страниц (корзина, модальные окна, слайдеры).
● Modules – модифицированные файлы модулей системы.
● Themes – шаблоны верстки макета:
○ Functions – исполняемые коды функций, используемых в
шаблоне.
○ Site_start.php – главная страница.
○ Site_cart.php – страница корзины.
○ Site.php — стандартная контент-страница, страница каталога.
○ 1_col.php – контент-страница без боковой панели.
Рисунок 12 — структура шаблона
59
После завершения работ над версткой макета необходимо интегрировать
шаблонные теги и функции системы управления. В CMS DIAFAN используется
собственный формат шаблонизации с помощью тега <insert>.
Например, код
<insert name=”show_href” rewrite=”shop/cart” alt=”Корзина”>
после обработки шаблонизатором преобразуется в следующий, понятный браузеру
код: <a href=”http://simbez.ru/shop/cart/”>Корзина</a>.
Кроме системных шаблонных тегов есть теги модулей. Как правило каждый
модуль имеет тег
<insert name=”show_block” module=”имя_модуля”>, позволяющий вывести
содержимое данного модуля в любой части сайта. Сам код содержимого не
смешивается с версткой, а хранится в соответствующем файле, таком как
/modules/имя_модуля/имя_модуля_show_block.php. Схема обработки шаблона
представлена на рисунке 13.
Рисунок 13 — обработка шаблона в ядре системы DIAFAN.CMS
60
При создании шаблона для сайта Simbez.ru была проведена модификация 28
системных модулей, создан 1 новый модуль, доработаны 5 системных функций,
созданы 5 новых шаблонов страниц.
4.2. Программирование требуемого функционала.
Несмотря на то, что выбранная ранее система управления способна
обеспечить практически весь необходимый заказчику функционал, предоставляя
широкий набор модулей, часть инструментов требует осуществления
непосредственно силами разработчиков Интернет-магазина. Для этого был
определен ряд предстоящих доработок по программной части, после чего выполнена
реализация следующего списка интерфейсных элементов и модулей:
Модуль отзывов. С его помощью покупатели смогут оставлять свои отзывы и
комментарии об уровне сервиса Интернет-магазина, качестве товаров, доставки, о
своих впечатлениях в целом. Модуль помогает принимать, обрабатывать и
публиковать отзывы. Он оснащен поддержкой статусов отзывов, что делает работу
администраторов магазина более удобной и быстрой. Пример интерфейса модуля
отзывов представлен на рисунке 14.
61
Рисунок 14 — элементы административного интерфейса модуля отзывов
Функциональный виджет карусели, отображенный на рисунке 15, имеет
поддержку вывода групп товаров в отдельных вкладках. При разработке и создании
виджета были реализованы фильтры продукции, позволяющие разделить
ассортимент по трем параметрам: лидеры продаж, новинки и рекомендованные
товары.
62
Рисунок 15 — виджет карусели продукции на главной странице
Шаблон и скрипт вывода модуля «Меню». Для большего удобства
сотрудников и посетителей Интернет-магазина был разработан новый шаблон,
представляющий меню как многоуровневый выпадающий список. Он имеет
визуальную группировку всех элементов меню по родительским категориями.
Таким образом, весь ассортимент наглядно представлен для покупателей, которые
легко смогут подобрать необходимый товар, удовлетворяющий их потребности.
Внешний вид многоуровневого меню представлен на рисунке 16.
63
Рисунок 16 — многоуровневое выпадающее меню каталога товаров
Система поиска по товарам, представленная на рисунке 17. Специально для
повышения удобства пользования Интернет-магазином была разработана гибкая
система поиска по товарам в виде многофункциональной формы-фильтра. Данный
фильтр может быть модифицирован из административной части сайта
индивидуально для каждой из категорий товаров. Таким образом, при появлении
новой категории продукции сотрудники магазина смогут быстро настроить наиболее
оптимальный фильтр. Это позволяет улучшить работу форму поиска, которая
благодаря фильтру будет всегда отражать актуальный набор параметров и
характеристик под каждый раздел Интернет-магазина.
64
Рисунок 17 — форма поиска по товарам
Для повышения лояльности покупателей и возможности проведения
различных акций был разработан и внедрен специальный функционал,
позволяющий добавить подарок к основному товару. Для автоматического
добавления подарка и его вывода на странице товара достаточно указать точный
идентификатор этого товара. Ознакомиться с наличием подарка можно на всех
этапах заказа — информация о нем будет прописана в отдельном блоке и будет
доступна каждому покупателю на каждой странице, начиная от страницы товара и
65
заканчивая накладной, предоставляемой после оплаты заказа. Внешняя форма
вывода подарка продемонстрирована на рисунке 18.
Рисунок 18 — блок с информацией о подарке
4.3 Настройка и первичное наполнение
Последним этапом разработки Интернет-магазина, который следует после
завершения работ по программированию, верстке и шаблонизации всего
функционала, является настройка системы управления и частичное наполнение
сайта.
На этом этапе система управления подстраивается под будущих сотрудников
Интернет-магазина, которым предстоит с ней активно взаимодействовать. От
правильной настройки системы во многом зависит скорость работы
администраторов сайта, минимизация возможных ошибок, возникающих на стадии
внесения и редактирования информации и заполнения ассортимента, связанных с
новостными статьями, представленными товарами и услугами, а также других
данных.
Обязательно проводится частичное наполнение сайта материалами заказчика,
для оценки работоспособности всего проекта в целом, визуальной подачи
информации. На этом этапе можно своевременно выявить возможные проблемы,
которые в дальнейшем могли бы препятствовать заполнению страниц Интернет-
магазина. Полезно будет и ознакомиться с видом представления информации:
насколько наглядно продемонстрированы товары, удобно ли размещены
фотографии и параметры товаров, быстро ли среди контента можно найти кнопки
добавления товаров в корзину, легко ли читаются добавленные статьи. [22]
4.4. Интеграция с системой 1С Предприятие 8
Интернет-магазины часто создаются в качестве дополнительного канала
продаж, который будет работать параллельно со складами, существующей
дилерской сетью и уже организованными розничными точками. Как правило, для
удобства сотрудников все каналы объединяются в единой системе учета и торговли,
такой как «1С: Предприятие».
Использование этой системы и ее интеграция в сайт обеспечивает
эффективную и бесперебойную работу Интернет-магазина. Она надежно работает
даже при большом количестве разнообразной продукции, которую необходимо
своевременно указывать в каталоге товаров на сайте, представляя покупателям
только актуальную информацию. Через систему легко контролируется наличие
товаров, быстро и в автоматическом режиме обрабатываются заказы пользователи.
И все это в полном соответствии с внутренними бизнес-процессами организации.
Выбранная раннее система управления DIAFAN.CMS имеет встроенную
поддержку синхронизации с «1С: Предприятие», проводя обмен данными по
направлениям, представленным на рисунках 19 и 20.
● Выгрузка продукции на сайт.
Рисунок 19 — схема выгрузки продукции на сайт
67
● Двусторонний обмен информацией о сделанных заказах.
Рисунок 20 — схема двустороннего обмена информацией о заказах
5. Ввод в действие
5.1. Настройка хостинга и перенос сайта
В отличие от виртуального хостинга, который предоставляется уже с
настроенным веб-сервером, VPS содержит лишь свежую чистую операционную
систему. Для нормальной работы необходимо дополнительно установить
программное обеспечение. Специалисты хостинг-провайдера могут провести
установку панели управления в качестве дополнительной опции, однако заказчиком
было принято решение провести самостоятельную установку и настройку панели
управления. В ее роли выступает бесплатно распространяемая Vesta CP. Среди ее
важных преимуществ стоит отметить простую установку, высокую надежность,
понятный и простой для пользователей интерфейс, широкий функционал.
Vesta CP включает несколько важных модулей:
1. Административный интерфейс, через который осуществляется
управление.
2. Web сервер на базе Apache.
3. Прокси сервер на базе Nginx.
4. Сервер баз данных MySQL.
5. Графический интерфейс для MySQL – PHPMyAdmin.
6. DNS сервер.
7. Систему резервного копирования.