Модальное окно modx revo: Модальное окно. – AjaxForm MODX в модальном окне, popup

Leave a Comment / Разное / By /

Форма заказа обратного звонка на MODX Revo

Автор Алексей На чтение 6 мин. Опубликовано

Последнее изменение поста: 23 октября 2018 в 23:02

Практически не один современный коммерческий сайт не обходится без формы заказа звонка. Сегодня мы рассмотрим как по быстрому создать форму заказа обратного звонка, ну и заодно рассмотрим как поместить данную форму в модальное окно. Реализовывать форму обратной связи мы будем при помощи пакета Formit в связке с пакетом AjaxForm, установите их если они у вас не установлены.

Создание формы заказа обратного звонка на MODX Revo с разрешением на обработку персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006.

Первым делом создаем чанк, в котором будет хранится сама форма, пусть это будет чанк «obr-zvonok» и помещаем в него код стандартной формы, я в основном делаю сайты с использованием bootstrap, так что возьму стандартную заготовку немного переделанную, ее статический код будет таким:

<form>
 <div>
  <input type="text" name="name" required="" placeholder="Ваше имя*" value="">
 </div>
 <div>
   <input type="text" name="phone" required="" placeholder="Ваш телефон*" value="">						    
 </div>
<div>
    <label>
      <input type="checkbox" required=""> Согласен на обработку персональных данных
    </label>
</div>
<p>Ставя отметку, я даю свое согласие на обработку моих персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и принимаю условия <a href="#" rel="nofollow" target="_blank">Пользовательского соглашения</a></p>
 <div>
  <input type="submit" value="Жду звонка!">
 </div>
</form>

Вот здесь вы можете посмотреть другие формы getbootstrap.com/css/#forms

Переделаем его в динамический:

<form method="post">
 <div>
  <input type="text" name="name" required="" placeholder="Ваше имя*" value="[[+fi.name]]">
  <span>[[+fi.error.name]]</span>
 </div>
 <div>
   <input type="text" name="phone" required="" placeholder="Ваш телефон*" value="[[+fi.phone]]">
   <span>[[+fi.error.phone]]</span>						    
 </div>
<div>
    <label>
      <input type="checkbox" required=""> Согласен на обработку персональных данных
      <span></span>
    </label>
</div>
<p>Ставя отметку, я даю свое согласие на обработку моих персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и принимаю условия <a href="[[~48]]" rel="nofollow" target="_blank">Пользовательского соглашения</a></p>
 <div>
  <input type="submit" value="Жду звонка!">
 [[+fi.success:is=`1`:then=`<div>[[+fi.successMessage]]</div>`]]
 [[+fi.validation_error:is=`1`:then=`<div>[[+fi.validation_error_message]]</div>`]]
 </div>
</form>

Теперь создаем еще один чанк, который будет формировать письмо, назовем его tpl-obr-zvonok со следующим содержимым:

<h4>Позвоните клиенту, он заказал обратный звонок:</h4>
<p>Имя: [[+name]]</p>
<p>Телефон: [[+phone]]</p>

Ну и сталось сделать вывод в нужном месте:

[[!AjaxForm?
  &snippet=`FormIt`
  &form=`obr-zvonok`
  &emailTpl=`tpl-obr-zvonok`
  &hooks=`spam,email`
  &emailSubject=`Заказ обратного звонка с сайта [[++site_url]]`
  &emailTo=`[email protected]`
  &validate=`name:required,phone:required`
  &validationErrorMessage=`В форме содержатся ошибки!`
  &successMessage=`Сообщение успешно отправлено!`
]]

Не забудьте заменить email.

Документация по компонентам:

  1. FormIt — docs.modx.com/extras/revo/formit
  2. AjaxForm — docs.modx.pro/components/ajaxform

Форма заказа обратного звонка на MODX Revo в модальном окне.

Тут в принципе все просто, за основу берем тот же bootstrap:

<!-- Button trigger modal -->
<button type="button" data-toggle="modal" data-target="#myModal"> Заказать звонок </button>

<!-- Modal -->
<div tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div role="document">
    <div>
      <div>
        <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&amp;times;</span></button>
        <h5>Modal title</h5>
      </div>
      <div>
        ...
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>

getbootstrap.com/javascript/#modals

Кнопку выводим в нужном месте:

<button type="button" data-toggle="modal" data-target="#myModal">Заказать звонок </button>

Для модального окна создаем отдельный чанк и помещаем в него код модального окна и вызова самой формы:

