Эффект полета изображения товара в корзину для OpenCart v.1.5.1.3
- Stats: 2499 0
- Author: admin
- Category: Статті
- Comments: Комментариев нет
В CMS OpenCart версии какая выше 1.4.9.х отсутствует эффект полета изображения товара в корзину. Мы решили описать как сделать эффект полета картинки товара из карточки продукта в корзину для версии OpenCart 1.5.1.3
Для того, что бы появился «эффект полета» нужно изменить немного один файл:
catalog/view/theme/default/template/product/product.tpl
Найдите следующий код примерно от строки 330
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<br /> <script type="text/javascript">// <![CDATA[ $('#button-cart').bind('click', function() { $.ajax({ url: 'index.php?route=checkout/cart/update', 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();<br /><br /> if (json['error']) { if (json['error']['warning']) { $('#notification').html(' <div class="warning" style="display: none;">' + json['error']['warning'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div> <br />');<br /><br /> $('.warning').fadeIn('slow'); }<br /><br /> for (i in json['error']) { $('#option-' + i).after('<span class="error">' + json['error'] + '</span>'); } } <br /><br /> if (json['success']) { $('#notification').html(' <div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div> <br />');<br /><br /> $('.success').fadeIn('slow');<br /><br /> $('#cart_total').html(json['total']);<br /><br /> $('html, body').animate({ scrollTop: 0 }, 'slow'); } } }); }); // ]]></script> <br /> |
И замените его вот на этот код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<br /> <script type="text/javascript">// <![CDATA[ $(document).ready(function(){ $('#button-cart').bind('click', function() { $.ajax({ url: 'index.php?route=checkout/cart/update', 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']['warning']) { $('#notification').html('<br /><div class="warning" style="display: none;">' + json['error']['warning'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div> <br />'); $('.warning').fadeIn('slow'); } for (i in json['error']) { $('#option-' + i).after('<span class="error">' + json['error'] + '</span>'); } } if (json['success']) { $('#notification').html('<br /><div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div> <br />'); $('.success').fadeIn('slow'); $('#cart_total').html(json['total']); var image = $('#image').offset(); $('.cart-module').html(json['output']); if($(".cart-module").length > 0){ var cart = $('.cart-module'); var cart_offset = cart.offset(); }else { var cart = $('#cart'); var cart_offset = cart.offset(); } $('#image').before('<img src="' + $('#image').attr('src') + '" id="temp" style="position: absolute; z-index:9999; top: ' + image.top + 'px; left: ' + image.left + 'px;" />'); params = { top : cart_offset.top + 'px', left : cart_offset.left + 'px', opacity : 0.0, width : cart.width(), height : cart.height() }; $('#temp').animate(params, 'slow', false, function () { $('#temp').remove(); }); } } }); }); }); // ]]></script> <br /> |
Это все нужные действия, чтобы создать полет картинки товара в корзину.
Протестирован метод на версиях OpenCart 1.5.1.3 и сборке ocStore 1.5.1.3
Рабочий пример можно посмотреть тут
Отправить ответ