在我的woocommerce商店link,我更改了添加到购物车按钮,当用户点击添加到购物车按钮时,购物车下拉列表从顶部开始下降,如何在2秒后关闭它除非感动,(flatsome主题) 有人可以帮我弄清楚我可以添加什么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;
}
答案 0 :(得分:1)
你可以试试这样的(没有担保,因为我无法测试):
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元素以使其可见(购物车popin内容):
<ul class="nav-dropdown nav-dropdown-default" style="">
因此,使用我的jQuery代码,我会抓住&#34; body&#34;委托事件added_to_cart
并且我使用setTimeout()javascript函数在2秒后current-dropdown
删除(2000 milli seconds)
类。删除课程时,它会自动隐藏迷你购物车内容弹出...
这应该是正确的方式。
如果它不起作用,您可以尝试(2个替代方案):
1)代替'added_to_cart'
事件替换代码'adding_to_cart'
2)将$('body').on( 'added_to_cart', function(){
替换为:
$('.add_to_cart_button').click( function(){
我希望它能奏效......