Полёт картинки товара в корзину при нажатии кнопки "Купить"

[baxabit]

На просторах рунета нашёл способ визуализации покупки товара, путём "полёта" картинки товара в корзину.

Тема давняя и забытая походу, и нашёл только для ветки 1.5.1.3 (напоминаю, данный способ уже для 1.5.3.1 и 1.5.4.1 !!!)

Затем, порывшись, нашёл-таки адаптацию под 1.5.3.1

Тестил на 1.5.4.1

 

Итак.

В файле catalog/view/theme/<ваша тема>/template/product/product.tpl

заменяем кусок кода

<script type="text/javascript"><!--
$('#button-cart').bind('click', function() {
$.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'][i] + '</span>');
     }
    }
   }
  
   if (json['success']) {
    $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/<ваша тема>/image/close.png" alt="" class="close" /></div>');
    
    $('.success').fadeIn('slow');
    
    $('#cart-total').html(json['total']);
   
    $('html, body').animate({ scrollTop: 0 }, 'slow');
   }
  }
});
});
//--></script>

Меняем на

<script type="text/javascript"><!--
$(document).ready(function(){
$('#button-cart').bind('click', function() {
$.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'][i] + '</span>');
}
}
}
 
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>');
 
$('.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>

В строке

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

не забываем заменить название своего шаблона

[baxabit]

\\

[samoylia]

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

$('#temp').animate(params, 'slow', false, function () {  чтобы было меньше чем slow).

Кстати, когда делается много кликов на кнопку "Купить" - изображения накладываются друг на друга (если нажимать пару раз в секунду). Помогите с этими проблемками пожалуйста, по форуму аналогичных вопросов не нашел.. (версия 1.5.4.1)

 

Разобрался..

Змінено 22 квітня 2013 користувачем samoylia

[klaos27]

Добрый день!

Не получилось :(

версия 1.5.3.1

[VolK]

Работает только когда со страницы товара покупаешь.

[afwollis]

cmd еще раньше все это расписал: https://opencartforum.com/topic/16777-animatciia-tovara-po-napravleniiu-k-korzine/

и там поживее было обсуждение в своё время.

[werd51]

готовый модуль тут