WooCommerce添加到购物车动画

有没有一种方法可以在Woocommerce上的”添加到购物车”按钮中添加动画, 以使产品的图像飞到购物篮中。

PN：我在WooCommerce购物车中使用自己的主题。

#1

你的主题是否使用AJAX将产品添加到购物车？一种解决方案是使用jQuery将点击侦听器添加到”添加到购物车”按钮中。然后, 在你的点击侦听器中, 可以对产品图像进行动画处理。

这篇文章中介绍了另一种解决方案。在那里, 默认的jQuery addClass()函数被覆盖, 并在调用addClass函数时触发事件。接下来, 你可以使用jQuery bind()函数监听此事件, 检查目标是否为”添加到购物车”按钮, 然后制作动画。

第三种解决方案是使WooCommerce的”添加到购物车”文件出队并创建你自己的版本。这样做的好处是你可以添加仅在产品成功添加到购物车后才触发的触发器。缺点是每次升级WooCommerce时都必须检查此文件。

编辑：我看到WooCommerce’添加到购物车’文件已经有一个触发器, 你可以使用：

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