Jump to content
Sign in to follow this  
cmd

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

Спасибо.

Share this post


Link to post
Share on other sites

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

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

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

спасибо!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Вызов это

animateImageToCart()

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

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

  • +1 1

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

ikarus

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

cmd,

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

Share this post


Link to post
Share on other sites
Я только хочу уточнить, как возможен вариант с наличием двух товаров с одинаковым id ?

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

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.