Как сделать кнопку в modx
Как сделать кнопку в modx
Добро пожаловать на 4 урок MODX Revolution для новичков. На последнем занятии мы сделали некоторые настройки конфигурации сайта и посмотрели как выставлять некоторые глобальные установки. Также мы исследовали как устанавливать дополнения из репозитория MODX с помощью менеджера пакетов. В этой записи мы рассмотрим как работать с шаблонами в MODX Revolution. Мы собираемся начать со статичного HTML/CSS шаблона и через несколько уроков переделаем его в полноценный MODX Revolution шаблон.
Что такое MODX шаблоны?
MODX шаблоны это простые HTML/CSS шаблоны с тегами MODX внутри для динамичной функциональности. Это очень упрощенное определение, но в моей голове сложилось именно такое определения для MODX шаблона. Если вы знаете как программировать HTML/CSS или можете разобраться в таком коде, то остальное для вас не будет проблемой. Вот что делает MODX очень удобным для дизайнера.
Для этого урока я решил использовать тему студии Themeforest для своего сайта. Если вы хотите следовать точно моим шагам, то можете взять этот же шаблон или же взять другой шаблон, вашу собственную разработку либо скачанный с другого ресурса (в Google поищите ‘бесплатные css шаблоны’). Порядок действий для разработки шаблона будет аналогичным.
Первое, что я хочу отметить: способ построения шаблона показанный в этом уроке — это не единственный или единственноверный способ, это просто один из способов, которые я использую. MODX не ограничивает ни в том куда положить файлы или как разбивать шаблон… Как вам удобно, так вы и делайте ваш шаблон или как удобно вашему клиенту. Поэтому держите это в уме и можете отступать в порядке построения и изобретать свои более оптимальные способы, как говорится — делай как я, делай лучше меня.
1. Загрузка файлов шаблона
Любой шаблон содержит в себе много файлов – css файлов, яваскрипт, рисунков, флеш файлов… Все это нужно где-то хранить на вашем сервере, чтобы ваш шаблон имел к этим файлам доступ. Я предпочитаю хранить все файлы, которые относятся к шаблону в середине директории assets. Вы можете положить куда угодно и установить соответствующие пути в вашем шаблоне.
Распакованные файлы шаблона имеют приблизительно вот такую файловую структуру:
Таким образом 1 шагом в нашей разработке шаблона является копирование трех папок с файлами шаблона на сервер, это папки sample-data/, scripts/ и styles/. Я создал папку в середине assets и назвал ее templates, а также я создал папку 7in1, в которую поместил вышеназванные папки с файлами шаблона. Если вы запутались, то посмотрите на картинку и все станет понятно:
Теперь эти файлы доступны для любого шаблона, который вы будете делать.
2. Создание шаблона
После загрузки папок с файлами мы можем начать создание нашего MODX шаблона. В админке нажмите на вкладку Elements слева, откроется панель с различными элементами сайта — шаблонами, чанками, переменными шаблона и другими. Нажмем на templates и увидим, что уже есть в наличии один базовый шаблон с названием Base Template. Если вы на него нажмете, то вы можете увидеть код данного шаблона. Видим HTML код с тегами [[++site_name]], [[*pagetitle]].
Эти тэги трансформируют статичный HTML/CSS код в динамичный MODX шаблон и мы собираемся узнать как его сделать и приложить к этому свои руки.
Давайте продолжим и сделаем наш шаблон. Для создания нового MODX Revolution шаблона нажмите правой кнопкой мышки Templates, а далее New Template.
Можете также нажать на иконке New Template:
В следующем окне задайте название для вашего шаблона и описание. Вы можете разместить его в категории для лучшего порядка вашего сайта. Ну и как вы разместите элементы сайта зависит от вас и вашего вкуса. Я обычно создаю категорию для основного шаблона, где я сохраняю все шаблоны и чанки для этого шаблон, далее делаю то же самое для навигации и так далее. Вы можете организовать свой сайт по своему.
Для создания категории, нажмите правой кнопкой мыши на Categories в закладке Elements.
Ну вот можно добавить код в наш новый шаблон. Начнем мы с создания шаблона для главной страницы. Сейчас я могу сказать, что дизайн главной страницы будет отличаться от дизайна внутренних страниц, поэтому я назову этот шаблон каким-то своим именем, например «7in1 Home». Код домашней страницы находится в файле index.html в папке с шаблонами, которую мы загрузили с Themeforest, поэтому открываем этот файл в редакторе (я использую Notepad++) и копируем его содержимое в наш новосозданный шаблон в MODX. Можно (и это на мой взгляд даже более удобнее) отредактировать вначале код вне MODX Revolution и только потом перенести отредактированный код исправленного шаблона, но исходя из целей данного урока, все эти действия проведём внутри редактора MODX.
3. Отредактируйте пути
Поменяем в нашем коде пути к папкам шаблона. Мы скопировали наш шаблон в папку assets/templates/7in1. Поэтому нам нужно изменить пути ссылок к css файлам, js файлам, изображениям и др. на корректные пути на нашем сервере. Этот элемент вашей работы для ускорения можно сделать до того как копировать код шаблона в редактор MODX. Сейчас просто посмотрев на код, я могу сказать, что мне нужно искать папку styles/ и заменить ее на assets/templates/7in1/styles/, и так далее. Заменим все необходимые пути и сохраним наш шаблон. Вы можете обнаружить, что что-то упустили и есть ошибка в выводе страницы, поэтому возвращайтесь и снова откорректируйте пути.
4. Назначение шаблона
Итак мы закончили портирование шаблона, давайте назначим шаблон страницы и посмотрим, что же мы наделали. Для определения шаблона для страницы нам необходимо перейти на вкладку Resource и открыть ресурс для которого мы хотим определить шаблон (в нашем случае это страница Home). Если вы нажмете на поле Uses Template, то в выпадающем списке можно будет выбрать новый только что созданный нами шаблон.
После выбора шаблона нажмите Save появится сообщение о том, действительно ли вы хотите изменить шаблон, подтверждаем. Важность этого прояснится после того, как мы сделаем разные шаблоны, у которых будет множество чанков и переменных шаблона и которые мы по-разному разместим, поэтому вам необходимо быть уверенным в правильности выбора шаблона, ресурс для которого вы редактируете в данный момент.
После сохранение, мы можем просмотреть страницу и увидеть как она теперь выглядит. Вот снимок экрана, на котором видна верхняя часть страницы:
Как вы видите, наш сайт приобретает нужный вид, а мы всего лишь изменили пути к файлам. В то же время, контент, тег названия страницы, навигация и остальное — остались статичными, поэтому дальше мы начнем вставлять теги и использовать инструментарий MODX.
5. Синтаксис тегов MODX Revolution
Для того, чтобы сделать шаблон MODX Revolution динамичным, нам необходимо научится работать с тегами MODX. В движке MODX много различных тегов, которые можно использовать для создания и добавления изменяемых элементов контента на вашем сайте. Полный список доступных тегов MODX Revolution можно найти в руководстве. Если вы использовали до этого MODX Evolution, то вы поймете концепцию тегов, но все же вам необходимо посмотреть в документацию и усвоить новый синтаксис.
Если вы до этого никогда не использовали MODX, то не волнуйтесь, мы изучим как использовать эти теги в процессе построения сайта. Для начала посмотрите на таблицу сверху, на ней представлены синаксис тегов для разных версий MODX.
В данном уроке мы в основном будем использовать теги системных установок.
6. Изменения заголовка сайта в MODX Revolution
Первое, что мы сделаем — это изменим тег заголовка сайта, чтобы он выводил имя нашего сайта, а не имя шаблона, как сейчас:
Чтобы сделать это, нам нужно просто переместится в область кода, отвечающего за вывод заголовка сайта и заменить его системным тегом. Давайте взглянем на элемент нашего шаблона:
Нам нужно просто заменить текст Business Success в заголовке на системный тег, который передаст текущий заголовок сайта с наших системных настроек. Заменим таким образом Business Success на [[++site_name]]. Также сделаем еще одну вещь, тип переменных можно определить в системных настройках нашего сайта, поэтому заменим UTF-8 на [[++modx_charset]]. Таким образом приведенный выше код приобретёт следующий вид:
Сохраните шаблон и посмотрите на изменения: теперь заголовок сайта выводит имя нашего сайта.
Дополнительно, если вы посмотрите на код, вы увидите, что парсер MODX взял установки нашего сайта для типа данных и вставил динамически правильный тип данных.
Это случилось таким же образом как и с нашим шаблоном, но все происходит динамически и тип данных не является статической величиной.
Это сработает отлично, но снова вместо тяжело-набираемого адреса, лучше использовать тег системных настроек. Используем этот тег и код будет выглядеть так:
Теперь посмотрим исходный код сгенерированной MODX Revolution страницы и увидим, что парсер вставил правильный адрес сайта:
Ну что ж, на этом мы закончим. Мы сделали значительный прогресс и теперь у нас есть начальные знания в построении шаблона MODX Revolution. Мы увидели пример того как делаются начальные настройки, создали новый шаблон, добавили его в категорию и начали добавлять теги MODX Revolution для начала преобразования нашего статического шаблона в динамический шаблон MODX.
Следующий урок
В следующем мы продолжим работу над нашим динамичным шаблоном, поговорим подробнее о чанках, что они из себя представляют, как их использовать для упрощения и организации нашего шаблона и многое многое другое.
В этой статье рассмотрим, что такое сниппет и зачем он нужен в MODX Revolution. Познакомимся с тем, как осуществляется вызов сниппета, чем отличается кэшированный вызов сниппета от не кэшированного, а также как осуществляется настройка, т.е. передача параметров или набора параметров, сниппету.
Назначение и способы вызова сниппета
Отличается один способ вызова сниппета от другого только кэшированием.
Не кэшированный вариант вызова сниппета всегда возвращает текущие, полученные в результате выполнения кода, результаты. Применяется такой вариант вызова сниппета в тех случаях, когда он может вернуть при следующем запуске или в зависимости от некоторых других условий оличный (иной) результат. Не кэшированные вызовы сниппетов обычно используют для реализации системы авторизации на сайте, вывода блока комментариев и др.
В отличии от не кэшированного кэшированный вариант вызова сниппета в большинстве случаев возвращает результаты из кэша. Рассмотрим, как это работает. В момент вызова кэшированного сниппета, MODX сначала проверяет, есть ли результат его работы (ответ) в кэше. Если да, то использует его. В противном случае (если ответ сниппета не найден в кэше) запускает код этого сниппета на выполнение. Полученный в результате выполнения сниппета ответ, MODX не только использует для формирования содержимого ресурса (вывода), но также сохраняет его в кэш. После этого код сниппета уже не будет выполняться при формировании страницы, MODX просто будет использовать готовый результат его работы из кэша.
Кэшированный вариант вызова сниппета позволит не только снизить нагрузку на сервер, но также уменьшить время, необходимое для формирования страницы (ресурса), которую необходимо отдать пользователю. Поэтому на сайте где это возможно желательно использовать именно кэшированный способ вызова сниппета.
В каких элементах MODX можно вызвать сниппет с помощью тега?
Тег вызова сниппета можно размещать в чанках, шаблонах, TV-параметрах и полях ресурсов MODX Revolution.
Где расположены сниппеты в админке?
В админке CMF MODX Revolution все сниппеты расположены в разделе «Сниппеты». Данный раздел находится на левой панели во вкладке «Элементы».
Добавление (установка) новых сниппетов в систему MODX Revolution может осуществляться следующими способами:
Параметры сниппета
Например, выведем 7 последних тикетов (статей) из раздела 2, используя в качестве оформления каждого результата содержимое чанка tpl.Tickets.ticket.latest :
Наборы параметров
Управление наборами параметров в MODX Revolution осуществляется на странице «Наборы параметров». Для открытия данной страницы необходимо в верхнем меню админки нажать на значок шестерёнки и выбрать из открывшегося списка пункт «Наборы параметров».
Страница «Наборы параметров» состоит из 2 частей:
На этой странице можно не только увидеть имена наборов и связанные с ними параметры, но также создать новые наборы или отредактировать существующие.
Например, создадим новый набор параметров для сниппета TicketLatest :
Откроем страницу «Наборы параметров» (в главном меню админки значок «Шестерёнка»->Наборы параметров).
Нажмём на кнопку «Новый набор параметров». В открывшемся диалоговом окне «Создать набор параметров» введём в поля следующие значения:
Нажмём на кнопку «Сохранить».
Изменим значения необходимых параметров:
Нажмём на кнопку «Сохранить набор параметров».
Укажем созданный набор в теге вызова сниппета TicketLatest.
Параметр limit в этом примере будет иметь значение 10 вместо 7 (значение 7 имеет данный параметр в наборе html ).
Здравствуйте. Пытаюсь прикрутить сниппет на отправку значения с формы на Битрикс24.
Но как то странно себя ведёт. НЕ подтягивает почту. А при обновление страницы с пустой формой отправляет пустой лид. Может что то не так прикрутил )?
Создал сниппет Bitrix24.
[[!FormIt?
&hooks=`spam,email,redirect`
&emailTpl=`tpl.email.partners`
&emailTo=`nikola19900210@yandex.ru`
&emailSubject=`Заявка на партнерство`
&validate=`name:required,mail:required,phone:required`
&clearFieldsOnSuccess=`1`
&redirectTo=`40`
&submitVar=`submitPartner`
]]
Далее не менял код.
Получается что в шаблоне перед формой поставил вызов сниппета. Он вызывается. Отправляет Имя и Телефон а почту нет. Хотел посмотреть значение переменной POST но так и не получилось это сделать. Ответ «Комментарий» на сайте не появляется. Bitrix24 поставил в строчку: &hooks=`Bitrix24,spam,email,redirect`
Пока не понял почему не подтягивается. И толком подсказать не смогли
Спасибо. С панели инструментов в браузере посмотрел. Поля отправляются все на сервер. Вывел в консоль ошибок MODX ошибки по хуку. Куча ошибок. В основном 240.
Ошибки за один день. Для меня тёмный лес. Буду разбираться ).
MODX: Ajax форма обратной связи
Данная статья написана для версии MODX 2.7.1, но также проверена для версий ниже. Вплоть до 2.5.8. Думаю, данная статья будет актуальна долгое время для всей линейки версий от 2.0.0 до 3.0.0. Если это статья не актуальна, наврятли Вы вообще бы на нее попали.
Важно: если Вы не разбираетесь в MODX на базовом уровне: не знаете что такое чанки, сниппеты. Если Вы не знаете как написать на HTML форму обратной связи — закройте статью, почитайте где-нибудь об этом, тут такие базовые вещи даже не объясняются.
P.S: Если Вы вдруг не знаете что такое AJAX, рекомендуем прочитать другую нашу статью.
Практика: AJAX форма обратной связи на MODX
Давайте к делу. Все очень и очень просто. Просто будьте внимательны! Весь код рабочий, проверяли на себе не один раз.
Допустим, вот так выглядит наша форма.
Теперь для полноценной работы нам нужно установить два дополнительных расширения. Первое — FormIt. Второе — AjaxForm.
FormIt — Будет выполнять две функции. Отправлять само сообщение и хранить в себе шаблон (тело, внешний вид) самого сообщения.
AjaxForm — Это непосредственно модуль, который будет выполнить AJAX запрос. Это самая легкая часть в этом уроке.
Где скачать
Идем в workshop MODX. Вверху в панели управления (можно сразу скриншот смотреть, там все понятно) ищем “Пакеты” (На версиях постарее “Приложения”), выбираем “Установщик” и уже ниже жмем зеленую кнопку “Загрузить пакеты”.
Теперь (опять скриншот ниже, он всегда будет ниже пояснять вышеописанное) просто в строке поиска набираем нужный нам “плагин” и жмем загрузить. У нас кнопки “загрузить” нет, т.к модуль уже установлен.
После загрузки возвращаемся в “Установщик” (первый скриншот, до нажатия на кнопку “Загрузить пакеты”). Теперь у нас есть целый список наших “расширений”. Просто их устанавливаем.
У нас на скриншоте они уже установлены, у Вас будет написать “Установить” вместо “Деинсталировать”.
С установкой и загрузкой — все.
Установка формы обратной связи и подключение AJAX
На место формы вставляем следующий код:
Важно:После name:required, стоит пробел, чтобы строка переносилась в адаптивной версии сайта, уберите его. И если вдруг, по каким-то волшебным причинам он не заработает, тут два варианта. 1) Вы накосячили. 2) Что-то изменилось в модуле, смотрите официальную документацию, код мы брали оттуда.
Что это все значит, и что за что отвечает. Давайте по порядку:
[[!AjaxForm? — это сам модуль который мы используем.
Важно: &snippet=`FormIt` — это какой сниппет мы используем. Вы же скачали FormIt? Он просто будет отправлять запрос туда, т.е все сделает за нас.
Важно: &form=`ajaxForm` — здесь мы вписывание название чанка в котором будет храниться наша форма (). Т.е через 2-3 минуты мы приступим к созданию нового чанка. Название может быть любым, смотрите скриншот выше. Мы назвали наш чанк — ajaxForm.
Важно: &emailTpl=`email_tpl` — это шаблон письма. Также через 4-5 минут приступим к созданию нового чанка.
&hooks=`email` — Это хук, т.е мы объясняем модулю что идет отправка письма.
&emailSubject=`Тестовое сообщение` — Тут указывается тема письма. Если кто-то еще не понял — редактируем текст между кавычек ` `.
&emailTo=`info@domain.com` — Куда посылаем письмо.
&emailFrom=`modx@kolmogorov.pro` — От кого пришло. Можно указать любую почту.
&validate=`name:required,email:required,message:required` — Какие поля в нашей форме должны быть обязательно заполненными. Подробней рассмотрим позже, не переживайте!
&validationErrorMessage=`В форме содержатся ошибки!` — Ошибка, которая будет вылезать в правом верхнем углу страницы, если данные не отправлены по каким-то причинам.
&successMessage=`Сообщение успешно отправлено` — Тоже в правом верхнем углу, только сообщение об успешной отправке.
Создаем чанк с формой
Еще раз, просто создаем новый чанк, НО даем ему такое название, которое указано в &form=` `. В нашем случае это ajaxForm. Если не поняли, смотрите скриншот ниже.
Но прежде чем перенести форму в чанк, давайте внесем в нее кое-какие изменения. Смотрите:
1. Напишите перед каждым и
задайте атрибут name. Это делается для двух вещей.
А) Для того, чтобы мы потом могли получать “переменные” с текстом, который поместили (заполнили пользователи) в определенное поле. Заполнили телефон (поле с атрибутом name=”phone”), получили переменную [[+phone]]. Подробней через минуту разберемся.
Б) Это для нашего &validate=`name:required,email:required,subject:required`.
Допустим мы хотим сделать какое-то поле обязательным или нет. Например, Вы не хотите делать обязательным поле с атрибутом subject. Просто уберите subject:required из кода вызова Ajax запроса. Или Вы хотите сделать обязательным поле с атрибутом name= “phone” — просто добавляем phone:required в код вызова Ajax запроса. Будет так: &validate=`name:required,email:required,phone:required`
3) Присвойте всей форме класс AJAX FORM. Самый верх скриншота.
Теперь можно все сохранить и добавить в наш новый чанк ajaxForm (или как Вы там его назвали).
Созданием чанк с шаблоном письма
Снова, просто создаем новый чанк и называем его так, как указано в &emailTpl=«. В нашем случае это email_tpl.
Пишите в шаблоне что хотите, главное используйте необходимые “переменные” (так их назовем) для вывода информации в Ваше сообщение. И не забудьте сохранить чанк.
“Переменные” имеют такой вид [[+НАЗВАНИЕ]]. Где название это обозначение атрибута name в которые мы добавляли.
Наглядные примеры: инпут с name=”name” имеет переменную [[+name]], инпут с name=”phone” имеет переменную [[+phone]].
Важно: Вы можете создать любой атрибут name, даже name=”pupa” и получить переменную [[+pupa]].
Конец
Вот и все, наша форма уже готова. Можете проверять.
Спасибо за чтение. Надеюсь данная статья Вам поможет. Пожалуйста, оставляйте комментарии, будем поддерживать эту статью максимально долго и помогать друг другу. Наши технические специалисты (авторы блога) могут ответить на Ваши вопросы.