Анимация товара по направлению к корзине

[cmd]

JS функцию вызывать в callback добавления товара в корзину на странице товара:

function animateImageToCart() {

imagePosition = $('#image').position(); // получаем позицию изображения
cartPosition = $('#cart').position(); // получаем позицию корзины
cartPosition.left = cartPosition.left + ( $('#cart').width() / 2 ); // если корзина справа, то плюсуем, чтобы получить центр, иначе минусуем
cartPosition.top = cartPosition.top + ( $('#cart').height() / 2 ); // формальность
$('body').prepend('<div id="imageToCart"><img src="'+ $('#image').attr('src') +'"></div>'); // вставляем картинку в самом низу страницы

// моментально накладываем нашу новую картинку поверх существующей
$('#imageToCart img').css({
 'position': 'absolute',
 'z-index': '1999',
 'left': imagePosition.left + 'px',
 'top': imagePosition.top + 'px',
 'width': $('#image').width() + 'px',
 'height': $('#image').height() + 'px'
});

// поехала анимация в направлении корзины
$('#imageToCart img').animate({
 top: '0px',
 left: cartPosition.left + 'px',
 opacity: '0',
 width: $('#image').width() / 3,
 height: $('#image').height() / 3
 }, 1000, function() {
 $('#imageToCart').remove();
 });
}

[noVe]

Спасибо.

[Metrik]

а в каком файле прописуется данный код?

[zteprk]

а в каком файле прописуется данный код?

Хотелось бы тоже чуточку подробней.

в каком файле и после чего вставить данный код.

спасибо!

[cmd]

Ну, например, в product.tpl есть функция добавления товара в корзину. В callback вставить вызов animateImageToCart(). Только же не забудьте объявить animateImageToCart.

[kegel]

cmd Вот если бы Вы ответили так, как ответили Вам в этой теме в посте №8 http://javascript.ru/forum/showthread.php?p=175122#post175117

то и Вам бы отвечали на это примерно так, как по выше выложенной ссылке пост №9, а не так. как в этой теме. Спасибо!

[cmd]

kegel, если бы вопрос был от человека с кармой 100, то я бы тоже не пожалел 10 минут на подробные комментарии. А вообще, создание самодельных хуков и вызывать функцию это задачи немного разной сложности. В последнем случае сложность практически нулевая. Что Вам не понятно в фразе "вызвать функцию в callback"? Строку назвать? Или Google скрывает информацию о том, что такое callback в ajax запросе?

Я вообще этот код по просьбе noVe выложил... Он понял - вот и отлично. Думаю не только он.

[kegel]

