Сегодня я расскажу о том, как сделать красивое уведомление, в котором будет показываться информация об добавляемом товаре после добавления товаров в корзину в Drupal Commerce с помощью Ctools modal API.
Для начала, создадим вьюз, который будет принимать аргумент добавляемого товара и выводить информацию о нем. Это придаст гибкости и в случае необходимости изменения информации о товаре нам не надо будет лезть в код. Показывать сам вьюз я не буду - это будет маленькое домашнее задание.
После того, как создали вьюз, первым делом создаем модуль, который поможет решить поставленную задачу.
Первая функция, которая будет в нашем модуле это функция подключения всех необходимых библиотек:
/**
* Добавление js и css файлов для модального окна.
*/
function _example_include_modal() {
static $added = FALSE;
if (!$added) {
// Не добавлять библиотеки снова.
$added = TRUE;
// Подключаем Ctools библиотеки, которые нужны нам для задачи.
ctools_include('modal');
ctools_include('ajax');
ctools_modal_add_js();
// Создаем массив с настройками для модального окна.
$example_style = array(
'example-style' => array(
'modalSize' => array(
'type' => 'fixed',
'width' => (int) 550,
'height' => (int) 140,
'contentRight' => 30,
'contentBottom' => 0,
),
'modalOptions' => array(
'opacity' => (float) 0.8,
'background-color' => '#000000',
),
'closeText' => '',
'closeImage' => theme('image', array('path' => ctools_image_path('close-modal.png', 'example'))), // Картинка должна лежать в папке images нашего модуля.
'animation' => 'fadeIn',
'animationSpeed' => 'fast',
),
);
drupal_add_js($example_style, 'setting');
}
}
Следующим шагом для решения поставленной задачи будет написание альтера формы добавления товаров в корзину и навешивание своих обработчиков:
/**
* Implements hook_form_FORM_ID_alter().
*/
function example_form_commerce_cart_add_to_cart_form_alter(&$form, &$form_state) {
// Добавляем css класс для кнопки, чтобы сработали наши настройки для модального окна.
$form['submit']['#attributes']['class'][] = 'ctools-modal-example-style';
// Добавляем свой AJAX обработчик.
$form['submit']['#ajax'] = array('callback' => 'example_add_to_cart_ajax_callback');
// Добавляем свой обработчик после отправки формы.
$form['#submit'][] = 'example_add_to_cart_form_submit';
}
Теперь создадим AJAX обработчик:
/**
* AJAX обработчик добавления товаров в корзину.
*/
function example_add_to_cart_ajax_callback($form, &$form_state) {
// Подключаем библиотеки, необходимые для работы модального окна.
_example_include_modal();
// Убираем из вывода все друпалоские сообщения.
drupal_get_messages();
// Получаем обновленное содержимое корзины.
$cart_block = module_invoke('commerce_cart', 'block_view', 'cart');
// Формируем ссылки для закрытия модального окна и продолжения покупок,
// а так же кнопку для перехода в корзину. На самом деле эти кнопки можно и во вьюз всунуть.
$links = array();
$links[] = '<span class="cart-link-center"><span class="cart-link-left">' . l('Продолжить покупки', '', array('attributes' => array('class' => array('button', 'ctools-close-modal', 'cart-link-right')))) . '</span></span>';
$links[] = '<span class="cart-link-center"><span class="cart-link-left">' . l('Оформить заказ', 'cart', array('attributes' => array('class' => array('button', 'cart-link-right')))) . '</span></span>';
// Создаем рендерный массив, который потом отдадим в модальное окно.
$modal = array();
// Загружаем ранее созданный вьюз, первый параметр машинное имя вьюза, второй машинное имя дисплея,
// третий параметр это id добавляемого товара, который принимает вьюз в виде аргумента.
$modal['product']['#markup'] = commerce_embed_view('product_added_to_cart', 'master', array($form_state['values']['product_id']));
// Добавляем в рендерный массив ссылки, которые создали ранее.
$modal['actions'] = array(
'#theme' => 'item_list',
'#items' => $links,
'#attributes' => array(
'class' => array('cart-links'),
),
);
// Формируем команды для AJAX.
$commands = array();
// Обновляем содержимое корзины.
$commands[] = ajax_command_html('#block-commerce-cart-cart div.content', render($cart_block['content']));
// Выводим модальное окно. Первый параметр, заголовок модального окна, второй - его содержимое.
$commands[] = ctools_modal_command_display('Ваши покупки', render($modal));
return array('#type' => 'ajax', '#commands' => $commands);
}
И последнее, что нам надо сделать, это добавить обработчик отправки формы, после добавления товаров в корзину:
/**
* Обработчик отправки формы после добавления товаров в корзину.
*/
function example_add_to_cart_form_submit($form, &$form_state){
$form_state['rebuild'] = TRUE;
}
Результат
