Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

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


Recommended Posts

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

Тема давняя и забытая походу, и нашёл только для ветки 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=""

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

Link to comment
Share on other sites


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

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

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

 

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

Edited by samoylia
Link to comment
Share on other sites


  • 3 months later...

Добрый день!

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

версия 1.5.3.1

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.