Проблема с отображением уведомления о покупке
Здравствуйте!
Проблема вот в чем: При нажатии на кнопку "Купить" нужно рядом вывести картинку(галочку), чтобы человек видел, что он добавил. Пример Все к чему я пришел это появление галочки только в 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'); } } }); } Буду бесконечно благодарен за любую помощь. Спасибо! |
Можно передать в функцию-обработчик 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) ему задать бекгроунд в виде галочки и при ответе сервера просто показать его. |
Часовой пояс GMT +3, время: 22:03. |