AJAX添加到cart按钮，而不是使用自定义查询循环产品woocommerce

I'm building a custom e-commerce website using woocommerce and I'm having some trouble fixing the "add to cart button". Whenever I add the multiple amounts in the input box/quantity box it only increments or adds one item to the cart. This only happens when I create a custom loop.

我正在使用woocommerce创建一个自定义的电子商务网站，我在修改“添加到购物车”按钮时遇到了一些麻烦。每当我在输入框/数量框中添加多个金额时，它只增加或向购物车添加一个项目。这只在创建自定义循环时发生。

On the shop and single-product page, it works fine. If I add 10 items and press the add to cart button. It exactly adds 10 items to cart.

在商店和单一产品页面，它工作得很好。如果我添加10个项目并按add to cart按钮。它正好增加了10个项目到购物车。

Here is the template I have been working.

这是我一直在做的模板。

<?php

/*
* Template Name: Home
*/

get_header(); ?>

<section class="full-width home-template">

    <div class="full-width shop-section">

        <div class="container">

            <?php
            $args = array(
                    'post_type' => 'product',
                    'meta_query' => array(
                        array(
                            'key' => '_stock_status',
                            'value' => 'instock'
                        )
                    )
            );

            $crate_products = new WP_Query ( $args );
            if ( $crate_products->have_posts() ) : while ( $crate_products->have_posts() ) :
              $crate_products->the_post();

            ?>

            <div id="post-<?php the_ID() ?>" class="three columns product-post">

                <?php // wc_get_template_part('content', 'product'); ?>


                <figure class="featured-image">
                    <?php
                    //Display Product Thumbnail
                    $product_thumbnail =  woocommerce_get_product_thumbnail();

                    ?>

                    <a href="<?php  the_permalink()?>" ><?php echo $product_thumbnail ?></a>
                </figure>


                <h2 class="product-price"><a href="<?php the_permalink(); ?>"><?php wc_get_template( 'single-product/price.php' ); ?></a></h2>
                <span class="product-name"><?php the_title(); ?></span>

                <?php // woocommerce_quantity_input(); ?>


                <div class="add-to-cart-btn">
                <?php woocommerce_template_loop_add_to_cart( $crate_products->post, $product ); ?>
                <?php // do_action( 'woocommerce_after_shop_loop_item' ); ?>
                </div>


            </div>

            <?php wp_reset_postdata(); ?>

            <?php endwhile; else: ?>

            <?php endif; ?>

            <?php wp_reset_query(); ?>


        </div>

    </div>


</section>


<?php get_footer(); ?>

What's confusing also is that the AJAX functionality works on the upsells template(up-sells.php) which is a template of woocommerce and it works fine.

另一个让人困惑的是，AJAX功能在upsales模板(up-sell .php)上工作，而该模板是woocommerce的模板，并且运行良好。

<?php
/**
 * Single Product Up-Sells
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/up-sells.php.
 *
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

global $product, $woocommerce_loop;

$upsells = $product->get_upsells();

if ( sizeof( $upsells ) === 0 ) {
    return;
}

$meta_query = WC()->query->get_meta_query();

$args = array(
    'post_type'           => 'product',
    'ignore_sticky_posts' => 1,
    'no_found_rows'       => 1,
    'posts_per_page'      => $posts_per_page,
    'orderby'             => $orderby,
    'post__in'            => $upsells,
    'post__not_in'        => array( $product->id ),
    'meta_query'          => $meta_query
);

$products = new WP_Query( $args );

$woocommerce_loop['columns'] = $columns;

if ( $products->have_posts() ) : ?>

    <div class="upsells products">

        <div class="twelve columns">
            <h2><?php // _e( 'You may also like&hellip;', 'woocommerce' ) ?></h2>
      </div>

        <?php woocommerce_product_loop_start(); ?>

            <?php while ( $products->have_posts() ) : $products->the_post(); ?>

                <div id="post-<?php the_ID() ?>" class="three columns product-post">

                    <?php  wc_get_template_part('content', 'product'); ?>





                </div>

            <?php endwhile; // end of the loop. ?>

        <?php woocommerce_product_loop_end(); ?>

    </div>

<?php endif;

wp_reset_postdata();

I have already tried applying the solutions from this developer

我已经尝试过应用这个开发人员的解决方案

https://gist.github.com/claudiosmweb/5114131
https://gist.github.com/claudiosmweb/5114131

and also this one

同时这一个

https://gist.github.com/webaware/6260468
https://gist.github.com/webaware/6260468

But it still produces the same output. I really don't know why it only increments one item to the cart. I have checked the browser console for any errors and also have commented out some parts of the code to ensure or let you know that I have tried different methods or options in making the functionality work

但它仍然产生相同的输出。我真的不知道为什么它只增加一个项目到购物车。我检查了浏览器控制台是否有错误，并注释了代码的一些部分，以确保或让您知道我尝试了不同的方法或选项以使功能正常工作

3 个解决方案

#1

Follow these steps

遵循以下步骤

Uncomment woocommerce_quantity_input();
取消woocommerce_quantity_input();
Check in Browser Console, if there are any errors in console or not. If yes, then please share your errors here.
如果控制台中有错误，请检查浏览器控制台。如果是，请在这里分享你的错误。
If there are no errors then replace
如果没有错误，则替换

woocommerce_template_loop_add_to_cart( $crate_products->post, $product );
with
print_r(woocommerce_template_loop_add_to_cart( $crate_products->post, $product ));

woocommerce_template_loop_add_to_cart(crate_products - >后,美元产品);使用print_r(woocommerce_template_loop_add_to_cart($crate_products->post， $product));

and check whether it returns any data or not.

检查它是否返回任何数据。

Also try uncommenting do_action( 'woocommerce_after_shop_loop_item' );

还可以尝试取消注释do_action('woocommerce_after_shop_loop_item');

#2

 <?php // woocommerce_quantity_input(); ?>

Should be

应该是

 <?php woocommerce_quantity_input(); ?>

#3

Here is an updated version.

这是更新后的版本。

<?php
/*
* Template Name: Home
*/
get_header(); ?>

<section class="full-width home-template">
    <div class="full-width shop-section">
        <div class="container">

            <?php

            global $product;

            $args = array(
                'post_type' => 'product',
                'meta_query' => array(
                    array(
                        'key' => '_stock_status',
                        'value' => 'instock'
                    )
                )
            );            

            $posts = get_posts( $args );            
            foreach( $posts as $post ) :
                setup_postdata( $post );
                wc_setup_product_data( $post );
                $product = wc_get_product( $post->ID ); ?>

                <div id="post-<?php the_ID() ?>" class="three columns product-post">

                    <figure class="featured-image">
                        <a href="<?php  the_permalink()?>" ><?php echo woocommerce_get_product_thumbnail(); ?></a>
                    </figure>

                    <h2 class="product-price"><a href="<?php the_permalink(); ?>"><?php wc_get_template( 'single-product/price.php' ); ?></a></h2>
                    <span class="product-name"><?php the_title(); ?></span>

                    <?php woocommerce_quantity_input(); ?>

                    <div class="add-to-cart-btn">
                        <?php woocommerce_template_loop_add_to_cart(); ?>                
                    </div>

                </div>

            <?php endforeach; ?>

            <script type="text/javascript">

                (function($){
                    $(document).ready(function(){
                        $(document).on( "keyup", "input.qty", function(){                       
                            $(this).parent().next().find("a").attr( "data-quantity", $(this).val() );
                        });
                    });
                })(jQuery);

            </script>

        </div>
    </div>
</section>

<?php get_footer(); ?>

#1