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

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


Recommended Posts

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

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

Да, теперь понятно. Поправил. Спасибо

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

не могу никак допереть как в моем решении вместо onSuccess c product_id использовать это:

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

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

ikarus, например, селектор_кнопки_купить может быть таким $('.cart input.button')

А дальше нужно работать с объектом через $(this) используя .parent() по несколько раз или .parents(), .next(), .prev() и прочие дериктивы для выбора объекта.

Если сложновато, то лучше с вопросами на http://javascript.ru/forum/. Там помогут скорее и лучше, чем тут по этой теме

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

ikarus, например, селектор_кнопки_купить может быть таким $('.cart input.button') А дальше нужно работать с объектом через $(this) используя .parent() по несколько раз или .parents(), .next(), .prev() и прочие дериктивы для выбора объекта. Если сложновато, то лучше с вопросами на http://javascript.ru/forum/. Там помогут скорее и лучше, чем тут по этой теме

т.е. смысл в том чтобы добраться до картинки не через ее какой-то атрибут, например id, а перебирая элементы объекта?

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

В общем, да.

Передать в JS-сценарий product_id так или иначе придется чтобы добавить товар в корзину.

А до картинки лучше добираться "посчитав" html элементы. В зависимости от конкретной html-структуры это могут быть разные решения. Кстати, даже для одной html структуры будут работать 5-6 разных решений - нужно просто выбрать одно наиболее оптимальное.

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

CMD ты бы выложил это в виде модуля готового платного и вопросы отпадут и денюжка на кофе и плюшки капать будет)))

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

Tom, спасибо, может быть однажды, но сейчас я в гробу видел сопровождать такое счастье. Вопросов будет столько же, а отвечать я буду обязан как продавец.

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

ув.CMD, как Вы оцените данный подход ? : )

<input type="button" onclick="addToCart('${product_id}','1',this);"
value="<?php echo $button_cart; ?>" class="button" /></div>

function addToCart(product_id, quantity, el) {
сценарий добавления в корзину...
onSuccess: animateImageToCart(el)

function animateImageToCart(el) {
			if (el){
			image_el = $(el).parent().parent().find("img");
			imagePosition = $(image_el).offset(); // получаем позицию изображения
			..................

в таком варианте наличие двух одинаковых товаров на странице не проблема (проверенно), но смущает то что приходиться функции addtocart вводить еще один параметр (this) и соответственно уточнять значение параметра quantity, так как изначально в addtocart передавался только product_id

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

Как вариант. Только тогда лучше создать свою копию функции, например, addToCartWithAnimation а старую функцию addToCart оставить без измененийчтобы не создавать конфликтов

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

  • 2 years later...

а на сколько феншуйно использовать две функции в onclick (onclick="Function1(); Function2()")?

Это не фэншуйно, лучше использовать делегирование и вешать обработчик на документ. Напишу, что сделал я.

1. Вешаем обработчик со страшным названием на докутент:

$( document ).on('click', '.cart > .button', animateImageToCartFullSiteWithoutProductPage );

2. Собственно сам страшный обработчик:

function animateImageToCartFullSiteWithoutProductPage(e) {

var $that = $(this);

if ( $that.attr('id') === 'button-cart' ){
	return false;
}

var imageBlock = $that.parent().parent().find('.image img');
var imagePosition = imageBlock.offset(); // получаем позицию изображения
var cartPosition = $('.cart__icon').offset(); // получаем позицию корзины

imageBlock.clone().addClass('temporary-img-clone').appendTo('body'); // вставляем картинку в самом низу страницы

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

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

Кое-что поясню:

  • Проверяем if ( $that.attr('id') === 'button-cart' ) чтобы исключить страницу продукта. В коде страницы продукта надо добавить id="button-cart" кнопке "Купить".
  • У меня своя корзина, сделанная в виде иконки, если у вас стандартная корзина, замените $('.cart__icon').offset() на $('#cart').offset() и
  • width: $('.cart__icon').width(),

    height: $('.cart__icon').height() на

  • width: $('#cart').width(),

    height: $('#cart').height()

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


Немного переписал обработчик:

function animateImageToCartFullSiteWithoutProductPage(e) {

var $that = $(this);

if ( $that.attr('id') === 'button-cart' ){
	return false;
}

var cart = $('.cart__icon');
var imageBlock = $that.parent().parent().find('.image img');
var imagePosition = imageBlock.offset(); // получаем позицию изображения
var cartPosition = cart.offset(); // получаем позицию корзины

imageBlock.clone().addClass('temporary-img-clone').appendTo('body'); // вставляем картинку в самом низу страницы

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

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

Теперь достаточно var cart = $('.cart__icon'); заменить на var cart = $('#cart');

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


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

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

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

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

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

Вхід

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

Вхід зараз
  • Зараз на сторінці   0 користувачів

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

Important Information

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