Кнопка "Купить в один клик" - Drupal Commerce

Во многих интернет-магазинах на странице товара кроме кнопки "Добавить в корзину" есть также кнопка "Купить в один клик". По нажатию на эту кнопку посетитель магазина может во всплывающем окне ввести свои данные , которые будут отправлены администратору вместе с данными о товаре. Таким образом сокращается количество активных действий для совершения заказа покупателем.

О пользе такой кнопки было написано в статье на хабре «Добавить в корзину» против «Купить в один клик»: результаты АБ-теста.

Чтобы реализовать подобный функционал без написания своего кастомного решения, есть контрибный модуль на drupal.org Commerce Buy One Click. Модуль добавляет к форме добавления товара в корзину кнопку "Buy now with 1-Click" ("Купить в один клик"), по нажатию на которую во всплывающем окне (fancybox) выводится форма, в которую покупатель вводит свои данные. По-умолчанию это имя и адрес электронной почты. После отправки формы на указанный в админке модуля e-mail приходят введенные покупателем данные и сведения о заказываемом товаре. Содержимое письма также конфигурируется на странице настройки модуля. При этом можно использовать токены , которые предоставляют содержимое введенных полей. API модуля позволяет в форму добавлять свои поля и затем создавать токены для данных полученных из этих полей.

Для установки и настройки модуля нужно:

1. Скачать и установить модули Drupal Commerce и Fancybox.
Для данного модуля обязателен модуль Commerce_cart, входящий в состав Drupal Commerce.

2. Скачать и установить модуль Commerce Buy One Click.

3. Перейти в админку модуля /admin/commerce/config/commerce_buy_one_click и сконфигурировать его.
В админке модуля можно задать содержимое письма отправляемого, e-mail адрес для отправки и список полей для вывода в форме заказа.

4. Все оформленные заказы будут доступны в админке /admin/commerce/orders и также отправлены по указанному e-mail адресу. Статус заказа в админке будет "В ожидании".

Для добавления своего поля в форму заказа нужно имплементировать hook_commerce_buy_one_click_form_alter(). К примеру добавим поле для ввода телефона:


/**
 * Implements hook_commerce_buy_one_click_form_alter().
 */
function MYMODULE(MYTHEME)_commerce_buy_one_click_form_alter(&$form) {
  $form['form_wrapper']['commerce_buy_one_click_phone'] = array(
    '#title' => t('Your phone'),
    '#type' => 'textfield',
    '#default_value' => '',
    '#weight' => 15,
    '#required' => TRUE,
  );
}

Для дополнительного поля добавим валидацию (для примера добавим проверку на заполнение данного поля):


/**
 * Implements hook_commerce_buy_one_click_form_validate_alter().
 */
function MYMODULE(MYTHEME)_commerce_buy_one_click_form_validate_alter(&$errors, $form, $form_state) {
  if (empty($form_state['values']['commerce_buy_one_click_phone'])) {
    $errors = t('Phone must not be empty.');
  }
}

Для добавления токена, принимающего значение поля с номером телефона, нужно имплементировать hook_commerce_buy_one_click_admin_email_data_alter():


function MYMODULE(MYTHEME)_commerce_buy_one_click_admin_email_data_alter(&$admin_email_data, $form, $form_state) {
  $admin_email_data['commerce_buy_one_click']['commerce-buy-one-click-phone'] = trim($form_state['values']['commerce_buy_one_click_phone']);
}

Для добавления токена в тело письма перейдем в админку модуля ( /admin/commerce/config/commerce_buy_one_click) и в поле "Содержимое" введем:


<p>Новый заказ в один клик  [site:name].</p>
<p>
<strong>Телефон заказчика:</strong>  [commerce-order:commerce-buy-one-click-phone]<br />
<strong>Имя заказчика:</strong> [commerce-order:commerce-buy-one-click-name]<br />
<strong>E-mail  адрес заказчика:</strong>  [commerce-order:commerce-buy-one-click-email]<br />
</p>
<p>Заказанный товар:</p> 
[commerce-order:commerce-buy-one-click-items]

В карточке товара добавиться кнопка "Buy now with 1-Click" ("Купить в один клик").

buy-one-click1.png

При нажатии на кнопку появится всплывающая форма, после заполнения которой отправится письмо администратору магазина и заказ появится в списке заказов (/admin/commerce/orders).

buy-one-click2.png

UPD. Вывести кнопку "Купить в один клик" можно также в блоке. Для этого нужно на странице /admin/structure/block добавить новый блок и в контент блока вставить следующий код (не забывая про формат ввода):


<div class="commerce-buy-one-click-button-wrapper">
  <div class="commerce-buy-one-click-button-product-id element-hidden">1</div>
  <div class="commerce-buy-one-click-button-add-product-to-cart element-hidden">1</div>
  <div class="commerce-buy-one-click-button-quantity element-hidden">1</div>
  <a href="#" class="commerce-buy-one-click-button">Buy one click block</a>
</div>


Так же есть возможность вывести кодом и во views. Для этого во вьюсе нужно сначала добавить поле "Commerce Product: Product ID", а затем добавить поле "Global: Custom text" и в секцию "Text" разместить код, используя токен [product_id]:


<div class="commerce-buy-one-click-button-wrapper">
  <div class="commerce-buy-one-click-button-product-id element-hidden">[product_id]</div>
  <div class="commerce-buy-one-click-button-add-product-to-cart element-hidden">1</div>
  <div class="commerce-buy-one-click-button-quantity element-hidden">1</div>
  <a href="#" class="commerce-buy-one-click-button">Buy one click</a>
</div>