woocommerce - WooCommerce 添加到购物车动画

Question

有没有办法可以将动画添加到 Woocommerce 上的“添加到购物车”按钮，以便产品的图像飞到购物篮。

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

Answer 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 ] );