Перейти к содержанию
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();
 });
}

  • +1 4

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

спасибо!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Вызов это

animateImageToCart()

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

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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)

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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. Код написан на коленке - могут содержаться ошибки.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

cmd,

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Я только хочу уточнить, как возможен вариант с наличием двух товаров с одинаковым id ?

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.