WooCommerce Добавить в корзину анимация

Question

Есть ли способ добавить анимацию в кнопку Добавить в корзину на Woocommerce, чтобы изображение продукта летало в корзину.

PN: Я использую свою собственную тему в корзине покупок WooCommerce.

Answer 1

Является ли ваша тема использованием AJAX для добавления продукта в корзину? Решением было бы добавить прослушиватель кликов к кнопке «Добавить в корзину» с помощью jQuery. Затем в своем прослушивателе кликов вы можете анимировать образ продукта.

Другое решение объяснено в this post. Там функция jQuery addClass() по умолчанию переопределяется и событие запускается при вызове функции addClass. Следующее, что вы можете сделать, это прослушать это событие с помощью функции jQuery bind(), проверить, является ли цель кнопкой «Добавить в корзину» и сделать свою анимацию.

Третьим решением было бы деактивировать WooCommerce 'add to cart' file и создать свою собственную версию. Преимущество этого в том, что вы можете добавить триггер, который запускается только при успешном добавлении продукта в корзину. Недостатком является то, что вы должны проверять этот файл каждый раз, когда вы обновляете WooCommerce.

Edit: Я вижу, что WooCommerce «добавить в корзину» файл уже имеет триггер, который вы можете использовать:

// Trigger event so themes can refresh other areas 
$('body').trigger('added_to_cart', [ fragments, cart_hash ]);