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

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


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 5
Надіслати
Поділитися на інших сайтах

Ну, например, в 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()

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

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