简体   繁体   English

Ajax在Woocommerce中的购物车菜单上更新产品数量

[英]Ajax update product count on cart menu in Woocommerce

I have a menu item that points to the cart and that reads the number of products currently in the cart. 我有一个菜单项,它指向购物车,并且读取当前购物车中的产品数量。

CART (3)

When, on the cart page, I change the number of products and click the "Update cart" button, or delete an item, the number doesn't refresh. 在购物车页面上更改产品数量并单击"Update cart"按钮或删除项目时,数量不会刷新。 Any idea why? 知道为什么吗?

/*CHANGE CART MENU TITLE IN MENU*/
add_filter( 'wp_setup_nav_menu_item','my_item_setup' );
function my_item_setup($item) {

    if ( ! is_admin() ) {
        if ( class_exists( 'woocommerce' ) ) {

            global $woocommerce;

            if ( $item->url == esc_url( wc_get_cart_url() ) ) {

                if (is_null($woocommerce->cart)){

                } else {
                    if( get_locale() == 'fr_FR' ) {
                        $item->title = 'PANIER ('. '<span class="count-cart">' .  $woocommerce->cart->get_cart_contents_count() . '</span>)';
                    } else {
                        $item->title = 'MY CART ('. '<span class="count-cart">' .  $woocommerce->cart->get_cart_contents_count() . '</span>)';
                    }
                }

            }
        }
    }
    return $item;
}

And

add_filter( 'woocommerce_add_to_cart_fragments', 'my_woocommerce_add_to_cart_fragments' );
function my_woocommerce_add_to_cart_fragments( $fragments ) {
    // Add our fragment
    $fragments['li.menu-item-type-woocommerce-cart'] = my_item_setup( '');
    return $fragments;
}

EDIT: 编辑:

Using Ajaxify the cart items count in Woocommerce answer code, seems to work a little better. 使用Ajaxify将购物车中的商品计入Woocommerce答案代码中,似乎效果更好。 The product number updates when I delete an item from the cart page, or when I change the number of items, but it doesn't update when I empty the cart. 当我从购物车页面删除商品时,或更改商品数量时,商品编号都会更新,但是在清空购物车时,商品编号不会更新。 Moreover, there's a space before and after the product number (see picture with empty cart and "CART ( 1 )" . 而且,产品编号之前和之后都有一个空格(请参阅带有空购物车和"CART ( 1 )"图片"CART ( 1 )"

add_filter( 'woocommerce_add_to_cart_fragments', 'wc_refresh_cart_fragments');
function wc_refresh_cart_fragments($fragments){
    ob_start();
    ?>
    <span class="count-cart"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
    <?php
        $fragments['li a span.count-cart'] = ob_get_clean();
    return $fragments;
}

在此处输入图片说明

Updated 更新

It's better to set a tag ID than a tag CLASS to ajaxify a cart count, as this selector reference need to be unique. 设置标签ID而不是设置标签CLASS来更好地减少购物车数量,因为此选择器引用必须唯一。 If it's not the case, and there is a hidden mobile duplicated menu, it can't work. 如果不是这种情况,并且有一个隐藏的移动重复菜单,则无法使用。

So this item menu need to be unique on the generated html code of your page… If this menu item is duplicated in a mobile version, you will need to change the tag ID or the tag CLASS for the mobile code version. 因此,此项目菜单在页面的生成的html代码上必须是唯一的。如果在移动版本中重复此菜单项目,则需要为移动代码版本更改标签ID或标签CLASS。

I have revisited your code a bit: 我再次回顾了您的代码:

add_filter( 'wp_setup_nav_menu_item','my_item_setup' );
function my_item_setup( $item ) {
    if ( ! is_admin() && class_exists( 'woocommerce' ) ) {
        if ( $item->url == esc_url( wc_get_cart_url() ) && ! WC()->cart->is_empty() ){
            $title = get_locale() == 'fr_FR' ? 'PANIER' : 'MY CART';
            $item->title = $title . ' (<span id="count-cart-items">' .  WC()->cart->get_cart_contents_count() . '</span>)';
        }
    }
    return $item;
}

add_filter( 'woocommerce_add_to_cart_fragments', 'wc_refresh_cart_fragments', 50, 1 );
function wc_refresh_cart_fragments( $fragments ){
    $cart_count = WC()->cart->get_cart_contents_count();

    // Normal version
    $count_normal = '<span id="count-cart-items">' .  $cart_count . '</span>';
    $fragments['#count-cart-items'] = $count_normal;

    // Mobile version
    $count_mobile = '<span id="count-cart-itemob">' .  $cart_count . '</span>';
    $fragments['#count-cart-itemob'] = $count_mobile;

    return $fragments;
}

Code goes in function.php file of your active child theme (active theme). 代码进入您的活动子主题(活动主题)的function.php文件中。 It should better work. 它应该更好地工作。

To Ajaxify your cart viewer so it updates when an item is added or deleted (via ajax) use: 要使您的购物车查看器Ajaxify使其在添加或删除项目(通过ajax)时更新,请使用:

/**
 * Show cart contents / total Ajax
 */
add_filter( 'woocommerce_add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment' );

function woocommerce_header_add_to_cart_fragment( $fragments ) {
    global $woocommerce;

    ob_start();

    ?>
    <a class="cart-customlocation" href="<?php echo esc_url(wc_get_cart_url()); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>
    <?php
    $fragments['a.cart-customlocation'] = ob_get_clean();
    return $fragments;
} ?>

Reference Link 参考链接

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM