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

Question

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

存档上"快速浏览"中的"添加到购物车"按钮由ajax工作 - 这很棒,但我怎么能在产品页面上做同样的事情？

我想点击产品页面上的"带我回家",然后通过ajax将带有所选属性的产品添加到我的购物车中并打开该购物车(就像当你将鼠标悬停在菜单上的包图像上)并摇动包图片.

Answer 1

我们可以使用归档页面中的ajax.这很简单 -

删除提交表单的旧按钮:

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

将归档页面中的ajax-link添加到单个产品页面:

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

PS JS回调.例如,您可以显示带有"返回商店"和"购物车"或"结帐"链接的弹出窗口

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

Answer 2

只需将以下属性添加到 Add to Cart 按钮即可启用 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) ?>"属性是必需的。

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

Answer 3

请从阅读本页开始:

http://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)

首先,您需要在functions.php中添加一些代码,例如:

add_action( 'wp_ajax_add_foobar', 'prefix_ajax_add_foobar' );
add_action( 'wp_ajax_nopriv_add_foobar', 'prefix_ajax_add_foobar' );

function prefix_ajax_add_foobar() {
   $product_id  = intval( $_POST['product_id'] );
// add code the add the product to your cart
die();
}

然后你必须添加一些javascript代码,触发添加到购物车并调用该函数:

  jQuery( ".add-to-cart" ).each(function() 
{


    var product_id = jQuery(this).attr('rel');
    var el = jQuery(this);

    el.click(function() {

            var data = {
                action: 'add_foobar',
                product_id: product_id
            };

            jQuery.post('/wp-admin/admin-ajax.php' , data, function(response) {
                if(response != 0) {
                    // do something
                } else {
                    // do something else
                }

            });


        return false;

    });

});

这只是一个如何完成它的例子.虽然它很基础.此javascript检查带有类名.add-to-cart的链接,并检查相应产品的rel属性.然后它将产品ID发送到php类.在那里,您需要添加代码以将相应的产品添加到购物车.

我建议你再搜索一下这个主题,以满足你的需求.祝好运.

Answer 4

Woocommerce 已经一路走来。我认为现在解决方案很简单。如果我遗漏了一些东西，只需检查“启用 AJAX 添加到存档上的购物车按钮”并使用该woocommerce_template_loop_add_to_cart()功能即可。

复选框选项位于 Woocommerce > 设置 > 产品 > 常规下。

然后只需在您希望输出按钮的地方使用woocommerce_template_loop_add_to_cart()即可。

如果您像我一样使用自定义循环，则需要确保使产品全局化才能正常woocommerce_template_loop_add_to_cart()工作。

下面是使用该函数的一个小示例：

add_shortcode( 'buy_again' , 'msp_buy_again_shortcode' );
function msp_buy_again_shortcode(){
    $order_items = msp_get_customer_unique_order_items( get_current_user_id() );
    echo '<div class="owl-carousel owl-theme">';
    foreach( $order_items as $id ){
        $product = wc_get_product( $id );
        global $product;

        if( ! empty( $product ) ){
            ?>
            <div class="card buy-again-product">
                <a class="link-normal" href="<?php echo $product->get_permalink(); ?>">
                    <?php echo $product->get_image( 'woocommerce_thumbnail', array( 'class' => 'card-img-top' ) ) ?>
                    <div class="card-body">
                        <?php echo wc_get_rating_html( $product->get_average_rating(), $product->get_review_count() ) ?>
                        <h5><?php echo $product->get_name(); ?></h5>
                        <p><?php echo $product->get_price_html() ?></p>
                        <?php woocommerce_template_loop_add_to_cart(); ?>
                    </div>
                </a>
            </div>
            <?php
        }
    }
    // loop and display buy again.
    // try to use the official woocommerce loop.

    echo '</div>';

}