Вопросна кнопке добавить в корзину модальное окно

Здравствуйте.
Подскажите, как реализовать такое: При нажатии кнопки "Добавить в корзину", появлялось модальное окно, с кнопками "перейти в корзину" "продолжить закупки". Пробовал по Вашему уроку логин в popup окне, окно выводится, но как его привязать к кнопке? Думаю, что есть методы проще, но не нашел. C Ajax только начал знакомиться. В общем надо как-то так: http://photics.ru/
Спасибо за любой ответ.

Комментарии

Аватар пользователя fagot
fagot написал:

Прицепмл к классу кнопки блок на jquery:

	$(document).ready(function() {
		var $dialog = $('<div></div>')
			.html('This dialog will show every time!')
			.dialog({
				autoOpen: false,
				title: 'Basic Dialog'
			});
 
		$('.node-add-to-cart').click(function() {
			$dialog.dialog('open');
			// prevent the default action, e.g., following a link
			return false;
		});
	});

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

25.06.2012 16:28
Аватар пользователя Angarsky
Angarsky написал:

Подробно объяснить не смогу, так как сейчас нету доступа к коду. Но надеюсь поймете по наводке :)
При загрузке страницы инициализируем jQuery UI Dialog - подключаем встроенную библиотеку Друпала. Далее альтерим форму с кнопкой добавления товара и навешиваем на нее ajax-обработчик, который через ajax command будет вызывать ваше диалоговое окно.
Если не получится, то завтра распишу подробнее, если меня не опередит хозяин блога :))

26.06.2012 00:38
Аватар пользователя Angarsky
Angarsky написал:

Подробно объяснить не смогу, так как сейчас нету доступа к коду. Но надеюсь поймете по наводке :)
При загрузке страницы инициализируем jQuery UI Dialog - подключаем встроенную библиотеку Друпала. Далее альтерим форму с кнопкой добавления товара и навешиваем на нее ajax-обработчик, который через ajax command будет вызывать ваше диалоговое окно.
Если не получится, то завтра распишу подробнее, если меня не опередит хозяин блога :))

26.06.2012 00:39
Аватар пользователя fagot
fagot написал:

Я так понимаю, что при загрузке страницы jQuery UI Dialog инициализируется у меня в temlate.tpl.php:

function mytheme_preprocess_page(&$vars) {
 {
    drupal_add_library('system', 'ui.dialog');
    drupal_add_library('system', 'effects.explode');
    drupal_add_library('system', 'effects.slide');
    $vars['cart_button'] = l(t('Cart'), 'user', array('attributes' => array('class' => array('block-4'))));
  }

А остальное, лучше на примере, если не затруднит. Не разбирался пока в этом, хотя пора.

26.06.2012 01:53
Аватар пользователя Angarsky
Angarsky написал:

Подключение библиотек:

function THEME_preprocess_html(&$vars) {
  drupal_add_library('system', 'ui.dialog');
  drupal_add_library('system', 'effects.blind');
}

Инициализация в JS-файле:

(function($) {
  $(document).ready(function() {
    $('#footer').append('<div id="dialog" title="Корзина"></div>');
    $("#dialog").dialog({ modal: true, autoOpen: false, show: "blind", hide: "blind", width: 500, resizable: false, draggable: false });
  });
})(jQuery);

Кастомный модуль, где альтерим форму:

function HOOK_form_alter(&$form, &$form_state, $form_id) {
  // Add ajax property to Add to Cart button
  if (strstr($form_id, 'commerce_cart_add_to_cart_form')) {
    $form['submit'] = array(
      '#value' => t('Add to Cart'),
      '#type' => 'submit',
      '#ajax' => array(
        'callback' => 'angarsky_ajax_cart_form',
        'wrapper' => 'block-commerce-cart-cart',
        'effect' => 'fade',
        'progress' => array('type' => 'throbber', 'message' => ''),
      ),
    );
  }
}
 
function HOOK_form($form, &$form_state){
  global $user;
  $order_id = commerce_cart_order_id($user->uid);
  $cart =  commerce_embed_view('commerce_cart_block', 'default', array($order_id));
  $commands = array();
 
  // The next line allows different quantities
  // to be submitted each time
  unset($form['quantity']['#value']);
 
  // Clear form and form state cache
  $form_state = form_state_defaults();
  $form_build_id = $_POST['form_build_id'];
  form_set_cache($form_build_id, $form, $form_state);
 
  $html = '<script>jQuery(document).ready(function(){jQuery("#dialog").dialog("open");});</script>';
 
  $commands[] = ajax_command_replace('#block-commerce-cart-cart .view-commerce-cart-block', $cart);
  $commands[] = ajax_command_replace('#block-commerce-cart-cart .cart-empty-block', $cart);
  $commands[] = ajax_command_html('#dialog', theme('status_messages') . '<p>Для указания контактного телефона и адреса доставки перейдите на страницу <a href="/checkout">оформления заказа</a>.</p>');
  $commands[] = ajax_command_after('#footer', $html);
  return array('#type' => 'ajax', '#commands' => $commands);
}

В коде есть немного лишнего, так как это из рабочего модуля для магазина на Commerce. Не уверен, что все грамотно, но у меня пока работает без сбоев :)

26.06.2012 15:33
Аватар пользователя fagot
fagot написал:

Что- то не выходит:
Подключил библиотеки

function my_theme_preprocess_html(&$variables) {
  if (!empty($variables['page']['featured'])) {
    $variables['classes_array'][] = 'featured';
  }
 
  if (!empty($variables['page']['triptych_first'])
    || !empty($variables['page']['triptych_middle'])
    || !empty($variables['page']['triptych_last'])) {
    $variables['classes_array'][] = 'triptych';
  }
 
  if (!empty($variables['page']['footer_firstcolumn'])
    || !empty($variables['page']['footer_secondcolumn'])
    || !empty($variables['page']['footer_thirdcolumn'])
    || !empty($variables['page']['footer_fourthcolumn'])) {
    $variables['classes_array'][] = 'footer-columns';
  }
 
  // Add conditional stylesheets for IE
  drupal_add_css(path_to_theme() . '/css/ie.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 7', '!IE' => FALSE), 'preprocess' => FALSE));
  drupal_add_css(path_to_theme() . '/css/ie6.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'IE 6', '!IE' => FALSE), 'preprocess' => FALSE));
  drupal_add_library('system', 'ui.dialog');
  drupal_add_library('system', 'effects.blind');  
}

2. JS-файл без изменений подключил в my_theme/info.
3. создал кастомный модуль tmodalwindow, где в tmodalwindow.info написал:

name = Tmodalwindow
description = Modal window when buying goods.
package = "Tpackage"
core = 7.x
version = "7.x-1.0"
files[]= tmodalwindow.module

В tmodalwindow.module изменил commerce на uc:

function HOOK_form_alter(&$form, &$form_state, $form_id) {
  // Add ajax property to Add to Cart button
  if (strstr($form_id, 'uc_cart_add_to_cart_form')) {
    $form['submit'] = array(
      '#value' => t('Add to Cart'),
      '#type' => 'submit',
      '#ajax' => array(
        'callback' => 'angarsky_ajax_cart_form',
        'wrapper' => 'block-uc-cart-cart',
        'effect' => 'fade',
        'progress' => array('type' => 'throbber', 'message' => ''),
      ),
    );
  }
}
 
function HOOK_form($form, &$form_state){
  global $user;
  $order_id = uc_cart_order_id($user->uid);
  $cart =  uc_embed_view('uc_cart_block', 'default', array($order_id));
  $commands = array();
 
  // The next line allows different quantities
  // to be submitted each time
  unset($form['quantity']['#value']);
 
  // Clear form and form state cache
  $form_state = form_state_defaults();
  $form_build_id = $_POST['form_build_id'];
  form_set_cache($form_build_id, $form, $form_state);
 
  $html = '<script>jQuery(document).ready(function(){jQuery("#dialog").dialog("open");});</script>';
 
  $commands[] = ajax_command_replace('#block-uc-cart-cart .view-uc-cart-block', $cart);
  $commands[] = ajax_command_replace('#block-uc-cart-cart .cart-empty-block', $cart);
  $commands[] = ajax_command_html('#dialog', theme('status_messages') . '');
  $commands[] = ajax_command_after('#footer', $html);
  return array('#type' => 'ajax', '#commands' => $commands);
}

Почитил кэш.
При попытке подключить модуль-ошибки

Fatal error: Maximum execution time of 360 seconds exceeded in E:\wamp\www\chaevick\includes\bootstrap.inc on line 3244
0.0028	445872	  {main}( )	               ..\index.php:0
3.7541	46533352  menu_execute_active_handler( )	..\index.php:21
3.7695	47502816  call_user_func_array ( )	..\menu.inc:516
3.7695	47503000  drupal_get_form( )	..\menu.inc:516
3.7695	47503464  drupal_build_form( )	..\form.inc:131
125.8594	55586016  drupal_process_form( )	..\form.inc:374
126.5833	60454696  form_execute_handlers( )	..\form.inc:854
126.5959	60456728  system_modules_submit( )	..\form.inc:1443
234.4219	66794424  drupal_flush_all_caches( )	..\system.admin.inc:1215
341.0551	66910512  menu_rebuild( )	..\common.inc:7289
353.2656	94831520  _menu_navigation_links_rebuild( )	..\menu.inc:2702
359.9969	97789784  menu_link_save( )	..\menu.inc:2841
360.0000	97793856  menu_cache_clear( )	..\menu.inc:3188
360.0000	97794040  drupal_static( )	               ..\menu.inc:2638

Это ему 360 сек не хватило, или все не так?

26.06.2012 21:14
Аватар пользователя fagot
fagot написал:

Я не написал Друпал 7 ubercart 3. Икорзина не нужна, просто блок. Помогите кто-нибудь.

26.06.2012 23:29
Аватар пользователя fagot
fagot написал:

Подскажите где копать

28.06.2012 03:00
Аватар пользователя yuzver
yuzver написал:

А посмотри этот модуль: http://drupal.org/project/modal_forms

Переопределить ссылку корзины через примеры, что ниже в модуле?

28.06.2012 15:09
Аватар пользователя Серж
Серж написал:

Пытаюсь сделать тот же фунционал в Commerce, но не выходит каменный цветок :(
Angarsky, можете поделиться рабочим модулем?

03.10.2012 00:46
Аватар пользователя Михаил
Михаил написал:

Так же был бы рад рабочему модулю для commerce

26.11.2012 17:53
Аватар пользователя kumusja
kumusja написал:

Commerce add to cart confirmation

20.02.2014 14:06

Комментировать