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

[ikarus]

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

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

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

[ikarus]

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

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

[cmd]

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

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

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

[ikarus]

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

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

[cmd]

В общем, да.

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

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

[Tom]

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

[cmd]

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

[ikarus]

мы его все равно доковыряем и выложим бесплатно :)

[ikarus]

ув.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

[cmd]

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

[ikarus]

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

[cmd]

Гыг, не подумал. Да, это ОК.

[Sigizmund]

а на сколько феншуйно использовать две функции в 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()

Змінено 31 жовтня 2015 користувачем Sigizmund

[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');