В моем магазине woocommerce, ссылку , я изменил кнопку «Добавить в корзину», когда пользователь нажимает кнопку «Добавить в корзину», выпадающее меню корзины сбрасывает сверху вниз, как я могу закрыть ее через 2 секунды, если не коснуться, (плоская тема) кто-то может помочь мне разобраться, что js или другое решение, которое я могу добавить, чтобы вырезать корзину, закроется после 2 секунд?
Если кто-то хочет добавить поле количества с +/- рядом с добавлением в корзину, которое покажет вырез корзины, вот коды: наслаждайтесь.
<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
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; }
Вы можете попробовать что-то вроде этого (без гарантии, поскольку я не могу проверить его) :
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 }
Пояснения:
Когда элемент добавляется в корзину, current-dropdown класса добавляется к:
<li class="cart-item has-icon has-dropdown">
и применит CSS к этому элементу html этого Child, чтобы сделать его видимым (контент для пота телеги) :
<ul class="nav-dropdown nav-dropdown-default" style="">
Таким образом, с моим кодом jQuery, я улавливаю «тело» делегированное событие added_to_cart и я использую функцию javascript setTimeout (), чтобы удалить этот класс с current-dropdown через 2 секунды (2000 milli seconds) . При удалении класса он автоматически скрывает всплывающее содержимое мини-корзины …
Это должен быть правильный путь.
Если это не сработает , вы можете попробовать (2 варианта) :
1) заменить в коде 'added_to_cart' на событие 'adding_to_cart' вместо
2) заменить $('body').on( 'added_to_cart', function(){ by:
$('.add_to_cart_button').click( function(){
Я надеюсь, что это сработает …