Я использую значок значка, чтобы отображать количество элементов корзины. Он отлично работает, когда число равно 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;
}
Выяснил ответ на мою собственную проблему: выясняется, что мне не хватало CSS для значка:
.badge:empty {
display: none;
}
Угадайте, я думал, что это будет в бутстрапе уже... либо я ошибочно удалил его так или иначе, просто его нужно было добавить. В любом случае проблема решена.
Я подозреваю, что html (или его css по крайней мере) значка значка несет ответственность за его исчезновение, так как в нем неправильно собрано. Поставьте образец кода, и мы попытаемся его исправить. Что касается количества, которое не обновляется до обновления, то мой первый вопрос будет заключаться в том, чтобы зафиксировать событие, когда покупатель помещает что-то в корзину? Это будет время для обновления номера, например:
$("#cart").on('update', undefined, cart.NumberOfItems, updateBadgeIcon);
function updateBadgeIcon(event)
{
var newNumber = event.Data;
$('#badgeNumber').html(newNumber);
};
Добавьте CSS folowwing в свой файл styleshtee или добавьте его в строку
.cart-items {
display:block;
min-width:25px;
}