如何在购物车图标后面显示购物车中的总项目

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中你可以随时呈现“＆lt; span class =”徽章“＆gt;＆lt;？php $ totalquantity;？＆gt;＆lt; / span＆gt;”

.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 }?>