php - 我如何在购物车图标后面显示购物车中的总元素

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