Форма быстрого заказа (#1 - Webform)
Потребность в подобном функционале встречается чуть ли не в каждом проекте.
Нужен формат "Быстрого заказа", или форма "Задать вопрос" относящиеся к текущему материалу. То есть, администратору (или менеджеру) должно прийти письмо с информацией клиента, привязанной к конкретному материалу.
Первым делом на ум приходят всяческие платформы магазинов. Но это же сколько ненужного, лишнего кода будет задействовано ради небольшой фитчи? Так не пойдет!
Рассмотрим способ реализации подобного функционала с помощью модуля Webform.
Добавляем форму
Для примера, сделаем форму быстрого заказа. Нам понадобятся поля, в которые пользователь будет вводить свое имя и контактный телефон. А так же поле, в котором мы будем передавать название товара, который пользователь заказывает.
Так же, для работы обязательно должен быть включен модуль Token.
После установки и включения модуля Webform, переходим к созданию формы.
На странице node/add/webform создаем новый материал "Быстрый заказ".
После сохранения материала попадаем на страницу настройки полей формы. Добавим нужные поля:
- Имя - тип "Строка текста"
- Телефон - тип "Строка текста"
Оба поля делаем обязательными. В настройках можно оставлять все как есть.
Теперь главное - добавляем скрытое поле, в которое будем передавать название товара:
В настройках поля устанавливаем значение по умолчанию, здесь нам понадобятся токены. Откроем список доступных:
Нам нужен токен [current-page:query:?], его можно найти во вкладке "Текущая страница". С его помощью мы сможем заполнять поле значением из запроса текущей страницы. Если пока не понятно, дальше все объясню подробнее.
Нам нужно заменить знак вопроса в токене на значение, которое мы позже будем передавать форме. Назовем его "product". Таким образом наш токен будет следующим: [current-page:query:product]. Именно его и запишем в значение по умолчанию. Скриншот настроенного поля.
Вывод формы в материале
Собстаенно, форма наша готова.
Можно перейти на страницу и увидеть её:
Как видите, есть поле "Имя" и "Телефон", а поле "Товар" - скрыто.
Но это не совсем то, что нам нужно.
Оформим все следующим образом: на странице материала выведем блок со ссылкой "Заказать", по нажатию на которую будет всплывать окно с нашей формой.
В одном из прошлых постов я рассказывал как открывать ссылки в окне Colorbox. Сделаем все по этому же принципу.
Блок будем делать с помощью Views. Для этого переходим на страницу добавления нового представления (admin/structure/views/add). Создаем новое, по нужному типу материала, без страницы, только блок, с выводом 1-го значения, неформатированным списком состоящим из полей. Скриншот настройки представления.
По умолчанию, в представлении выводится 1 поле - Заголовок материала. Он нам и нужен, только вот внесем небольшие правки - отключим вывод поля ссылкой. Будем делать это немного иным образом.
Открываем филдсет "Перезаписать результаты", там ставим галку "Заменить выводимое полем значение" и в качестве значения пишем "Заказать".
Ниже, отмечаем "Выводить это поле в виде ссылки", "Путь ссылки" = путь к нашей форме + параметр со значением поля заголовка. Тут наверно стоит немного объяснить:
Таким образом, наша ссылка будет выглядеть так:
/content/bystryy_zakaz?product=[title]
Добавим класс ссылке для открытия в Colorbox'е:
Осталось добавить контекстный фильтр для идентификации материала.
Во вкладке "Расширенный" добавляем новый контекстный фильтр:
Выбираем "Содержимое: Nid". В блоке "Когда значение фильтра НЕ доступно" отмечаем "Передать значение по умолчанию" -> "ID материала из URL".
Сохраняем фильтр и представление. Выводим блок в нужный регион на странице настройки блоков (admin/structure/block). При необходимости, настраиваем отображение на определенных страницах.
Дополнительно
Еще несколько моментов.
Для вывода ссылки на форму не обязательно использовать Views и блоки, можно любым другим, удобным Вам способом. Например в шаблоне материала, или используя Display Suite. Главное понять принцип работы.
Можно AJAX'ифицировать отправку форм из окна Colorbox, для этого понадобятся следующие модули:
- Webform Ajax
- Clientside Validation (если есть обязательные поля)
Можно более детально настроить отправку сообщений о заказе модулями Rules и Mime Mail.
Можно настроить SMS-оповещение клиентов и/или менеджеров об успешном оформлении заказа. Для менеджера это не затерянный в почте заказ, для клиента - показатель уровня Вашей компании.
Если Вам нужно сделать то же самое, но модулем Entityform - Вам нужен топик "Форма быстрого заказа (#2 - Entityform)".
Комментарии
ой спасибо тебе, добрый человек!
А в чем может быть проблема, если нет в списке доступных токенов вебформы такого, как [current-page:query:?]
Вот, что есть:
Basic tokens
%username - The name of the user if logged in. Blank for anonymous users.
%useremail - The e-mail address of the user if logged in. Blank for anonymous users.
%ip_address - The IP address of the user.
%site - The name of the site (i.e. Название компании)
%date - The current date, formatted according to the site settings.
Node tokens
%nid - ID материала.
%title - The node title.
Special tokens
%profile[key] - Any user profile field or value, such as %profile[name] or %profile[profile_first_name]
%get[key] - Tokens may be populated from the URL by creating URLs of the form ]]>http://example.com/my-form?foo=bar]]>. Using the token %get[foo] would print "bar".
%post[key] - Tokens may also be populated from POST values that are submitted by forms.
In addition to %get and %post, the following super tokens may be used, though only with logged-in users: %server, %cookie, and %request. For example %server[HTTP_USER_AGENT] or %session[id].
Пробовал %title но тогда он присылает на почту заголовок самой формы...
Разобрался.
%get[name]
В чем может быть проблема, когда любой токен отображает не адрес или параметр страницы, с которой вызвана веб форма, а адрес самой формы?
Форма готова, теперь надо сделать ссылку к этой форме, да и еще к этой ссылке приписать параметр product, в котором будет записано наименование товара. Оформим эту ссылку в виде отдельного блока, который будет размещаться внизу ноды каждого товара. Спасибо за статью! А как можно реализовать тоже самое только чтоб значение полей вытягивались из страницы с вьюшкой?
Поясните что Вы имеете ввиду под
А главное - зачем это?
Это очень круто, спасибо, бро!! Вроде мыслил в том же направлении, но у тебя, с переопределением ссылки во вьюхе, круче.
Хорошая методика, спасибо! Не первый раз пользуюсь. Но вот у меня это все не работает в Internet Explorer 11. У вас тоже? Можно пример на любом сайте, где вы это делали?
Из всего что используется - только колорбокс. Он вполне кроссбраузерный. Возможно, где-то в теме косяк.
Я подобные техники не использую уже несколько лет. Даже не вспомню проект в котором это еще используется.
Вы знаете я это проверил на нескольки сайтах с разными темами.
Оказывается т.обр в IE не обрабатываются кирилические ссылки. Т.е. так работает:
<a class="colorbox-node" href="/forma-zakaza?razmer=3 mm">Заказать</a>
а так нет:
<a class="colorbox-node" href="/forma-zakaza?razmer=3 мм">Заказать</a>
"мм" - причина неработоспосбности
Не проверял, но вероятнее всего проблема обсуждается здесь и тут.