AJAX 添加到购物车按钮不适用于自定义查询循环产品 woocommerce

Posted 2023-02-24

【中文标题】AJAX 添加到购物车按钮不适用于自定义查询循环产品 woocommerce

【英文标题】：AJAX add to cart button not working on custom query loop product woocommerce

【发布时间】：2016-08-19 20:04:01

【问题描述】：

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

在商店和单品页面上，它运行良好。如果我添加 10 件商品并按下添加到购物车按钮。它正好将 10 件商品添加到购物车中。

这是我一直在制作的模板。

<?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(); ?>

令人困惑的是，AJAX 功能适用于 upsells 模板（up-sells.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();

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

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

还有这个

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

但它仍然产生相同的输出。我真的不知道为什么它只会将一件商品添加到购物车中。我已经检查了浏览器控制台是否有任何错误，并且还注释掉了代码的某些部分，以确保或让您知道我已经尝试了不同的方法或选项来使功能正常工作

【问题讨论】：

我没有看到数量输入...

这里是数量输入

如果你可以追踪它，那个动作的数量总是1。

并且没有数量输入

我还是不明白你说的“不输入数量”是什么意思

【参考方案1】：

按照这些步骤进行

取消注释woocommerce_quantity_input(); 检查浏览器控制台，控制台是否有任何错误。如果是，请在此处分享您的错误。 如果没有错误则替换

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

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

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

【讨论】：

我应用了您的解决方案，但输出仍然相同，它只会增加购物车中的 1 件商品。我检查了浏览器控制台，没有错误。

好的，那么 print_r(woocommerce_template_loop_add_to_cart( $crate_products->post, $product )) 的结果是什么；

就像我说的那样，它仍然只在购物车内增加 1。我还尝试取消注释 do_action('woocommerce_after_shop_loop_item');和同样的输出

【参考方案2】：

这是一个更新的版本。

<?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(); ?>

【讨论】：

完美运行。谢谢。

【参考方案3】：

 <?php // woocommerce_quantity_input(); ?>

应该是

 <?php woocommerce_quantity_input(); ?>

【讨论】：

之所以被注释掉是因为我试过用那个方法，还是不行