Woocommerce - 产品页面 - 如何在“添加到购物车”按钮上创建 AJAX？

Question

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

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

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

原文由 Tom 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我使用了 Eh Jewel 的答案，但在将产品添加到购物车后添加了一些自定义 JS。这样就完成了最终的 AJAX 过程，可以根据需要更新页面。

为了完整起见，这是我使用的 HTML 代码（与 Eh Jewel’s 相同）：

 <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>

然后对于自定义 JS 位：

 $(window).on('load', function() {
  $('body').on( 'added_to_cart', function( added_to_cart, cart, cart_hash, button ){
    // Put the functionality here. Debugging shows you what you have to work with:
    console.log('added_to_cart object');
    console.log(added_to_cart);
    console.log('cart object');
    console.log(cart);
    console.log('cart_hash object');
    console.log(cart_hash);
    console.log('button object');
    console.log(button);
  });
});

原文由 Brian KD 发布，翻译遵循 CC BY-SA 4.0 许可协议