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 を stylehtee ファイルに追加するか、インラインで追加します

.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 に答える