在WooCommerce中2秒后自动关闭迷你购物车下拉菜单 [英] Close mini-cart dropdown automatically after 2 seconds in WooCommerce

问题描述

在我的woocommerce商店，链接，当用户点击时，我更改了添加到购物车按钮添加到购物车按钮，购物车下拉菜单从下降到顶部，我怎么能在2秒后关闭它，除非触摸，（flatsome主题）
有人可以帮我弄清楚我可以添加什么js或其他解决方案来制作2秒后购物车下拉关闭？

In my woocommerce shop, link, I have changed the add to cart button, when a user click on the add to cart button the cart dropdown is droping from to top, how can i close it after 2 seconds unless touched, (flatsome theme) someone can help me figure out what js or other solution i can add to make the cart dropdown close itself after 2 secods?

如果有人想在添加到购物车旁边添加+/-的数量框，这将显示购物车下拉菜单是代码：享受。

If someone wants to add a quantity box with +/- next to the add to cart that will show the cart dropdown here is the codes: enjoy.

    <script>
// JS
function addToCartLink(evt, pid) {
    var x = jQuery("#quantity_" + pid);
    var y = evt.closest("div");
    var qty = y.getElementsByClassName("input-text")[0].value;

 const addToCartUrl = '/?wc-ajax=add_to_cart';
    var xWWWFormUrlencodedData = "quantity=" + qty;
xWWWFormUrlencodedData += "&product_id=" + pid;
 jQuery.post(addToCartUrl, xWWWFormUrlencodedData, {
        withCredentials: true,
        headers: {
            'Cache-Control': 'no-cache',
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
            'Pragma': 'no-cache'
        }
    }).success(result => {
        if (result.error) {
            console.warn('The product has been added to the cart despite that the result object indicates an error!');
            return;
        }
        console.log('Success.', result);
        jQuery("div.widget_shopping_cart_content").replaceWith(result.fragments["div.widget_shopping_cart_content"]);
        jQuery("span.mega-menu-woo-cart-total").replaceWith(result.fragments["span.mega-menu-woo-cart-total"]);
        jQuery("span.mega-menu-woo-cart-count").replaceWith(result.fragments["span.mega-menu-woo-cart-count"]);
        jQuery(".header .cart-icon").replaceWith(result.fragments[".header .cart-icon"]);
        jQuery(".image-icon.header-cart-icon").replaceWith(result.fragments[".image-icon.header-cart-icon"]);
jQuery(".cart-price").replaceWith(result.fragments[".cart-price"]);
        jQuery("li.cart-item.has-icon.has-dropdown").addClass("current-dropdown");



    });

 return false;

}
</script>

和在functions.php中

and in functions.php

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() && ! is_cart() ) {

        $html = '<a rel="nofollow" data-product_id="'. $product->id .'" onclick="addToCartLink(this,' . $product->id .')" class="add_to_cart_button product_type_simple button primary is-flat mb-0 is-small">הוסף לסל</a>';
        //$html = '<a onclick="addToCartLink(this,'. $product->id .')">הוסף לסל</a>';

        $html .= '<div class="quantity buttons_added">';
        $html .= '<input type="button"  value="-"  class="minus button is-form">';
        $html .= '<input type="number" id="quantity_'. $product->id .'" class="input-text qty text" step="1" min="0" max="9999" name="quantity" value="1" title="כמות" size="4" pattern="[0-9]*" inputmode="numeric" >';
        $html .= '<input type="button" value="+" class="plus button is-form">';
        $html .= '</div>';

    }
    return $html;
}

推荐答案

你可以试试这样的东西（没有担保，因为我无法测试）：

You could try something like this (without guaranty as I can't test it):

add_action( 'wp_footer', 'custom_jquery_script' );
function custom_jquery_script(){
    ?>
    <script>
        (function($){
            $('body').on( 'added_to_cart', function(){
                setTimeout( function(){
                    $('ul.nav.top-bar-nav > .cart-item').removeClass('current-dropdown');
                }, 2000 );
            });
        })(jQuery);
    </script>
    <?php
}

---

说明：

将商品添加到购物车时，等级当前下拉列表被添加到：

When an item is added to cart, class current-dropdown is added to:

<li class="cart-item has-icon has-dropdown">

并将CSS应用于此Child html元素以使其可见（购物车popin）内容）：

and will apply a CSS to this Child html element to make it visible (the cart popin content):

<ul class="nav-dropdown nav-dropdown-default" style="">

所以使用我的jQuery代码，我捕获body委托事件 added_to_cart 并且我使用setTimeout（）javascript函数在2秒后删除 current-dropdown 类（2000毫秒）。删除课程时，它会自动隐藏迷你购物车内容弹出...

So with my jQuery code, I catch "body" delegated event added_to_cart and I use setTimeout() javascript function to remove that current-dropdown class after 2 seconds (2000 milli seconds). When removing the class, it hides automatically the mini-cart content pop-in…

这应该是正确的方法。

That should be the right way.

如果不起作用，您可以尝试（2个替代方案） ：

1）用替换代码'added_to_cart' 'adding_to_cart'事件代替

2）替换 $（'body'）。on（'added_to_cart'，function（）{ by：

1) to replace in the code 'added_to_cart' by 'adding_to_cart' event instead
2) to replace $('body').on( 'added_to_cart', function(){ by:

$('.add_to_cart_button').click( function(){

我希望它能起作用......

I hope it will work…

这篇关于在WooCommerce中2秒后自动关闭迷你购物车下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！