в какой строке это понятно, а вот как вызвать функцию animateImageToCart() в callback ($('#button-cart').bind('click', function() {

$.ajax({...не понятно. Если не трудно, хотелось бы узнать.

[cmd]

Вызов это

animateImageToCart()

. Это и есть вызов. т.е. название и две скобочки. Перед тем как что-то вызывать нужно что-то объявить. Объявление - см первый пост.

Самое забавное в этом, то что я могу 100 раз повторить одно и тоже разными словами, но найдется какой-то вопрошающий, который не поймет или не прочтет. А ещё 10 останутся недовольны потому, что слишком сложно объяснил... :-D

[kegel]

Дело в том что с главной страницы анимация не работает, зашел в товар, там все ок. Вот что в заблуждение ввело. Интересно почему с главной не работает? +

вродь дошло, надо в каждом модуле телодвижения повторять значит. Хотя не факт, направьте в нужное русло.

[cmd]

Так там и не будет работать так просто... Чтобы работало с главной надо... Ну, например, перехватывать положение курсора и редактировать функцию addToCart() в common.js... Я это на коленке написать не могу.

[cmd]

Хотя не надо нифига перехватывать. Просто onclick надо навешивать через JS, а не через HTML. И не будет проблем.

/*Тут передаем привет разработчикам OC */

[kegel]

Просто onclick надо навешивать через JS, а не через HTML.

Попробовал с модулем рекомендуемые, пока не получилось. Хотя ж должно

[foruss]

Попробовал с модулем рекомендуемые, пока не получилось. Хотя ж должно

не должно и не будет.

[kegel]

не должно и не будет.

А если быть точнее? Как тогда это реализовать?

[alexeyll]

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

[ikarus]

прикольно, спасибо :)

[ikarus]

Хотя не надо нифига перехватывать. Просто onclick надо навешивать через JS, а не через HTML. И не будет проблем. /*Тут передаем привет разработчикам OC */

жаль только с этим не разобрался :( .... как все таки его навешивать??

[ikarus]

для анимации в категориях сделал путем добавления id="product_id" к картинкам, ну и в самой функции анимации

вместо #image надо эти id использовать.... красотень теперь... и кстати теперь в модулях таких как акции и пр. достаточно картинкам добавить id="product_id" :)

[kegel]

ikarus

Не могли бы показать на примере Рекомендуем-ых на главной?

[ikarus]

ikarus Не могли бы показать на примере Рекомендуем-ых на главной?

catalog/view/theme/тема/template/module/featured.tpl

добавляем то что жирным:

<div class="image"><a href="<?php echo $product['href']; ?>"><img [b]id="<?php echo $product['product_id']; ?>"[/b] src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>"

catalog/view/javascript/common.js скрипт addtocart

меняем функцию анимации для работы с id изображения

function animateImageToCart(pid) {

		    imagePid = '#' + pid;
		    imagePosition = $(imagePid).offset(); // получаем позицию изображения
		    cartPosition = $('#cart').position(); // получаем позицию корзины
		    cartPosition.left = cartPosition.left + ( $('#cart').width() / 2 );
		    cartPosition.top = cartPosition.top + ( $('#cart').height() / 2 ); // формальность
		    $('body').prepend('<div id="imageToCart"><img src="'+ $(imagePid).attr('src') +'"></div>');
		    $('#imageToCart img').css({
		    'position': 'absolute',
		    'display': 'inline-block',
		    'z-index': '1999',
		    'left': imagePosition.left + 'px',
		    'top': imagePosition.top + 'px',
		    'width': $(imagePid).width() + 'px',
		    'height': $(imagePid).height() + 'px'
		    });

		    // поехала анимация в направлении корзины
		    $('#imageToCart img').animate({
		    top: '0px',
		    left: cartPosition.left + 'px',
		    opacity: '0',
		    width: $(imagePid).width() / 3,
		    height: $(imagePid).height() / 3
		    }, 2000, function() {
		    $('#imageToCart').remove();
		    });
		    }

в конце скрипта, после блока success не забываем ставить запятую и добавляем:

onSuccess: animateImageToCart(product_id)

[ikarus]

далее просто следует добавлять id к <img> по аналогии во все нужные модули и в категории, кстати если картинка летит мимо корзины (у меня например в зависимости от разрешения экрана летала мимо) можно заменить position() на offset():

 cartPosition = $('#cart').position(); 

[cmd]

ikarus, может оно и правильно с точки зрения минимального вмешательства обращаться через onSuccess с указанием product_id, но с точки зрения возможности расширения функционала феншуйнее повесить

$(селектор_кнопки_купить).bind('click', function() {
 var product_id = $(this).attr('product_id');
 // сценарий добавления в корзину и всего прочего
});

Это не панацея, а просто мое сугубо личное мнение.

UPD: очевидное преимущество такого решения в том, что Вы будете обращаться к картинке через $(this). В Вашем решении может возникнуть ситуация, когда на одной странице будет 2 товара с одинаковым id, что приведет к ошибке JS-сценария.

UPD2:

Кстати, обратите внимание, что Вы указываете в качестве id число. Такое делать категорически нельзя. Надо как минимум делать

id="product_id_<?php echo $product['product_id']; ?>"

и селектор

<img src="product_id_'+ $(imagePid).attr('src') +'">

или даже лучше лучше использовать атрибут

data-id="<?php echo $product['product_id']; ?>"

и слектор через атрибут

<img src="'+ $('img[data-id="'+imagePid+']'"').attr('src') +'">

P.S. Может даже лучше не bind, a on на случай если где-то используется ajax-подгрузка товаров.

P.P.S. Код написан на коленке - могут содержаться ошибки.

[ikarus]

cmd,

Я только хочу уточнить, как возможен вариант с наличием двух товаров с одинаковым id ? ведь тогда это натуральный баг опенкарта, не? ведь тот же product_id в натуральном виде используется штатным сценарием добавления в корзину и всего прочего

[cmd]

Я только хочу уточнить, как возможен вариант с наличием двух товаров с одинаковым id ?

ikarus, Вы не поняли меня. Вы думаете про два товара с одинаковым product_id. А я Вам говорю, что на одной веб-странице может 2 раза повторяться один и тот же товар и если написать <div id="<?=$product_id?>"> то в итоге будет 2 блока div с одинаковым id. Теперь понятно?

P.S. Это очень грубый пример. Числовой id делать нельзя в принципе.