如何在购物车图标后面显示购物车中的总商品

Question

我是 css 新手，我在研究期间得到的结果很少，但我希望购物车中的全部商品显示在我的购物车图标后面，如下所示：

我的代码：

<?php
if(!isset($_SESSION["cart_array"]) || count($_SESSION["cart_array"]) < 1) {
echo "<style type='text/css'>
    .cart {
        background-image: url('cart.png');
    }

    </style>";
echo "<div class='cart'></div>";
} else {
  $totalquantity = 0;
foreach($_SESSION['cart_array'] as $each_item) {
             $totalquantity += $each_item[quantity];
            }
echo "<div class='cart'>$totalquantity</div>";
}
?>

提前致谢

Answer 1

这与 Bootstrap 使用的类似

使用css伪选择器:empty可以在没有内容时自动折叠

这样在你的 php 中你总是可以渲染 ""

.container {
  background-color: #000;
  padding: 5px;
  width: 200px;
  position: relative;
}

.cart {
  background-image: url('http://www.pvhc.net/img180/xewlwqfroahrisfwokkc.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-color: darkgreen;
  width: 50px;
  height: 50px;
  border: 1px solid #fff;
  outline: 3px solid #8174f7;
  position: absolute ;
  right:8px;
  top:8px;
}

.badge {
  position: absolute;
  left: -15px;
  bottom: -15px;
  font-weight: 700;
  font-family: sans-serif;
  font-size: 20px;
  color: #fff;
  background-color: green;
  border: 2px solid #fff;
  padding: 3px;
  width: 20px;
  height: 20px;
  text-align: center;
}

.badge:empty {
  display: none;
}

.content {
  background-color: #fff;
  color: #000;
  padding:8px;
  text-align:center;
  margin-top:62px;
}

.red {
  color: red;
}

<div class="container">
  <div class='cart'>
    <span class="badge">4</span>
  </div>
  <div class="content">
    Tot. odd: <span class="red">40.04</span>
  </div>
</div>

您的 PHP 代码可能如下所示

<?php 

echo "<style>... the styles above</style>" ;
/*
load your styles before content is rendered
they should be loaded in a a separate css file but that's up to you

*/


$totalquantity = 0;
if(!isset($_SESSION["cart_array"]) ) {
      foreach($_SESSION['cart_array'] as $each_item) {
         $totalquantity += $each_item[quantity];
        }
?>
<div class='cart'><?php echo $totalquantity;?></div>
<?php }?>