Woocommerce 中的 Ajaxify 自定义迷你购物车小部件

Question

我在我的网站上添加了一个菜单，其中显示了购物车总数以及每件商品的产品详细信息、数量和价格。这仅在手动刷新页面或重定向到购物车时有效。

                    global $woocommerce;

                    $items = $woocommerce->cart->get_cart();
                    $currency = get_woocommerce_currency_symbol();

                    echo '<li><a href="https://www.mywebsite.com/cart/" class="parents"><i class="fas fa-shopping-cart"></i> Cart - ' .  WC()->cart->get_cart_total() . '</a>';
                    echo '<ul class="mega_menu cart">';
                    echo '<li class="mega_sub">';
                    echo '<ul>';

                    foreach($items as $item => $values) {
                      $_product = $values['data']->post;
                      $link = get_permalink($_product);
                      $image = get_the_post_thumbnail($_product);
                      $price = get_post_meta($values['product_id'] , '_price', true);
                      $total = floatval( preg_replace( '#[^\d.]#', '', $woocommerce->cart->get_cart_total() ) );
                      echo '<li>' . $image . '<a href="' . $link . '">' . $_product->post_title . ' <br /><span style=" text-transform:lowercase;"> ' . $currency.$price . ' x ' . $values['quantity'] .'</span></a></li>';
                    }

                    echo '<li><a href="https://www.mywebsite.com/cart/">Go to Checkout</a></li>';
                    echo '</ul></li></ul>';

我找到了这个功能，但它只更新购物车总数和价格。

https://docs.woocommerce.com/document/show-cart-contents-total/

我是否需要重新编写子菜单的代码，或者是否有其他解决方案可以在 AJAX 功能上更新我的购物车商品？

谢谢

Answer 1

您的代码确实已经过时，充满了错误和错误。此外，Woocommerce 已经包含一个可用的迷你购物车小部件（带有可编辑模板）。

1) 替换你的 html/php 代码（我想在你的主题hearder.php 文件中）：

// echo '<ul>'; // (Used for testing)
echo '<li><a class="parents mini-cart-count" href="'.wc_get_cart_url().'"><i class="fa fa-shopping-cart"></i> Cart - ';
## Ajax refresh: Cart subtotal near the cart icon
echo '<span id="mcart-stotal">'.WC()->cart->get_cart_subtotal().'</span>';
echo '</a>';
echo '<ul class="mega_menu cart">';
echo '<li class="mega_sub">';
echo '<span id="mcart-widget">';
## Ajax refresh: Mini cart widget
woocommerce_mini_cart();
echo '</span>';
echo '</li></ul>';
// echo '</li></ul>'; // (Used for testing)

---

2) 将 Ajax 刷新您的迷你购物车小计和小部件的代码：

add_filter( 'woocommerce_add_to_cart_fragments', 'wc_mini_cart_ajax_refresh' );
function wc_mini_cart_ajax_refresh( $fragments ){
    ## 1. Refreshing mini cart subtotal amount
    $fragments['#mcart-stotal'] = '<span id="mcart-stotal">'.WC()->cart->get_cart_subtotal().'</span>';

    ## 2. Refreshing cart subtotal
    ob_start();
    echo '<span id="mcart-widget">';
    woocommerce_mini_cart();
    echo '</span>';
    $fragments['#mcart-widget'] = ob_get_clean();

    return $fragments;
}

代码进入您的活动子主题（或活动主题）的 function.php 文件中。经过测试并且可以工作。

---

相关：Display cart item count in Woocommerce cart widget