
在wordpress和woocommerce搭建的电商网站中,为了方便用户随时查看购物车商品数量,我们通常会在导航菜单中集成一个购物车图标,并在其旁边显示当前购物车中的商品总数。这通常通过在主题的functions.php文件中添加自定义代码来实现。然而,一个常见的用户体验问题是,当购物车中没有任何商品时,这个数字区域(通常是一个带有数字的圆形或椭圆形标记)仍然会显示“0”,这可能显得冗余或不够美观。
我们的目标是优化这一显示逻辑:当购物车为空时,只显示购物车图标本身;当购物车中有商品时,才显示带有商品数量的数字标记。
通常,购物车图标及其数量的添加会涉及以下两个核心WordPress和WooCommerce钩子:
原始代码示例可能如下所示,它在购物车URL匹配时,无条件地为菜单项标题添加了一个包含购物车图标和商品数量的HTML结构:
/* 将购物车添加到菜单 */
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 = '<span style="position:relative;"><i class="fal fa-shopping-cart" style="font-size:1.25em;"></i><span class="cart-basket d-flex align-items-center justify-content-center">'. '' . $woocommerce->cart->get_cart_contents_count() . '</span></span>';
}
}
}
}
}
return $item;
}
/**
* 通过AJAX添加商品时更新购物车链接内容
*/
add_filter( 'woocommerce_add_to_cart_fragments', 'my_woocommerce_add_to_cart_fragments' );
function my_woocommerce_add_to_cart_fragments( $fragments ) {
// 将我们的片段添加到碎片中
// 注意:这里传递空字符串给my_item_setup,它内部会自行处理
$fragments['li.menu-item-type-woocommerce-cart'] = my_item_setup( '');
return $fragments;
}问题在于,$woocommerce->cart->get_cart_contents_count() 在购物车为空时会返回 0,而上述代码会直接将这个 0 渲染到 <span class="cart-basket"> 中。
要解决此问题,我们需要在生成购物车数量的HTML片段之前,先判断购物车中的商品数量是否大于零。只有当数量大于零时,才生成包含数字的 <span> 标签。
以下是修改后的 my_item_setup 函数代码:
/* 将购物车添加到菜单 */
add_filter( 'wp_setup_nav_menu_item','my_item_setup' );
function my_item_setup($item) {
if ( ! is_admin() ) { // 确保只在前端执行
if ( class_exists( 'woocommerce' ) ) { // 确保WooCommerce已激活
global $woocommerce;
// 检查当前菜单项的URL是否是购物车页面URL
if ( $item->url == esc_url( wc_get_cart_url() ) ) {
// 确保购物车对象存在
if (is_null($woocommerce->cart)){
// 如果购物车对象为空,通常不应该发生,但作为健壮性处理
$item->title = '<span style="position:relative;"><i class="fal fa-shopping-cart" style="font-size:1.25em;"></i></span>';
} else {
// 根据语言环境判断,如果不需要特定语言,可以移除此if块
if( get_locale() == 'fr_FR' ) {
$innerBasket = ''; // 初始化内部篮子数量的HTML片段
$count = $woocommerce->cart->get_cart_contents_count(); // 获取购物车商品数量
// 只有当商品数量大于0时,才生成包含数量的HTML
if ($count > 0) {
$innerBasket = '<span class="cart-basket d-flex align-items-center justify-content-center">' . $count . '</span>';
}
// 构建最终的菜单项标题
$item->title = '<span style="position:relative;"><i class="fal fa-shopping-cart" style="font-size:1.25em;"></i>' . $innerBasket . '</span>';
} else {
// 如果不是 'fr_FR' 语言环境,可以添加其他语言的逻辑
// 或者默认显示英文版本,这里为了简洁,假设只有fr_FR需要处理
// 如果不限制语言,可以直接将上面的逻辑放在这个else块外面
$innerBasket = '';
$count = $woocommerce->cart->get_cart_contents_count();
if ($count > 0) {
$innerBasket = '<span class="cart-basket d-flex align-items-center justify-content-center">' . $count . '</span>';
}
$item->title = '<span style="position:relative;"><i class="fal fa-shopping-cart" style="font-size:1.25em;"></i>' . $innerBasket . '</span>';
}
}
}
}
}
return $item;
}
/**
* 通过AJAX添加商品时更新购物车链接内容
* 此函数保持不变,因为它依赖my_item_setup来生成内容
*/
add_filter( 'woocommerce_add_to_cart_fragments', 'my_woocommerce_add_to_cart_fragments' );
function my_woocommerce_add_to_cart_fragments( $fragments ) {
// 这里需要确保my_item_setup能正确处理空参数或模拟一个$item对象
// 一个更健壮的方法是直接在这里重新构建HTML,或者确保my_item_setup能独立生成片段
// 原始代码中传入空字符串,my_item_setup内部通过全局变量获取购物车信息,所以是可行的
$fragments['li.menu-item-type-woocommerce-cart'] = my_item_setup( (object)['url' => esc_url( wc_get_cart_url() )] ); // 传入一个模拟的$item对象
return $fragments;
}代码说明:
通过对购物车数量显示逻辑进行条件判断,我们成功优化了WooCommerce网站的用户体验。现在,当购物车为空时,用户将看到一个简洁的购物车图标;而当购物车中有商品时,图标旁会清晰地显示商品数量。这种细节上的改进有助于提升网站的专业度和用户满意度。
以上就是优化WooCommerce购物车图标:空购物车不显示数量的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号