php - Woocommerce - 产品页面 - 如何在 "Add To Cart"按钮上创建 AJAX？

Question

我想在可以使用 AJAX 的产品页面上创建一个“添加到购物车”按钮。我该怎么做？当我在产品页面上添加到购物车时 - 它会刷新页面，我怎样才能通过 AJAX 使其工作？

归档上“快速查看”上的“添加到购物车”按钮由 ajax 工作 - 这很棒，但我如何在产品页面上做同样的事情？

我想点击产品页面上的“带我回家”，然后 通过 ajax 将具有所选属性的产品添加到我的购物车，然后将打开该购物车(就像您将鼠标悬停在菜单上的包图片上一样)并摇动包图片。

Answer 1

只需将以下属性添加到“添加到购物车”按钮即可启用 Ajax 按钮。

<a href="<?php echo $product->add_to_cart_url() ?>" value="<?php echo esc_attr( $product->get_id() ); ?>" class="ajax_add_to_cart add_to_cart_button" data-product_id="<?php echo get_the_ID(); ?>" data-product_sku="<?php echo esc_attr($sku) ?>" aria-label="Add “<?php the_title_attribute() ?>” to your cart"> 
Add to Cart 
</a>

ajax_add_to_cart add_to_cart_button类，以及 data-product_id="<?php echo get_the_ID(); ?>" data-product_sku="<?php echo esc_attr($sku) ?>"属性是必需的。

无需应用任何操作或过滤器。