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

php ajax wordpress woocommerce

2022-08-30 20:21:13

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

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

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

答案 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) ?>"

无需应用任何操作或筛选器。

答案 2

我们可以从存档页面使用ajax。这很容易 -

删除提交表单的旧按钮：

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

将 ajax 链接从存档页面添加到单个产品页面：

add_action( 'woocommerce_single_product_summary', 'woocommerce_template_loop_add_to_cart', 30 );

附.JS回调。例如，您可以显示带有“返回商店”和“购物车”或“结帐”链接的弹出窗口

$('body').on('added_to_cart',function(){
    // Callback -> product added
    //$('.popup').show();
});