Woocommerce - 产品页面 - 如何在“添加到购物车"上创建 AJAX按钮? [英] Woocommerce - Product Page - How to create AJAX on "Add To Cart" button?

问题描述

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

I want to make an "Add To Cart" button on a product page that would work with AJAX. How can I do it? When I add to cart on a product page - it refreshes the page, how can I make it work by AJAX?

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

The "Add to cart" button on "Quick View" on archive works by ajax - and it's great, but how can I do the same on product page?

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

I want to click on "Take me Home" on the product page which would then add the product with the selected attributes to my cart by ajax and will open that cart (like when you hover onto the bag image on menu) and shakes the bag image.

推荐答案

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

Just add the following attributes to the Add to Cart button to enable the Ajax button.

<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="" 属性是必需的.

The ajax_add_to_cart add_to_cart_button classes, and the data-product_id="<?php echo get_the_ID(); ?>" data-product_sku="<?php echo esc_attr($sku) ?>" attributes are required.

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

No need to apply any action or filter.

这篇关于Woocommerce - 产品页面 - 如何在“添加到购物车"上创建 AJAX按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！