<!--noindex-->
<div tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 <div role="document">
  <div>
   <div>
    <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h5>Оставьте Ваши контакты:</h5>
   </div>
   <div>
    <div>
	[[!AjaxForm?
           &snippet=`FormIt`
           &form=`obr-zvonok`
           &emailTpl=`tpl-obr-zvonok`
           &hooks=`spam,email`
           &emailSubject=`Заказ обратного звонка с сайта [[++site_url]]`
           &emailTo=`[email protected]`
           &validate=`name:required,phone:required`
           &validationErrorMessage=`В форме содержатся ошибки!`
           &successMessage=`Сообщение успешно отправлено!`
        ]]
   </div>
  </div>
 </div>
 </div>
</div>
<!--/noindex-->

Ну и выводим этот чанк ближе к закрытию body.

Вот в принципе и все!

Все о компьютерах — Модальная форма обратной связи в MODx Revolution

Доброго времени суток, дорогой читатель! В этой статье я хотел бы поделиться с Вами опытом в создании формы обратной связи на сайте, используя модальное окно Twitter Bootstrap и HTML5. Для обработки формы я буду использовать сниппет MODx Revolution — FormIt.

Подготовка

Устанавливаем дополнение FomIt и Bootstrap для MODx Revolution. Теперь создадим чанк с текстом письма, которое будет отправляться как уведомление на почту. Назовем его emailChunk , сохраним его в категории FormIt, чтобы потом было легко его найти, и вставим простой HTML код:

<strong>[[+name]] заказал обратный звонок на сайте:</strong><br />
<p>Пользователь оставил свой номер телефона [[+phone]] для связи с ним.</p>

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

Создание модального окна и кнопки Twitter Bootstrap

В тело страницы вставляем HTML код кнопки, при нажатии на которую будет выходить модальное окно Twitter Bootstrap:

<button type="button" data-toggle="modal" data-target="#phoneModal" data-whatever="">Заказать звонок</button>

и HTML код модального окна, которое включено в форму:

 <form action="[[~[[*id]]]]" method="post" enctype="multipart/form-data" role="form">
<div tabindex="-1" role="dialog" aria-labelledby="phoneModalLabel" aria-hidden="true">
<div>
<div> 
<div>
<button type="button" data-dismiss="modal"><span aria-hidden="true">&times;</span><span>Закрыть</span></button>
<h5>Заказать звонок</h5>
 </div>
<div> 
<div>
<div><label for="name">Имя [[!+fi.error.name]]</label></div>
<input type="text" name="name" value="[[!+fi.name]]" />
</div>
<div>
<div><label for="phone">Телефон [[!+fi.error.phone]]</label></div>
<input type="tel" name="phone" data-format="+7 (ddd) ddd-dddd" value="[[!+fi.phone]]" pattern="(\+[\d\ \(\)\-]{16})" />
</div> 
</div>
<div>
<button type="button" data-dismiss="modal">Закрыть</button>
<input type="submit" name="submit_button" value="Заказать звонок">
</div> 
</div>
</div>
</div>
</form>

В этом примере я использовал валидацию номера телефона с помощью Bootstrap Formhelpers Phone (подробнее):

  • type=»tel» —  указывает хелперу с каким полем работать;
  • data-format="+7 (ddd) ddd-dddd"
    — здесь указываем формат и правило заполнения номера;
  • pattern="(\+[\d\ \(\)\-]{16})"—  здесь происходит проверка правила.

В каждом текстовом поле можно указать свойство required. Браузер, использующий HTML5, оповестит пользователя о необходимости заполнить это поле.

<input type="text" name="name" value="" required />

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

Вызов сниппета FormIt

Итак, после всех приготовлений, мы дошли до сути статьи. Берем код вызова сниппета и вставляем (Обязательно!) его выше формы:

