Результат смотрите по ссылке belteh.com.ru. А в статье мы расскажем, какие работы мы выполнили.
Структура сайта
Разработали прототип, написали тексты, нарисовали дизайн для главной страницы, страницы каталога и карточки товара.На главной странице представлена информация о компании, схема работы, условия доставки и оплаты, форма заявки и слайдер с популярными товарами, о реализации которого напишем подробнее.
На странице каталога представлен список товаров в виде карточек со ссылками на страницу товара.
При переходе на конкретный товар мы попадаем в его карточку, в которой представлены характеристики и общее описание, а также форма заказа.
Базовые настройки cms
После разработки прототипа, дизайна и верстки трех страниц (главная, страница каталога, страница товара) установили MODX и перешли к настройке.Мы использовали следующие возможности cms MODX:
- расширения (дополнения или сниппеты);
- чанки;
- дополнительные поля;
- отдельные шаблоны для главной страницы и карточки товара.
- включили и настроили ЧПУ;
- убрали расширение .html для страниц;
- установили необходимые дополнения;
- настроили транслитерацию псевдонимов.
В нашем шаблоне мы использовали чанки head, header и footer (блок, шапка и подвал сайта).
Например, чанк head содержит следующий код:
Этот же чанк мы взяли в шаблоне карточки товара. Чанки удобны тем, что при использовании на сайте одинаковых блоков не приходится на каждой странице или в каждом шаблоне дублировать код этих блоков, достаточно прописать вызов чанка. Редактировать код тоже не придется в каждом месте отдельно.
Меню настроили с помощью дополнения Wayfinder. Его вызов выглядит следующим образом: [[!Wayfinder? &startId=`0` &level=`1`]].
Также в шаблоне есть элементы, которые необходимо было выводить только на внутренних страницах, например, хлебные крошки. Для вывода хлебных крошек – дополнение Breadcrumbs. Также мы использовали phx-модификаторы (фильтры параметров): [[*id:ne=`1`:then=`код`:else=`код`]].
Список расширений и краткое описание
Выше мы упомянули о дополнениях – это компоненты или плагины, которые помогают расширить функционал cms. Устанавливаются они через админку:При начальной настройке cms мы устанавливаем дополнения, которые позволяют удобно управлять разработкой и редактированием контента. Например, ТinyMCE – визуальный редактор, благодаря которому не нужно работать с кодом при редактировании контента. Все довольно просто и удобно:
Дополнение 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 в настройках сайта.
И создаем карту сайта – sitemap.xml с помощью сниппета Google Site Map.
Олег 21.09.2017 14:09 #
1. Базовые настройки cms
У вас для главной свой шаблон? Тогда для чего в общем шаблоне вот это?
Это не говоря уже о том, что у Breadcrumbs есть параметр showCrumbsAtHome, который сделает то же самое, только без мусора в коде. И почему некешированным вызываете сниппет?
Тут тоже [[++site_url]] кешированным можно вызвать.
В теге изящнее можно:
Опять некешированный вызов. Зачем?
Слайдер.
Ух, это жестко. А если манагеру надо добавить/удалить слайд? В шаблон лезть нужно?
parents по умолчанию id ресурса, нет смысла указывать [[*id]]
Ну покажите скрипты-то =)
Не очень понятно, для чего использовать динозавров типа Wayfinder, Breadcrumbs, getResources, если можно поставить pdoTools, который во-первых, обычно работает быстрее, во-вторых, нужно ставить/обновлять одно единственное дополнение вместо нескольких.
Еще момент — вы картинки в карточке товара и в каталоге уменьшаете стилями, причем картинка максимального размера нигде не используется — везде она отображается в уменьшенном виде. Почему phpthumb не использовали для вывода картинки в требуемом разрешении? В данном случае не особо критично, но после того, как манагер зальет новые красивые картинки 6000*8000px — будет весело (нет) =)
Влад 22.09.2017 14:57 #
там даже есть коммент хороший «давайте я расскажу как в туалет хожу. что за бред я ща прочитал???»
Сервис 1PS.RU 26.09.2017 06:53 #
По поводу следующего замечания, как вариант — добавить дополнительный параметр (чек-бокс) в карточке товара «показывать в слайдере на главной»:
Скрипты для отправки данных с формы заявки:
Павел Романов 26.09.2017 15:15 #
Андрей Казунин 22.09.2017 15:28 #