Категория:
Опубликовано:

Форма быстрого заказа (#1 - Webform)

Форма быстрого заказа - Webform

Потребность в подобном функционале встречается чуть ли не в каждом проекте.

Нужен формат "Быстрого заказа", или форма "Задать вопрос" относящиеся к текущему материалу. То есть, администратору (или менеджеру) должно прийти письмо с информацией клиента, привязанной к конкретному материалу.

Первым делом на ум приходят всяческие платформы магазинов. Но это же сколько ненужного, лишнего кода будет задействовано ради небольшой фитчи? Так не пойдет!

Рассмотрим способ реализации подобного функционала с помощью модуля Webform.

Добавляем форму

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

Так же, для работы обязательно должен быть включен модуль Token.

После установки и включения модуля Webform, переходим к созданию формы.

На странице node/add/webform создаем новый материал "Быстрый заказ".

После сохранения материала попадаем на страницу настройки полей формы. Добавим нужные поля:

  • Имя - тип "Строка текста"
  • Телефон - тип "Строка текста"

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

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

Скрытое поле товар

В настройках поля устанавливаем значение по умолчанию, здесь нам понадобятся токены. Откроем список доступных:

Просмотр токенов

Нам нужен токен [current-page:query:?], его можно найти во вкладке "Текущая страница". С его помощью мы сможем заполнять поле значением из запроса текущей страницы. Если пока не понятно, дальше все объясню подробнее.

Нужный токен

Нам нужно заменить знак вопроса в токене на значение, которое мы позже будем передавать форме. Назовем его "product". Таким образом наш токен будет следующим: [current-page:query:product]. Именно его и запишем в значение по умолчанию. Скриншот настроенного поля.

Вывод формы в материале

Собстаенно, форма наша готова.

Можно перейти на страницу и увидеть её:

Просмотр формы

Как видите, есть поле "Имя" и "Телефон", а поле "Товар" - скрыто.

Форма быстрого заказа

Но это не совсем то, что нам нужно.

Оформим все следующим образом: на странице материала выведем блок со ссылкой "Заказать", по нажатию на которую будет всплывать окно с нашей формой.

В одном из прошлых постов я рассказывал как открывать ссылки в окне Colorbox. Сделаем все по этому же принципу.

Блок будем делать с помощью Views. Для этого переходим на страницу добавления нового представления (admin/structure/views/add). Создаем новое, по нужному типу материала, без страницы, только блок, с выводом 1-го значения, неформатированным списком состоящим из полей. Скриншот настройки представления.

По умолчанию, в представлении выводится 1 поле - Заголовок материала. Он нам и нужен, только вот внесем небольшие правки - отключим вывод поля ссылкой. Будем делать это немного иным образом.

Настройка заголовка

Открываем филдсет "Перезаписать результаты", там ставим галку "Заменить выводимое полем значение" и в качестве значения пишем "Заказать".

Ниже, отмечаем "Выводить это поле в виде ссылки", "Путь ссылки" = путь к нашей форме + параметр со значением поля заголовка. Тут наверно стоит немного объяснить:

В первом шаге мы делали форму и добавили скрытое поле для передачи в него названия материала. Мы дали ему название "product", его и нужно использовать в качестве названия параметра. А в качестве значения параметра мы передадим заголовок, поможет нам в этом токен поля (можно найти немного ниже - филдсет "Подстановочные шаблоны"). Параметр передается в URL с использованием знака вопроса ("?"), если нужно передавать несколько параметров - они присоединяются амперсандом ("&").
Ссылка на форму

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

/content/bystryy_zakaz?product=[title]

Перезаписать результат

Добавим класс ссылке для открытия в Colorbox'е:

Класс ссылки

Осталось добавить контекстный фильтр для идентификации материала.

Во вкладке "Расширенный" добавляем новый контекстный фильтр:

Добавить контекстный фильтр

Выбираем "Содержимое: Nid". В блоке "Когда значение фильтра НЕ доступно" отмечаем "Передать значение по умолчанию" -> "ID материала из URL".

ID материала из URL

Сохраняем фильтр и представление. Выводим блок в нужный регион на странице настройки блоков (admin/structure/block). При необходимости, настраиваем отображение на определенных страницах.

Дополнительно

Еще несколько моментов.

Для вывода ссылки на форму не обязательно использовать Views и блоки, можно любым другим, удобным Вам способом. Например в шаблоне материала, или используя Display Suite. Главное понять принцип работы.

Можно AJAX'ифицировать отправку форм из окна Colorbox, для этого понадобятся следующие модули:

Можно более детально настроить отправку сообщений о заказе модулями 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>
"мм" - причина неработоспосбности

Не проверял, но вероятнее всего проблема обсуждается здесь и тут.