用 WooCommerce 中的自定义数量输入字段替换“添加到购物车”

Posted 2023-05-09

【中文标题】用 WooCommerce 中的自定义数量输入字段替换“添加到购物车”

【英文标题】：Replace "add to cart" with custom quantity input fields in WooCommerce

【发布时间】：2018-01-24 09:51:34

【问题描述】：

我正在使用带有 Storefront 主题的 WooCommerce 来构建一个主要用于智能手机的电子商务网站。所以我试图减少点击次数和按钮，使其尽可能简单。

我想用数量选择器替换“添加到购物车”按钮：

我找到了一种在“添加到购物车”按钮旁边添加数量选择器的方法（例如，使用插件 WooCommerce 高级产品数量），但我想摆脱“添加到购物车”按钮。 因此，当客户点击“+”时，它应该向购物车添加 1 个元素，并且该数字应该显示购物车中的数量。

另外（不知道这是否可能......），我想要一个动画来通知客户该产品已很好地添加到购物车中。例如，在购物车图标附近显示“+1”几秒钟，

【问题讨论】：

你试过什么？你在哪里研究过？请拨打tour。这个问题太笼统了。

@Script47 这个赏金是由Vinayagam 在一个未回答的旧问题上提出的。所以你需要问他（但不是真正的OP）。

【参考方案1】：

给你，它会很长：

首先让我们删除添加到购物车按钮：

// Remove Add To cart Button
remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);

现在让我们创建输入并将其添加到商店页面

// Add our Quanity Input
add_action('woocommerce_after_shop_loop_item', 'QTY');
function QTY()

    global $product;
    ?>
    <div class="shopAddToCart">
    <button  value="-" class="minus"  >-</button>
    <input type="text"
    disabled="disabled"
    size="2"
    value="<?php echo (Check_if_product_in_cart($product->get_id())) ? Check_if_product_in_cart($product->get_id())['QTY'] : 0;
    ?>"
    id="count"
    data-product-id= "<?php echo $product->get_id() ?>"
    data-in-cart="<?php echo (Check_if_product_in_cart($product->get_id())) ? Check_if_product_in_cart($product->get_id())['in_cart'] : 0;
    ?>"
    data-in-cart-qty="<?php echo (Check_if_product_in_cart($product->get_id())) ? Check_if_product_in_cart($product->get_id())['QTY'] : 0;
    ?>"
    class="quantity  qty"
    max_value = <?php echo ($product->get_max_purchase_quantity() == -1) ? 1000 : $product->get_max_purchase_quantity(); ?>
    min_value = <?php echo $product->get_min_purchase_quantity(); ?>
    >

    <button type="button" value="+" class="plus"  >+</button>

    </div>
                          <?php

我们需要有功能来检查产品是否已经在购物车中，所以可以修改数量：

//Check if Product in Cart Already
function Check_if_product_in_cart($product_ids)
 

foreach (WC()->cart->get_cart() as $cart_item):

    $items_id = $cart_item['product_id'];
    $QTY = $cart_item['quantity'];

    // for a unique product ID (integer or string value)
    if ($product_ids == $items_id):
        return ['in_cart' => true, 'QTY' => $QTY];

    endif;

endforeach;

我们需要添加自定义事件以减少数量：

//Add Event Handler To update QTY
add_action('wc_ajax_update_qty', 'update_qty');

function update_qty()

    ob_start();
    $product_id = absint($_POST['product_id']);
    $product = wc_get_product($product_id);
    $quantity = $_POST['quantity'];

    foreach (WC()->cart->get_cart() as $cart_item_key => $cart_item):

        if ($cart_item['product_id'] == $product_id) 
            WC()->cart->set_quantity($cart_item_key, $quantity, true);
        

    endforeach;

    wp_send_json('done');

最后我们需要 Javascript 来处理事件动作：

jQuery(document).ready(function ($) 
  "use strict";

  // Add Event Listner on the Plush button 
  $('.plus').click(function () 

    if (parseInt($(this).prev().val()) < parseInt($(this).prev().attr('max_value'))) 
      $(this).prev().val(+$(this).prev().val() + 1);

      var currentqty = parseInt($(this).prev().attr('data-in-cart-qty')) + 1;

      var id = $(this).prev().attr('data-product-id');

      var data = 
        product_id: id,
        quantity: 1
      ;
      $(this).prev().attr('data-in-cart-qty', currentqty);
      $(this).parent().addClass('loading');
      $.post(wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'), data, function (response) 

        if (!response) 
          return;
        

        if (response) 

          var url = woocommerce_params.wc_ajax_url;
          url = url.replace("%%endpoint%%", "get_refreshed_fragments");
          $.post(url, function (data, status) 
            $(".woocommerce.widget_shopping_cart").html(data.fragments["div.widget_shopping_cart_content"]);
            if (data.fragments) 
              jQuery.each(data.fragments, function (key, value) 

                jQuery(key).replaceWith(value);
              );
            
            jQuery("body").trigger("wc_fragments_refreshed");
          );
          $('.plus').parent().removeClass('loading');

        

      );


    




  );



  $('.minus').click(function () 

    $(this).next().val(+$(this).next().val() - 1);


    var currentqty = parseInt($(this).next().val());

    var id = $(this).next().attr('data-product-id');

    var data = 
      product_id: id,
      quantity: currentqty
    ;
    $(this).parent().addClass('loading');
    $.post(wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'update_qty'), data, function (response) 

      if (!response) 
        return;
      

      if (response) 
        var url = woocommerce_params.wc_ajax_url;
        url = url.replace("%%endpoint%%", "get_refreshed_fragments");
        $.post(url, function (data, status) 
          $(".woocommerce.widget_shopping_cart").html(data.fragments["div.widget_shopping_cart_content"]);
          if (data.fragments) 
            jQuery.each(data.fragments, function (key, value) 

              jQuery(key).replaceWith(value);
            );
          
          jQuery("body").trigger("wc_fragments_refreshed");
        );
        $('.plus').parent().removeClass('loading');
      

    );




  );



);

注意：此代码已经过测试并且可以正常工作，您可以在

处查看

http://dev-ak.com/woocommerce-dev/shop/

您可以从以下网址下载整个文件：

https://github.com/kashalo/wc_qty_ajax_stroefront_child.git

关于页脚购物车中的动画部分当然可以完成，如果我有空闲时间我也会这样做。

【讨论】：

这是我这两天一直在寻找的。 2021 年仍然有用，谢谢！

谢谢！只有一件事，当您单击减号按钮时，该值可能会变为负数。为了避免这种情况，我在$('.minus').click(function () if ($(this).next().val() > 0) 之后添加了一个if 语句，然后在倒数第二个); 之前关闭它