AJAX添加到购物车按钮不工作在自定义查询循环产品woocommerce

问题描述:

我正在建立一个自定义的电子商务网站使用woocommerce,我有一些麻烦修复“添加到购物车按钮”。每当我在输入框/数量框中添加多个金额时,只会将一个项目增加或添加到购物车。这只发生在我创建自定义循环时。AJAX添加到购物车按钮不工作在自定义查询循环产品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功能适用于加售模板(上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(); 

我已经尝试从这个开发商

而且这一

应用解决方案

但它仍然产生相同的输出。我真的不知道为什么它只是增加一个物品到购物车。我已经检查的任何错误的浏览器控制台,也有注释掉的代码的某些部分,以确保或让你知道我在做功能工作尝试不同的方法或选择

+0

我没有看到量输入... – Reigel

+0

这里是量输入 clestcruz

+0

如果你可以追踪它,那么这个动作的数量总是1。 – Reigel

<?php // woocommerce_quantity_input(); ?> 

应该

<?php woocommerce_quantity_input(); ?> 
+0

它被注释掉的原因是因为我尝试过使用这种方法,但它不起作用 – clestcruz

按照以下步骤

  1. 取消注释woocommerce_quantity_input();
  2. 在浏览器控制台检查,如果有在控制台中是否有任何错误。如果是的话,请在这里分享你的错误。
  3. 如果没有错误,然后用
    print_r(woocommerce_template_loop_add_to_cart($crate_products->post, $product));

    更换

woocommerce_template_loop_add_to_cart($crate_products->post, $product);
并检查其是否返回任何数据或没有。

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

+0

我应用了你的解决方案,仍然是相同的输出,它只增加购物车中的1个物品。我检查浏览器控制台并没有错误。 – clestcruz

+0

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

+0

就像我所说的那样,它仍然只增加购物车内的1个。我也尝试了un-commenting do_action('woocommerce_after_shop_loop_item');并且也是相同的输出 – clestcruz

这里是一个更新的版本。 ?

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