[[!FormIt? &hooks=`email,redirect` &submitVar=`submit_button` &emailSubject=`Заказ обратного звонка на сайте` &emailTpl=`emailChunk` &emailTo=`[email protected]` &redirectTo=`1` &validate=`name:required,phone:required`]]

 А теперь все по порядку:

  • &hooks=`email,redirect` — здесь подключаются хуки сниппета. В нашем случае хук «email» отправляет письмо, хук «redirect» перенаправляет на другую страницу. Они начинают свою работу только после успешной обработки формы, т.е. не вывелась ни одна ошибка.
  • &submitVar=`submit_button` — в нашем случае это свойство не обязательно. Но обязательно, когда вы будете использовать несколько форм на одной странице.
  • &emailSubject=`Заказ обратного звонка на сайте — заголовок письма.
  • &emailTpl=`emailChunk` — текст письма. Чанк, который мы создали ранее.
  • &emailTo=`[email protected]` — электронный почтовый ящик, куда будет отправлять хук «email» все письма с этой формы.
  • &redirectTo=`1` — ID документа (страницы), куда будет перенаправлять хук «redirect».
  • &validate=`name:required,phone:required`
     — валидация (проверка) заполнения полей name и phone.

Проверочный код (captcha)

Если вам понадобится ввод проверочного кода, то здесь поможет recaptcha от Google. Заходим, регистрируемся, вводим доменное имя и получаем публичный и секретный ключи.

Заходим в настройки системы, в фильтре выбираем «formit» и в поле formit.recaptcha_private_key вставляем секретный ключ, а в поле formit.recaptcha_public_key — публичный ключ.

После идем к вызову сниппета и добавляем через запятую хук «recaptcha» в лист &hooks=`email,redirect,recaptcha`.

Теперь подправим HTML код формы с модальным окном, в него нужно будет добавить вызов параметров сниппета:

[[+formit.recaptcha_html]]
[[!+fi.error.recaptcha]]

Первый поместит область с проверочным кодом в тело окна, второй — выведет ошибки, если они будут.

Обработка формы без перенаправления

Если Вы хотите, чтобы пользователь оставался на этой же странице, удалите из списка хуков хук «redirect» и удалите свойство &redirectTo. В замен установите свойство &successMessage, в котором должен содержаться текст. В тело документа (страницы) поместите параметр [[!+fi.successMessage]]

На этом моя статья заканчивает, надеюсь она помогла Вам. До новых встреч!

Если у Вас появились ко мне вопросы по данной статье, задавайте их в комментариях ниже.

быстрый просмотр в модальном окне. / Русскоязычное сообщество MODX

QuickView — быстрый просмотр любого элемента в модальном окне.


— работа с любыми ресурсами
— работа с чанками, сниппетами, шаблонами
— вывод в модальное окно, либо в указанный селектор
— поддержка шаблонизатора fenom

Основное отличие от ранних версий работа без каких либо сниппетов, нужно только инициализировать скрипт.
Интерактивные примеры тут quickview.vgrish.ru/

Примеры


пример 1

Постановка:
— требуется по клику вывести в модальное окно чанк test
— задействовать ресурс с идентификатором 1
— добавить кнопку закрыть окно

Вызов:

<a
			data-click
			data-quickview-mode="modal"
			data-data-action="chunk"
			data-data-element="test"
			data-data-id="1"
			data-dialog-buttons='["close"]'
			>ссылка</a>

пример 2

Постановка:
— требуется по клику вывести в модальное окно сниппет корзины msCart
— требуется широкое модальное окно

Вызов:

<a
			data-click
			data-quickview-mode="modal"
			data-data-action="snippet"
			data-data-element="!msCart"
			data-dialog-size="size-wide"
			data-dialog-title="cart"
			>корзина</a>

пример 3

Постановка:
— требуется по клику вывести в модальное окно чанк msProduct.content
— задействовать ресурс с идентификатором 7

Вызов:

<a
			data-click
			data-quickview-mode="modal"
			data-data-element="msProduct.content"
			data-data-id="7"
			data-dialog-title=""
			data-dialog-size="size-wide"
			>продукт</a>

пример 4

Постановка:
— требуется по наведению вывести в селектор чанк test
— задействовать ресурс с идентификатором 1
— добавить кнопку закрыть окно

Вызов:

<a
			data-mouseover
			data-quickview-mode="selector"
			data-data-action="chunk"
			data-data-element="test"
			data-data-id="1"
			data-quickview-output=".quickview-output-1"
			data-output-buttons='["close"]'
			>наведите</a>

пример 5

Постановка:
— требуется список продуктов minishop
— по клику вывести модалку с продуктом test
— задействовать актуальный ресурс
— добавить кнопку соседи

Вызов:

<div
			data-quickview-mode="modal"
			data-data-action="chunk"
			data-data-element="product.quickview"
			data-quickview-loop="true"
			data-quickview-viewhash="true"
			data-dialog-size="size-wide"
			data-dialog-buttons='["prev","next"]'>

			[[!pdoPage?
			&parents=`0`
			&element=`msProducts`
			&tpl=`@INLINE
			<a
			data-click
			data-data-id="[[+id]]"
			data-dialog-title="[[+pagetitle]]"
			>[[+pagetitle]]</a>
			`
			]]

			[[!+page.nav]]</div>

пример 6

Постановка:
— вывести в модальном окне чанк msProduct.content
— задействовать bootstrap-modal, без bootstrap-dialog

Вызов:

<a
			data-click
			data-toggle="modal"
			data-target=".bs-modal"
			data-quickview-mode="selector"
			data-quickview-output=".bs-quickview-output"
			data-data-element="msProduct.content"
			data-data-id="7"
			>ссылка</a>

Также необходимо тело модалки, куда по клику в селектор будет подгружен результат

Код:

<div>
	<div>
		<div>
			<div></div>
		</div>
	</div>
</div>

Подключение QuickView


В удобном месте шаблона сайта вам нужно вставить вызов сниппета QuickView.initialize
[[!QuickView.initialize?
&bootstrapModalJsCss=`0`
&bootstrapDialogJsCss=`1`
&services=`miniShop2,msoptionsprice`
]]
Примечание!

— для подгрузки скриптов и стилей bootstrap-modal нужно указать

&bootstrapModalJsCss=`1`
— для подгрузки скриптов и стилей bootstrap-dialog нужно указать
&bootstrapDialogJsCss=`1`
— для подгрузки скриптов и стилей сторонних пакетов нужно перечислить их
services=`miniShop2,msoptionsprice`

Настройка QuickView


Основные настройки QuickView находяться Настройки системы -> QuickView

allowed_chunk — список разрешенных чанков
allowed_snippet — список разрешенных сниппетов
allowed_template — список разрешенных шаблонов

front_css — стили фронтенда
front_js — скрипты фронтенда

Основное


Вы можете использовать QuickView где угодно на странице. Для этого нужно подключить сниппет
QuickView.initialize, указать нужным элементам необходимые параметры вызова.

Примечание!

data-quickview-mode — режим работы, modal или selector

data-data-action — действие, chunk, snippet, template
data-data-element — название элемента
data-data-id — идентификатор обрабатываемого ресурса

data-dialog-* — параметры вывода при модальном окне

data-output-* — параметры вывода при селекторе

Режим срабатывания


data-click
режим срабатывания по клику

Вызов:

<a
			data-click
			...</a>
data-mouseover
режим срабатывания по наведению

Вызов:

<a
			data-mouseover
			...</a>

Режим работы


data-quickview-mode
modal — режим работы с модальным окном

Вызов:

<a
			data-click
			data-quickview-mode="modal"
			...</a>
data-quickview-mode
selector — режим работы с селектором

Вызов:

<a
			data-click
			data-quickview-mode="selector"
			...</a>

Действия


data-data-action
chunk — работа с чанком

Вызов:

<a
			data-click
			data-data-action="chunk"
			...</a>
data-data-action
snippet — работа со сниппетом

Вызов:

<a
			data-click
			data-data-action="snippet"
			...</a>
data-data-action
template — работа с шаблоном

Вызов:

<a
			data-click
			data-data-action="template"
			...</a>

Кнопки


data-*-buttons
задать необходмые кнопки. Доступны prev,next,close

Вызов:

<a
			data-click
			data-dialog-buttons='["prev","next"]'
			...</a>
кастомизация
задать необходимые параметры
<a
			data-mouseover
			data-quickview-mode="modal"
			data-data-element="test"
			data-data-id="1"
			data-dialog-buttons='[
			{"action":"close","label":"закрыть","title":"закрыть"}
			]'
			>наведите</a>

Меняем вид всплывающих сообщений Ajaxform (Modx Revo)

Автор Алексей На чтение 2 мин. Опубликовано

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

Изменение стилей и положения всплывающего окна Ajaxform 

AjaxForm для стилизации окон использует стили jGrowl, которые лежат в assets/components/ajaxform/css/lib/jquery.jgrowl.min.css, можно поправить все прямо там, но если вы обновите компонент, то и стили ваши обновятся на дефолтные, следовательно их лучше предопределить в своем css.

к примеру положение окна по дефолту заданно вот таким стилем

.jGrowl.top-right {
    top:0;
    right:0; 
}

те прижато к верху и правой стороне

чтобы сменить положение, к примеру по центру, достаточно предопредилить их в своем css, к примеру так:

.jGrowl.top-right {
    top:40% !important;
    width:30% !important; 
    left:35% !important; 
}

И точно таким же образом можно изменить весь внешний вид окошко с уведомлением, вот мой конечный код для одного из сайтов:

#jGrowl {
    font-size:18px;
    margin:0px 12px 0; 
}
.jGrowl.top-right {
    left:35% !important; 
    top:35% !important;
}
#jGrowl .jGrowl-notification {
    position: relative;
    width: 320px;
    padding: 15px;
    text-align:center;
    background: none repeat 0 0 #fff !important;
    box-shadow: 0 0 0 7px #8ab933 !important;
    border: 0px solid rgba(255, 255, 255, 0.49) !important;
}
#jGrowl .jGrowl-notification .jGrowl-close {
    position: absolute;
    right: 4px;
    top: 4px;
    color: #8ab933 !important;
}
#jGrowl .jGrowl-notification .jGrowl-message {
    color:#8ab933 !important;
}

в итоге всплывает вот такое окошко по центру сайт.

новый вид уведомляшки в аякс форм

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *