Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.12.2013, 06:31
Новичок на форуме
Отправить личное сообщение для Witaly90 Посмотреть профиль Найти все сообщения от Witaly90
 
Регистрация: 20.12.2013
Сообщений: 1

Проблема с отображением уведомления о покупке
Здравствуйте!
Проблема вот в чем:
При нажатии на кнопку "Купить" нужно рядом вывести картинку(галочку), чтобы человек видел, что он добавил.
Пример
Все к чему я пришел это появление галочки только в div первого товара, подскажите пожалуйста, что нужно поменять в файле , чтобы выводить галочки возле тех товаров, которые купили?
Отрывок category.tpl
<div class="cart">
     <script type="text/javascript">
     function addQtyToCart(product_id) {
          var qty = $('.item-' + product_id).val();
         if ((parseFloat(qty) != parseInt(qty)) || isNaN(qty)) {
             qty = 1;
            }
                   addToCart(product_id, qty);
                 } 
</script>
               <input type="text" value="1" size="2" class="item-<?php echo $product['product_id']; ?>" />
                <input type="button" value="<?php echo $button_cart; ?>" onclick="addQtyToCart('<?php echo $product['product_id']; ?>');" class="button" />
      <div id="notification"></div>
	  </div>

Отрывок common.js
function addToCart(product_id, quantity) {
	quantity = typeof(quantity) != 'undefined' ? quantity : 1;

	$.ajax({
		url: 'index.php?route=checkout/cart/add',
		type: 'post',
		data: 'product_id=' + product_id + '&quantity=' + quantity,
		dataType: 'json',
		success: function(json) {
			$('.success, .warning, .attention, .information, .error').remove();
			
			if (json['redirect']) {
				location = json['redirect'];
			}
			
			if (json['success']) {
				$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '');
				
				$('.success').fadeIn('slow');
				
				$('#cart-total').html(json['total']);
				
				//$('html, body').animate({ scrollTop: 0 }, 'slow'); 
			}	
		}
	});
}

Буду бесконечно благодарен за любую помощь.
Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 05.01.2014, 07:31
Аватар для Zuenf
Кандидат Javascript-наук
Отправить личное сообщение для Zuenf Посмотреть профиль Найти все сообщения от Zuenf
 
Регистрация: 27.01.2012
Сообщений: 134

Можно передать в функцию-обработчик onclick ссылку на input и относительно его найти нужную галочку:
<input type="button" value="<?php echo $button_cart; ?>" onclick="addQtyToCart('<?php echo $product['product_id']; ?>', this);" class="button" />

Функции:
function addQtyToCart(product_id, elem) {
         var qty = $('.item-' + product_id).val();
         if ((parseFloat(qty) != parseInt(qty)) || isNaN(qty)) {
             qty = 1;
         }
         addToCart(product_id, qty, elem);
}


function addToCart(product_id, quantity, elem) {
	quantity = typeof(quantity) != 'undefined' ? quantity : 1;

	$.ajax({
		url: 'index.php?route=checkout/cart/add',
		type: 'post',
		data: 'product_id=' + product_id + '&quantity=' + quantity,
		dataType: 'json',
		success: function(json) {
			$('.success, .warning, .attention, .information, .error').remove();
			
			if (json['redirect']) {
				location = json['redirect'];
			}
			
		        if (json['success']) {
				var notification = $(elem).parent().find('.notification');
				notification.html('<div class="success" style="display: none;">' + json['success'] + '');
				
				notification.find('.success').fadeIn('slow');
				
				$('#cart-total').html(json['total']);
				
				//$('html, body').animate({ scrollTop: 0 }, 'slow'); 
			}	
		}
	});
}


Так же у тебя очень много ошибок/недочетов в html/css.
Например, notification должен быть class, а не id, а класс success имеет padding:10px; хотя лучше нормально задать width и height.
И на мой взгляд лучше оставить только notification(можно переименовать в success) ему задать бекгроунд в виде галочки и при ответе сервера просто показать его.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с отображением значка во время запроса ajax АлексТраст AJAX и COMET 2 06.07.2012 12:37
ajax уведомления (проблема) okapo AJAX и COMET 7 04.11.2011 10:56
Проблема с отображением в IE7 MCTrane Internet Explorer 1 24.07.2010 13:14
Проблема с отображением текушего дня в jquery.datepicker mstdmstd Events/DOM/Window 1 16.02.2010 08:23
jquery tabs (проблема с отображением) Extern Элементы интерфейса 0 16.03.2009 17:42