I'm having a problem with some code I've written to display products by category and allow customers to choose the size they want. I'm sure it's a simple solution, and almost as certain the problem stems from my lack of understanding how the msqli_fetch_assoc while loop actually works.
The problem is that the first row shows the first product correctly, but the second not just the secone product, but the first and second products. The third row shows the first three products, and so on.
Here is my complete code (please ignore the JQuery/Javascript, I'm brand new to it and will likely be back for help with that in another post.) I've been staring at it for hours. Can someone point out where I've gone wrong here?
<?php
session_start();
$dbserver = 'localhost';
$dbname = '########';
$dbuser = '########';
$dbpassword = '########';
$category = $_GET['category'];
$db = mysqli_connect($dbserver, $dbuser, $dbpassword, $dbname);
if (mysqli_connect_errno()) {
die("Connection failed: " . mysqli_connect_error());
}
mysqli_select_db($db, $dbname);
$sql = "SELECT * FROM products WHERE category = '".$category."'";
$result = mysqli_query($db, $sql);
if (!$result) {
die ('Error: Could not select products'.mysqli_error($db));
}
function make_size_select($product) {
echo '<select name="unit_menu">';
$price_set = array(
'halfpint'=>$product['halfpint'],
'pint'=>$product['pint'],
'dk'=>$product['dk'],
'quart'=>$product['quart']);
$handles = array(
'halfpint'=>'Half Pint (8 oz)',
'pint'=>'Pint (16 oz)',
'dk'=>'Dutch Kettle (16 oz)',
'quart'=>'Quart (32 oz)');
foreach ($price_set as $key=>$value) {
if ( $value > 0.00) {
echo '<option value="'.$value.'">'.$handles[$key].'</option>';
}
}
echo '</select>';
}
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Smoky Mountain Honey House</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="../css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="../css/custom.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="../js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="../js/menu.js"></script>
<script>
$(window).load(function() {
var product = $.getJSON(<?php echo json_encode($result); ?>);
showUnitPrice(product);
showRowTotal(product);
});
// show the price for a single unit based on current values for unit_size and unit_type
function setUnitPrice(product) {
// get the value for unit_type
var item_type = $.closest('.unit_type');
// get the value for unit size
var item_size = $.closest('.unit_size');
// Get the base price for the item
var unit_price = Object.keys(product[item_size]);
// If the unit type is 'ind', divide the price by 12
if (item_type.value == "ind") {
unit_price = unit_price / 12;
}
return unit_price;
}
function showUnitPrice(product) {
var unit_price = setUnitPrice(product);
$(this).closest('.unit_price').val(unit_price);
}
function showRowTotal(product) {
var unit_price = setUnitPrice(product);
var row_price = unit_price * $(this).closest('.qty').value;
$(this).closest('row_price').val(row_price);
}
</script>
</head>
<body>
<!----start-header----->
<div class="header_img">
<div class="himage_half"><img src="../images/honeyhouse-1.jpg" alt="" /></div>
<div class="himage_half">
<script>
$(document).load() {
$(this).load('template/js/cart/cart.html');
}
</script>
</div>
</div>
<div class="wrap">
<div class="header">
<div class="logo">
<a href="../index.php"><img src="../images/logo.png" alt=""></a>
</div>
<div class="menu">
<nav class="clearfix">
<ul class="clearfix">
<li><a href="../index.html">HOME</a></li>
<li><a href="../about.html">ABOUT</a></li>
<li><a href="../locations.html">LOCATIONS</a></li>
<li><a href="../shop.html">SHOP</a></li>
<li><a href="../contact.html">CONTACT</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
</div>
</div>
<!----End-header----->
<div class="wrap">
<div class="content">
<?php
while ($row = mysqli_fetch_assoc($result)) {
$products[] = $row;
foreach ($products as $product) { ?>
<div class="product_row">
<form name="order_row_<?php echo $product['product_id']; ?>" action="#" method="post">
<div class="product_cell product_id">
<input type="hidden" name="product_id" value="<?php echo $product['product_id']; ?>">
<?php echo ucfirst($product['name']); ?>
</div>
<div class="product_cell">
<select name="unit_type" onChange="showUnitPrice(product);">
<option value="ind" selected>By the Jar</option>
<option value="case">By the Case</option>
</select>
</div>
<div class="product_cell unit_menu"">
<?php echo make_size_select($product); ?>
</div>
<div class="product_cell qty">
<input type="number" name="qty" max="11" label="How many?" />
</div>
<div class="product_cell unit-price"></div>
<div class="product_cell row-price"></div>
<div class="product_cell">
<button class="add-to-cart" onclick="addToCart();">Add To Cart</button>
</div>
</form>
</div>
<?php }}; ?>
</div>
</div>
<div class="copy-right">
<p>© 2016 Smoky Mountain Honey House</p>
<p>Template by <a href="http://w3layouts.com/"> W3layouts</a></p>
</div>
<!---End-footer---->
</body>
</html>
