Значок значка частично исчезает, когда число <1

0

Я использую значок значка, чтобы отображать количество элементов корзины. Он отлично работает, когда число равно 1 или больше, но если в корзине нет предметов, оно не отображает нуль, но половина его исчезает. Я опубликовал скриншоты о том, как это выглядит со значением 1+, и затем, как это выглядит, когда тележка пуста. Кроме того, даже после того, как элемент добавлен в корзину, значок не появляется с номером до обновления или перехода на следующую страницу после добавления элемента.

Я думаю, что мне, вероятно, придется добавить еще скрипт, но просто учиться и не уверен, как я это сделаю.

Чтобы дать полную картину: это сайт BigCommerce, поэтому информация о корзине создается внутренним сервером. На него ссылается переменная %% GLOBAL_CartItems %% (в коде ниже) и обычно отображается в виде текстовой строки "Просмотреть корзину.." вместе с общим количеством элементов в корзине. Поскольку мне нужен только номер, я добавил скрипт, который заменяет текст только числовыми значениями. Я включил как HTML, так и скрипт ниже.

Как это выглядит с 1 или более в тележке:

Изображение 174551

Как это выглядит без предметов в корзине:

Изображение 174551

<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;
}
  • 0
    Почему он двигается справа? Есть ли что-то еще (больше) слева от него, которое слишком сильно толкает <li> (и оно обрезается)? из вашего кода сложно сказать ...
  • 0
    Я тоже думал об этом. Я не думаю, что это в чем проблема, однако. Я попытался переместить это, и это все еще выглядит тем же самым. Я думаю, что это связано с тем, что мне пришлось принудительно отображать только числовую часть глобальной переменной CartItems BigCommerce. Может быть, он пытается скрыть, когда число равно 0 или меньше, но BigCommerce генерирует «Просмотреть корзину», не давая ей спрятаться полностью…?
Теги:
badge

3 ответа

0
Лучший ответ

Выяснил ответ на мою собственную проблему: выясняется, что мне не хватало CSS для значка:

    .badge:empty { 
        display: none; 
     }

Угадайте, я думал, что это будет в бутстрапе уже... либо я ошибочно удалил его так или иначе, просто его нужно было добавить. В любом случае проблема решена.

Поделиться
0

Я подозреваю, что html (или его css по крайней мере) значка значка несет ответственность за его исчезновение, так как в нем неправильно собрано. Поставьте образец кода, и мы попытаемся его исправить. Что касается количества, которое не обновляется до обновления, то мой первый вопрос будет заключаться в том, чтобы зафиксировать событие, когда покупатель помещает что-то в корзину? Это будет время для обновления номера, например:

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

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

Взгляните на документацию по jQuery и на метод jQuery.

Поделиться
  • 0
    Благодарю за ваш ответ. Я не уверен, что знаю, когда именно это событие запечатлено. Извините, я новичок в этом и не уверен, как BigCommerce обрабатывает сценарий добавления в корзину в серверной части. Я могу сказать, что значок значка реагирует сразу же после удаления товаров из корзины, но когда они добавляются, он не меняется до тех пор, пока страница не обновится. Я думаю, что лучше всего сделать так, чтобы он отображался, когда элемент корзины равен / больше 1. Я попытался ответить на вопрос Ахмада выше, и, пока он работает, теперь я понимаю, что значок без числа isn ' т точно идеально. ты можешь помочь мне с этим?
  • 0
    Я просто добавил значок CSS, как вы и просили. В очередной раз благодарим за помощь!
0

Добавьте CSS folowwing в свой файл styleshtee или добавьте его в строку

.cart-items {
  display:block;
  min-width:25px;
}
Поделиться
  • 0
    На самом деле это работает невероятно, однако теперь я понимаю, что значок корзины без номера не выглядит так круто. Как сказано в моем комментарии к Fazi, приведенному ниже, теперь я думаю, что должен попытаться выяснить, как скрыть значок, и показывать его только тогда, когда элементы корзины равны или превышают 1. Я полагаю, что это будет сделано путем добавления дополнительного сценария. на мой уже существующий скрипт выше. Однако я понятия не имею, как бы я это сделал. Есть идеи?
  • 0
    Кроме того, я забыл упомянуть: Altho, как я уже сказал, я не люблю пустой значок, я хотел уточнить, как я в конечном итоге использовал вашу идею в случае, если этот пост будет полезен для всех остальных. Используя приведенный выше код, значок выглядел как плоская линия и выравнивался под значком моей корзины. Я изменил его на встроенный блок. Кроме того, минимальная ширина не нужна, но она требует минимальной высоты, я дал ей минимальную высоту: 11 пикселей; В любом случае, спасибо за идею, будет отлично работать при других обстоятельствах. Ценю твою помощь!!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню