AJAX и document.ready() или набей посты с пользой

NinoZombie

Постоялец
Регистрация
27 Окт 2013
Сообщения
118
Реакции
29
Здравствуйте, уважаемые шарящие форумчане.
Видимо я совсем дубовый в этом JavaScript, не могу уже сутки, казалось бы простую задачу решить...
Слезно прошу Вас помочь мне в решении, хотя бы направить на верный путь.

ИСХОДНЫЕ ДАННЫЕ:
Есть страница карточки товара, на которой имеются кнопки выбора опций товара (напр. красный или желтый) и кнопка "Добавить в корзину". При нажатии на кнопку "Добавить в корзину" происходит само добавление и вывод уведомления посредством pnotify . При нажатии на кнопку выбора опции происходит обновление цены товара и его наличия.
Также имеется в каталоге товаров на каждом товаре кнопочка "Быстрый просмотр", которая вызывает мини-страницу карточки товара со всеми кнопками во фрейме (magnificPopup вроде).

ЗАДАЧА:
Сделать так, чтобы при нажатии на кнопку выбора опции проверялось наличие товаров выбранной опции на складе:
Если количество товара = 0 , то заменить кнопку "Добавить в корзину" на кнопку "Оформить предзаказ" (при нажатии на такую кнопку должен выскакивать colorbox и просить ввести имя и тел)
Если количество товара > 0, то оставить все как есть.

ПРОБЛЕМА:
Блин! При добавлении кнопке "Добавить в корзину" необходимого класса и смене надписи на ней
Код:
$('#button-cart').addClass("fast_order");
$('#button-cart .button-cart-text').html("ОФОРМИТЬ ПРЕДЗАКАЗ");
почему-то отвязываются все события, привязанные к кнопке через функцию document.ready(), из-за чего кнопка становится нерабочей :(((
И если в странице товара я выкрутился путем отвязки от кнопки всех функции и привязывании их заново прямо в AJAX запросе

if (json.btn==1) {
$('#button-cart').unbind();
$('#button-cart').addClass("fast_order");
$('#button-cart .button-cart-text').html("ОФОРМИТЬ ПРЕДЗАКАЗ");
$('.fast_order').colorbox({href:"#fast_order_form",inline:true, width:"650px", height:"330px", title:" "});
$('#fast_order_form .fast_order_center button').unbind();
$('#fast_order_form .fast_order_center button').bind('click',function () {
var product_name = $('#product_name').val();
var product_price = $('#product_price').val();
var customer_name = $('#customer_name').val();
var customer_phone = $('#customer_phone').val();
var customer_message = $('#customer_message').val();
$('#result').html('Обрабатываем введенные данные..');
$.post('./fast_order.php', { 'product_name': product_name, 'product_price': product_price, 'customer_name': customer_name, 'customer_phone': customer_phone, 'customer_message': customer_message }, function (data) { if (data == 'empty') { $('#fast_order_result').html('<span class="fast_order_error">Обязательно укажите ваше имя и телефон, иначе мы не сможем вам перезвонить!</span>'); } else { $('#fast_order_result').html('<span class="fast_order_success">Ваш заказ успешно оформлен!</span><br /><span>Мы перезвоним вам в течение дня. <a onclick="$(window).colorbox.close();">Закрыть</a> это окно?</span>'); } });

});

} else {
$('#button-cart').removeClass("cboxElement fast_order");
$('#button-cart').unbind();
$('#button-cart').bind('click', function() {
if ($('.hide-cart .right .cart.outofstock').length) {
return false;
}
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
dataType: 'json',
success: function(json) {
$('.success, .warning, .attention, information, .error').remove();

if (json['error']) {
if (json['error']['option']) {
for (i in json['error']['option']) {
$('#option-' + i).after('<span class="error">' + json['error']['option'] + '</span>');
}
}

if (json['error']['profile']) {
$('select[name="profile_id"]').after('<span class="error">' + json['error']['profile'] + '</span>');
}
}

if (json['success']) {
if (!Journal.showNotification(json['success'], json['image'])) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
}

$('.success').fadeIn('slow');

$('#cart-total').html(json['total']);

$('html, body').animate({ scrollTop: 0 }, 'slow');

if (json['redirect']) {
location = json['redirect'];
}
}
}
});
});
$('#button-cart .button-cart-text').html("В КОРЗИНУ");
}

, то в мини-странице товара ("Быстрый просмотр") такой трюк не работает :((
Добавление товара в корзину происходит, а вот уведомления или colorbox не всплывают...
В консоли пишет, что $.pnotify и colorbox становятся неопределенными (undefined) именно после нажатия на кнопки выбора опций. Почему так происходит, при чем тут они, если я их никак не обнуляю в скрипте, я совершенно не понимаю....
Если вызывать окно быстрого просмотра у товара, у которого нет опций, то все работает как по маслу (насчет колорбокса только хз)

ПРЕДПОЛАГАЕМОЕ МНОЙ РЕШЕНИЕ:
A. Нужно каким-то образом заново определить переменные pnotify и colorbox при выборе опции, по аналогии с привязкой к кнопке функции добавления в корзину
Б. Нужно каким-то образов перезагрузить мини-страничку (фрейм), чтобы все эти треклятые document.ready() функции заново сработали и при этом опция осталась выбранной

Собственно прошу Вашего мнения по поводу сложившейся ситуации.

Вычитал, что можно применять метод .on вместо метода .bind для привязывания функции к кнопке, но что-то так и не понял, может ли он мне помочь?


Пациент . На главной странице можете потыкать на кнопочку "Быстрый просмотр" у iPod Classic (товар с опциями)
Заранее спасибо!
Обещаю сделать пожертвование в копилку форума в случае решения проблемы здесь.
 
Последнее редактирование:
Пока что решил проблему с pnotify, сделав вот так

Кажется, что это жутко плохой костыль, что как-то по-другому это все можно сделать...
Ну и плюс с colorbox ом не совсем понятно как это сделать - у него нет такой функции :(
 
С колорбоксом разобрался, достаточно было просто его подключить жестко в хедере фрейма.
Ну неужели эти костыли - наиболее правильное решение? Может быть все таки можно по-другому?
 
Назад
Сверху