我在一个小型电子商务网站上工作。
这是网络浏览器上的视图：
它并不完美，但足以满足我的需求。
问题是在较小的设备上浏览网页时。这是将浏览器宽度减小到平板电脑大小的视图：
项目正在合并。
这是该网站的代码：
<?php
//index.php
?>
<!DOCTYPE html>
<html>
<head>
<title>Sdocks</title>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/bootstrap.min.js"></script>
<style>
.popover
{
width: 100%;
max-width: 800px;
}
</style>
</head>
<body>
<div class="container">
<br />
<h3 align="center"><a href="#">Sdocks</a></h3>
<br />
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Menu</span>
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<a class="navbar-brand" href="/">Cart</a>
</div>
<div id="navbar-cart" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a id="cart-popover" class="btn" data-placement="bottom" title="Shopping Cart">
<span class="glyphicon glyphicon-shopping-cart"></span>
<span class="badge"></span>
<span class="total_price">$ 0.00</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="popover_content_wrapper" style="display: none">
<span id="cart_details"></span>
<div align="right">
<a href="#" class="btn btn-primary" id="check_out_cart">
<span class="glyphicon glyphicon-shopping-cart"></span> Check out
</a>
<a href="#" class="btn btn-default" id="clear_cart">
<span class="glyphicon glyphicon-trash"></span> Clear
</a>
</div>
</div>
<div id="display_item">
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
load_product();
load_cart_data();
function load_product()
{
$.ajax({
url:"fetch_item.php",
method:"POST",
success:function(data)
{
$('#display_item').html(data);
}
});
}
function load_cart_data()
{
$.ajax({
url:"fetch_cart.php",
method:"POST",
dataType:"json",
success:function(data)
{
$('#cart_details').html(data.cart_details);
$('.total_price').text(data.total_price);
$('.badge').text(data.total_item);
}
});
}
$('#cart-popover').popover({
html : true,
container: 'body',
content:function(){
return $('#popover_content_wrapper').html();
}
});
$(document).on('click', '.add_to_cart', function(){
var product_id = $(this).attr("id");
var product_name = $('#name'+product_id+'').val();
var product_price = $('#price'+product_id+'').val();
var product_quantity = $('#quantity'+product_id).val();
var action = "add";
if(product_quantity > 0)
{
$.ajax({
url:"action.php",
method:"POST",
data:{product_id:product_id, product_name:product_name, product_price:product_price, product_quantity:product_quantity, action:action},
success:function(data)
{
load_cart_data();
alert("Item has been Added into Cart");
}
});
}
else
{
alert("lease Enter Number of Quantity");
}
});
$(document).on('click', '.delete', function(){
var product_id = $(this).attr("id");
var action = 'remove';
if(confirm("Are you sure you want to remove this product?"))
{
$.ajax({
url:"action.php",
method:"POST",
data:{product_id:product_id, action:action},
success:function()
{
load_cart_data();
$('#cart-popover').popover('hide');
alert("Item has been removed from Cart");
}
})
}
else
{
return false;
}
});
$(document).on('click', '#clear_cart', function(){
var action = 'empty';
$.ajax({
url:"action.php",
method:"POST",
data:{action:action},
success:function()
{
load_cart_data();
$('#cart-popover').popover('hide');
alert("Your Cart has been clear");
}
});
});
});
</script>
这是创建每个项目视图布局的 php 文件：
<?php
//fetch_item.php
include('database_connection.php');
$query = "SELECT * FROM tbl_product ORDER BY id DESC";
$statement = $connect->prepare($query);
if($statement->execute())
{
$result = $statement->fetchAll();
$output = '';
foreach($result as $row)
{
$output .= '
<div class="col-md-3" style="margin-top:12px;">
<div style="border:1px solid #333; background-color:#f1f1f1; border-radius:5px; padding:16px; height:350px;" align="center">
<img src="../administrar/application/admin/productos/'.$row["image"].'" class="img-responsive" /><br />
<h4 class="text-info">'.$row["name"].'</h4>
<h4 class="text-danger">$ '.$row["price"] .'</h4>
<input type="text" name="quantity" id="quantity' . $row["id"] .'" class="form-control" value="1" />
<input type="hidden" name="hidden_name" id="name'.$row["id"].'" value="'.$row["name"].'" />
<input type="hidden" name="hidden_price" id="price'.$row["id"].'" value="'.$row["price"].'" />
<input type="button" name="add_to_cart" id="'.$row["id"].'" style="margin-top:5px;" class="btn btn-success form-control add_to_cart" value="Add to Cart" />
</div>
</div>
';
}
echo $output;
}
?>
为了在平板电脑/移动 UI 中获得更好的项目布局，应该在代码中进行哪些更改？