Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


baxabit

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=""

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

Надіслати
Поділитися на інших сайтах


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

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

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

 

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

Змінено користувачем samoylia
Надіслати
Поділитися на інших сайтах


  • 3 months later...

Добрый день!

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

версия 1.5.3.1

Надіслати
Поділитися на інших сайтах

  • 2 weeks later...

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

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

Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.