刷新 WooCommerce Minicart 菜单项计数和总数
Refresh WooCommerce Minicart Menu Item count and totals
在这个很棒的社区的帮助下,我已经能够创建一个 WC 微型手推车 link 作为最后一个菜单项。
在查看官方 WC 文档后,我意识到我需要添加购物车片段,在购物车 Ajax 事件上启用“自动更新”。
预期输出: 用户点击添加到购物车,菜单项更新。
这是完整的代码,或多或少打破了整个事情。 我需要帮助结合这两个功能。
add_filter( 'wp_nav_menu_header-menu_items', 'minicart_link_with_product_count_subtotal_and_shipping', 10, 2 );
function minicart_link_with_product_count_subtotal_and_shipping( $items, $args ) {
$order_total = WC()->cart->total;
$order_subtotal = WC()->cart->get_subtotal();
$shipping_total = wc_price($order_total - $order_subtotal);
$link_url = wc_get_cart_url(); // cart url
// icon, product count, subtotal and shipping (based on if statement)
if (WC()->cart->is_empty()){
$link_text = sprintf( __( '<i class="shopping-cart"></i>', 'woocommerce' ));
} else {
$link_text = sprintf(__(
'<i class="shopping-cart"></i> %d - %s (%s)', 'woocommerce'),
WC()->cart->cart_contents_count,
wc_price(WC()->cart->get_subtotal()),
$shipping_total);
}
// link
$minicart_link = '<a title="View my cart" class="wcminicart" href="' . $link_url . '">' . $link_text . '</a>';
// return the link as last menu item
return $items . $minicart_link;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'atc_fragments' );
function atc_fragments( $fragments ) {
ob_start();
$count = WC()->cart->cart_contents_count;
if ( $count > 0 ) { ?>
<span class="wcminicart-count"><?php echo esc_html( $count ); ?></span>
<?php
}
?></a><?php
$fragments['a.wcminicart'] = ob_get_clean();
return $fragments;
}
您的代码中有一些错误。请尝试使用以下优化代码:
// Custom function that display minicart link with count and totals
function get_minicart_menu_item(){
$html_output = '<i class="shopping-cart"></i>';
// icon, product count, subtotal and shipping (based on if statement)
if ( ! WC()->cart->is_empty() ){
$cart_subtotal = WC()->cart->get_subtotal();
$shipping_total = WC()->cart->total - $cart_subtotal;
$item_count = WC()->cart->cart_contents_count;
$html_output .= sprintf( ' <span class="count">%d</span> - %s',
esc_html( $item_count ),
strip_tags( wc_price( $cart_subtotal ) )
);
if ( $shipping_total > 0 ) {
$html_output .= ' (' . strip_tags( wc_price( $shipping_total ) ) . ')';
}
}
return '<a title="View my cart" class="wcminicart" href="' . wc_get_cart_url() . '">' . $html_output . '</a>';
}
// Add mincart item link as last menu item on navigation menu
add_filter( 'wp_nav_menu_header-menu_items', 'minicart_link_with_product_count_subtotal_and_shipping', 10, 2 );
function minicart_link_with_product_count_subtotal_and_shipping( $items, $args ) {
return $items . get_minicart_menu_item(); // return the link as last menu item
}
// Refresh minicart menu item data on Ajax cart ajax events
add_filter( 'woocommerce_add_to_cart_fragments', 'ajax_refreshed_minicart_menu_item_data' );
function ajax_refreshed_minicart_menu_item_data( $fragments ) {
$fragments['a.wcminicart'] = get_minicart_menu_item();
return $fragments;
}
代码进入活动子主题(或活动主题)的 functions.php 文件。已测试并有效。
注:
此外,我已将购物车商品数量的 CSS class 选择器重命名为 class="count"
而不是 wcminicart-count
,因为您可以通过父 [=28] 定位它=] 用于您的 CSS 规则,例如:
.wcminicart > .count { text-align:center; }
在这个很棒的社区的帮助下,我已经能够创建一个 WC 微型手推车 link 作为最后一个菜单项。
在查看官方 WC 文档后,我意识到我需要添加购物车片段,在购物车 Ajax 事件上启用“自动更新”。
预期输出: 用户点击添加到购物车,菜单项更新。
这是完整的代码,或多或少打破了整个事情。 我需要帮助结合这两个功能。
add_filter( 'wp_nav_menu_header-menu_items', 'minicart_link_with_product_count_subtotal_and_shipping', 10, 2 );
function minicart_link_with_product_count_subtotal_and_shipping( $items, $args ) {
$order_total = WC()->cart->total;
$order_subtotal = WC()->cart->get_subtotal();
$shipping_total = wc_price($order_total - $order_subtotal);
$link_url = wc_get_cart_url(); // cart url
// icon, product count, subtotal and shipping (based on if statement)
if (WC()->cart->is_empty()){
$link_text = sprintf( __( '<i class="shopping-cart"></i>', 'woocommerce' ));
} else {
$link_text = sprintf(__(
'<i class="shopping-cart"></i> %d - %s (%s)', 'woocommerce'),
WC()->cart->cart_contents_count,
wc_price(WC()->cart->get_subtotal()),
$shipping_total);
}
// link
$minicart_link = '<a title="View my cart" class="wcminicart" href="' . $link_url . '">' . $link_text . '</a>';
// return the link as last menu item
return $items . $minicart_link;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'atc_fragments' );
function atc_fragments( $fragments ) {
ob_start();
$count = WC()->cart->cart_contents_count;
if ( $count > 0 ) { ?>
<span class="wcminicart-count"><?php echo esc_html( $count ); ?></span>
<?php
}
?></a><?php
$fragments['a.wcminicart'] = ob_get_clean();
return $fragments;
}
您的代码中有一些错误。请尝试使用以下优化代码:
// Custom function that display minicart link with count and totals
function get_minicart_menu_item(){
$html_output = '<i class="shopping-cart"></i>';
// icon, product count, subtotal and shipping (based on if statement)
if ( ! WC()->cart->is_empty() ){
$cart_subtotal = WC()->cart->get_subtotal();
$shipping_total = WC()->cart->total - $cart_subtotal;
$item_count = WC()->cart->cart_contents_count;
$html_output .= sprintf( ' <span class="count">%d</span> - %s',
esc_html( $item_count ),
strip_tags( wc_price( $cart_subtotal ) )
);
if ( $shipping_total > 0 ) {
$html_output .= ' (' . strip_tags( wc_price( $shipping_total ) ) . ')';
}
}
return '<a title="View my cart" class="wcminicart" href="' . wc_get_cart_url() . '">' . $html_output . '</a>';
}
// Add mincart item link as last menu item on navigation menu
add_filter( 'wp_nav_menu_header-menu_items', 'minicart_link_with_product_count_subtotal_and_shipping', 10, 2 );
function minicart_link_with_product_count_subtotal_and_shipping( $items, $args ) {
return $items . get_minicart_menu_item(); // return the link as last menu item
}
// Refresh minicart menu item data on Ajax cart ajax events
add_filter( 'woocommerce_add_to_cart_fragments', 'ajax_refreshed_minicart_menu_item_data' );
function ajax_refreshed_minicart_menu_item_data( $fragments ) {
$fragments['a.wcminicart'] = get_minicart_menu_item();
return $fragments;
}
代码进入活动子主题(或活动主题)的 functions.php 文件。已测试并有效。
注:
此外,我已将购物车商品数量的 CSS class 选择器重命名为 class="count"
而不是 wcminicart-count
,因为您可以通过父 [=28] 定位它=] 用于您的 CSS 规则,例如:
.wcminicart > .count { text-align:center; }