0

我正在使用徽章图标来显示购物车商品的数量。当数字为 1 或更多时效果很好，但如果购物车中没有物品，它不会显示零，而是一半消失。我已经发布了价值 1+ 的屏幕截图，然后是购物车为空时的屏幕截图。此外，即使在将商品添加到购物车后，徽章也不会弹出数字，直到刷新或在添加商品后转到下一页。

我在想我可能必须添加更多脚本，但只是学习并且不确定我会如何做到这一点。

给出全貌：这是一个 BigCommerce 网站，因此购物车信息是由内部服务器生成的。它由变量 %%GLOBAL_CartItems%%（在下面的代码中）引用，通常显示为文本字符串“查看购物车..”以及购物车中的商品总数。由于我只想要数字，因此我添加了仅用数值替换文本的脚本。我在下面包含了 HTML 和脚本。

购物车中有 1 个或多个时的样子：

在此处输入图像描述

购物车中没有物品时的样子：

在此处输入图像描述

<li style="display:%%GLOBAL_HideCartOptions%%">
    <span><a href="%%GLOBAL_ShopPathNormal%%/cart.php" title="%%LNG_ViewCart%%"><i class="icon-large sprite-glyphicons_halflings_115_shopping-cart2x icon-2x" style="position: relative; top: 14px; right: 16px;"></i><span id='cart-items' class="badge badge-info" style="position: relative; top: 18px; right: 17px;">%%GLOBAL_CartItems%%</span></a></span>
</li>

<script type='text/javascript'>
   var $cart_items = $('#cart-items');
   $cart_items.text($cart_items.text().replace(/[^0-9]/g, ''));
</script>

徽章 CSS：

.badge {
  padding: 1px 9px 2px;
  font-size: 10.998px;
  font-weight: bold;
  line-height: 14px;
  color: #ffffff;
  vertical-align: baseline;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #999999;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}
4

3 回答 3

0

将以下 CSS 添加到您的 styleshtee 文件或将其添加到内联

.cart-items {
  display:block;
  min-width:25px;
}
于 2013-10-22T10:59:12.570 回答
0

我怀疑徽章图标的html（或至少它的css）是造成它消失的原因，因为它没有正确组合在一起。发布代码示例，我们将尝试修复它。至于直到刷新才更新的数字，我的第一个问题是，当买家将东西放入购物车时，你会捕捉到事件吗？那将是更新数字的时间，例如：

$("#cart").on('update', undefined, cart.NumberOfItems, updateBadgeIcon);

function updateBadgeIcon(event)
{
    var newNumber = event.Data;
    $('#badgeNumber').html(newNumber);
};

查看jQuery文档和 jQuery on method。

于 2013-10-22T11:03:04.643 回答
0

想出了我自己问题的答案：原来我错过了徽章的一些 CSS：

    .badge:empty { 
        display: none; 
     }

猜猜我认为这已经在引导程序中了……我以某种方式错误地删除了它，或者只是需要添加它。不管怎样，问题解决了。

于 2013-10-27T22:36:33.793 回答