Created
March 29, 2023 22:27
-
-
Save dan-zakirov/288129e52dc3e302b0c3e122d7ed79e2 to your computer and use it in GitHub Desktop.
Кастомизация анимации добавления товара в избранное из плагина Wishlist for WooCommerce
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Объявляем переменную для сохранения ссылки на кнопку "Добавить в список желаний" | |
var ajaxTrigger; | |
// Назначаем обработчик события "click" на кнопку "Добавить в список желаний" | |
$('.jvm_add_to_wishlist').click(function (event) { | |
// Сохраняем ссылку на кнопку "Добавить в список желаний" | |
ajaxTrigger = $(this); | |
// Получаем ID товара, который был нажат | |
var productId = ajaxTrigger.data('product-id'); | |
// Выполняем ajax-запрос | |
}); | |
// Назначаем обработчик события "ajaxSend" на документ | |
$(document).ajaxSend(function (event, jqXHR, settings) { | |
// Проверяем, что выполняется ajax-запрос для обновления списка желаний | |
if (settings.data.indexOf('action=jvm_woocommerce_wishlist_ajax_update_wishlist') !== -1) { | |
// Получаем ID товара из сохраненной ссылки на кнопку "Добавить в список желаний" | |
var productId = ajaxTrigger.data('product-id'); | |
// Находим элемент списка желаний, соответствующий этому товару | |
var wishlistItem = $('[data-product-id="' + productId + '"]').filter('.in_wishlist'); | |
// Получаем координаты элемента, отображающего количество товаров в списке желаний | |
var wishNum = $('.wish_num'); | |
var wishNumOffset = wishNum.offset(); | |
if (wishlistItem.length > 0) { | |
// Если товар уже есть в списке желаний, выполняем анимацию сердечка | |
console.log('Товар уже есть в списке желаний'); | |
// Получаем координаты сердечка и клонируем его | |
var heart = wishlistItem.find('.jvm_add_to_wishlist_heart'); | |
var heartOffset = heart.offset(); | |
var clonedHeart = heart.clone().appendTo('body').css({ | |
position: 'absolute', | |
top: heartOffset.top, | |
left: heartOffset.left, | |
'z-index': '9999' | |
}); | |
// Создаем анимацию движения клонированного элемента к wishNum | |
clonedHeart.animate({ | |
top: wishNumOffset.top, | |
left: wishNumOffset.left, | |
rotate: '360deg' | |
}, { | |
duration: 1000, | |
step: function (now, fx) { | |
console.log('Клонированное сердечко движется'); | |
// Вычисляем текущий прогресс анимации | |
var progress = fx.now / fx.end; | |
// Изменяем opacity после 50% пути | |
console.log(progress); | |
if (progress >= 0.5) { | |
var opacity = 1 - ((progress - 0.7) / 0.3); | |
clonedHeart.css('opacity', opacity); | |
} else { | |
clonedHeart.css('opacity', 1); | |
} | |
// Вращаем клонированное сердечко | |
clonedHeart.css({ | |
'transform': 'rotate(' + now + 'deg)', | |
}); | |
}, | |
complete: function () { | |
console.log('Анимация завершена'); | |
// Удаляем клонированный элемент и обновляем количество товаров в списке желаний | |
clonedHeart.remove(); | |
} | |
}); | |
} else { | |
// Если товар убран из спика желаний | |
console.log('Товар убран из спика желаний'); | |
} | |
} | |
}); | |
// обрабатываем результат ajax запроса | |
$(document).ajaxComplete(function (event, jqXHR, settings) { | |
if (settings.data.indexOf('action=jvm_woocommerce_wishlist_ajax_update_wishlist') !== -1) { | |
// Получаем ID товара из сохраненной ссылки на кнопку "Добавить в список желаний" | |
var productId = ajaxTrigger.data('product-id'); | |
// Находим элемент списка желаний, соответствующий этому товару | |
var wishlistItem = $('[data-product-id="' + productId + '"]').filter('.in_wishlist'); | |
// Получаем координаты элемента, отображающего количество товаров в списке желаний | |
var wishNum = $('.wish_num'); | |
if (wishlistItem.length > 0) { | |
// Увеличиваем количество товаров в списке желаний на 1 | |
var num = parseInt(wishNum.text()) + 1; | |
wishNum.text(num); | |
} else { | |
// Если товар убран из спика желаний | |
var num = parseInt(wishNum.text()) - 1; | |
wishNum.text(num); | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment