Весной 2016 года к нам обратился клиент, которому нужен был сайт по продаже горно-шахтового оборудования. Поскольку не требовалось настраивать онлайн-продажи с сайта через корзину и с личным кабинетом пользователя, а только представить каталог товаров с возможностью оформить заявку, мы выбрали cms MODX revo.

Результат смотрите по ссылке belteh.com.ru. А в статье мы расскажем, какие работы мы выполнили.

Структура сайта

Разработали прототип, написали тексты, нарисовали дизайн для главной страницы, страницы каталога и карточки товара.

На главной странице представлена информация о компании, схема работы, условия доставки и оплаты, форма заявки и слайдер с популярными товарами, о реализации которого напишем подробнее.

На странице каталога представлен список товаров в виде карточек со ссылками на страницу товара.

При переходе на конкретный товар мы попадаем в его карточку, в которой представлены характеристики и общее описание, а также форма заказа.

Базовые настройки cms

После разработки прототипа, дизайна и верстки трех страниц (главная, страница каталога, страница товара) установили MODX и перешли к настройке.

Мы использовали следующие возможности cms MODX:
  • расширения (дополнения или сниппеты);
  • чанки;
  • дополнительные поля;
  • отдельные шаблоны для главной страницы и карточки товара.
После установки cms выполнили следующие настройки:

  • включили и настроили ЧПУ;
  • убрали расширение .html для страниц;
  • установили необходимые дополнения;
  • настроили транслитерацию псевдонимов.
Следующий этап – создание общего шаблона. В MODX можно создать любое количество шаблонов и применять к каждой странице отдельный. Мы использовали отдельные шаблоны для главной и для страницы товара. Общий шаблон выглядит так:

Код шаблона

В нашем шаблоне мы использовали чанки head, header и footer (блок, шапка и подвал сайта).

Например, чанк head содержит следующий код:

Блок head

Этот же чанк мы взяли в шаблоне карточки товара. Чанки удобны тем, что при использовании на сайте одинаковых блоков не приходится на каждой странице или в каждом шаблоне дублировать код этих блоков, достаточно прописать вызов чанка. Редактировать код тоже не придется в каждом месте отдельно.

Меню настроили с помощью дополнения Wayfinder. Его вызов выглядит следующим образом: [[!Wayfinder? &startId=`0` &level=`1`]].

Также в шаблоне есть элементы, которые необходимо было выводить только на внутренних страницах, например, хлебные крошки. Для вывода хлебных крошек – дополнение Breadcrumbs. Также мы использовали phx-модификаторы (фильтры параметров): [[*id:ne=`1`:then=`код`:else=`код`]].

Список расширений и краткое описание

Выше мы упомянули о дополнениях – это компоненты или плагины, которые помогают расширить функционал cms. Устанавливаются они через админку:

Установка дополнений

При начальной настройке cms мы устанавливаем дополнения, которые позволяют удобно управлять разработкой и редактированием контента. Например, ТinyMCE – визуальный редактор, благодаря которому не нужно работать с кодом при редактировании контента. Все довольно просто и удобно:

Редактирование страниц в визуальном редакторе

Дополнение Ace удобно для работы с кодом, оно подсвечивает теги:

Подсветка кода с помощью расширения Ace

Translit используем совместно с настройками ЧПУ – при создании новой страницы автоматически генерируется ЧПУ на латинице, исходя из заголовка страницы:

Автоматическая генерация ЧПУ

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

Главная страница

На главной странице, кроме информации о компании и схемы работы, есть слайдер с популярными товарами.

Слайдер популярных товаров

Он формируется из карточек товаров с помощью расширения getResources. Вызов выглядит следующим образом:

Сниппет для отображения слайдера

В двойных квадратных скобках указывается название вызываемого расширения, а после вопросительного знака – параметры вызова. В данном случае это шаблон, по которому будут выводиться слайды, id-страниц, с которых будет выводиться информация, и включено отображение tv-параметров (дополнительные поля в карточках товаров).

GetResources предоставляет очень большие возможности для разработки сайта на MODX, с его помощью можно настроить самый разнообразный функционал на сайте, что делает cms расширяемой. Документация по getResources на русском языке.

Часто совместно с этим расширением используется getPage для настройки постраничного вывода страниц. В нашем случае лимит вывода страниц был указан «0», то есть на странице выводятся все результаты выполнения запроса, но бывает, что результатов очень много и удобней настроить их отображение постранично, то есть, например, на каждой странице будет выводиться по 10 результатов, страницы можно переключать с помощью пагинации.

Страница каталога

На странице каталога выводятся товары с помощью того же getResouces:

Сниппет для вывода каталога

Выводятся все дочерние ресурсы страницы каталога:

Дочерние ресурсы каталога

Шаблон вывода товаров довольно простой: ссылка на товар, изображение и название.

Чанк вывода товара в каталоге

Вид товаров в каталоге

Карточка товара

Для вывода товара мы создали отдельный шаблон.

Шаблон страницы товара

Помимо чанков и общих полей, в шаблоне выводятся дополнительные поля товаров:

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

Создание дополнительного поля для изображения товара

Указываем название нового поля и параметры ввода, в данном случае – изображение.

Выбираем тип ввода

Еще нужно на вкладке «Доступно для шаблонов» отметить шаблоны страниц, для которых будем выводить это поле. В шаблоне выводим значение этого поля вот таким образом – [[*image]].

Все дополнительные поля отображаются при создании/редактировании страниц на вкладке «Дополнительные поля»:

Дополнительные поля на странице товара в админке

В результате мы получаем вот такую страницу:

Страница товара

Заявка на товар оформляется через форму, никаких дополнительных плагинов для ее создания не использовали, поскольку форма довольно простая, и для клиента не было необходимости менять в ней какие-то поля. Отправка данных осуществляется на php. С формы на почту владельца сайта приходит письмо с указанием названия товара и заполненных данных.

Дополнительные настройки

Поиск на сайте реализован с использованием расширения SimpleSearch. В месте, где необходимо вывести форму поиска, пишется вот такой код:, параметр &landing=`11` указывает на страницу результатов поиска, то есть на страницe с id=11. На самой странице вывода результатов поиска прописываем следующую строчку [[!SimpleSearch]]. Можно указать дополнительные параметры для формы поиска и для вывода результатов. Например, задать индивидуальные шаблоны, страницы, в которых будет осуществляться поиск (по умолчанию поиск идет по всем страницам), задать сортировку результатов поиска и т.д. Официальная документация SimpleSearch »

Также мы обязательно создаем страницу 404 ошибки, указываем ее id в настройках сайта.

Настройка страницы 404 ошибки

И создаем карту сайта – sitemap.xml с помощью сниппета Google Site Map.

Заключение

Создать сайт на MODX не так уж и сложно, в cms имеется много возможностей для реализации различного функционала. При разработке сайта компании «БелТех» мы использовали самый простой функционал, но получили довольно удобный сайт как для администратора сайта, так и для посетителей.