There are multiple issues here. One issue is that all this code (according to you) is inside a while loop; this means that for every iteration you are creating the same JavaScript which does the same function, thus loading the DOM with unnecessary script. Another problem is the HTML, it is badly parsed, one example, you have a button that has its own function inside anchor links that have their own href. However, the biggest issue here is how it is all mangled up (its what they call "spaghetti code"). You need to separate things up in order to fix this. Try the MVC approach where you have the view that takes care of the parsing, and your functions file should act as the controller/model. I would do the following:
Your functions.php should be a class with different functions. One of those should be a function that retrieves the data from your database get_products(), turns it into an array, and stores it in a variable. This variable is then returned. For demonstration purposes I will just hard code an array:
//located in: app/functions.php
class Functions {
function get_products() {
$products_array = array(
array(
"id" => 1,
"image" => "test.jpg",
"fullprice" => 50,
"price" => 40,
"title" => "Some Name",
"quantity" => 2,
),
array(
"id" => 2,
"image" => "test2jpg",
"fullprice" => 50,
"price" => 40,
"title" => "Some Name2",
"quantity" => 1,
)
);
return $products_array;
}
function update_cart(){
return "cart updated";
}
}
//the code below will be needed to execute AJAX
if (isset($_GET) && !empty($_GET)) {
$res = $funcs->$_GET['function']();
return json_encode($res);
}
Your "view" should have anything you want to parse in the DOM. In this case, we are calling the function get_products() from your functions.php file, then parsing the array thourgh the page. Notice we are also linking the JavaScript file needed:
<!-- located in: app/product.php -->
<?php
include("functions.php");
$funcs = new Functions();
$products = $funcs->get_products();
?>
<script src='js/jquery.min.js'></script>
<script src='products.js'></script>
<?php foreach ($products as $prod) { ?>
<div class='product'>
<a href='details.php?pro_id=<?= $prod["id"] ?>'>
<img src='admin_area/product_images/<?= $prod["image"] ?>' width='100%' height='60%'/>
</a>
<h3><?= $prod["title"] ?>></h3>
<p style='color:gray; text-decoration: line-through;'> <?= $prod["fullprice"] ?> ₪ :מחיר</p>
<p style='color:#ff66ff; font-weight: bold; '> <?= $prod["price"] ?> ₪ :מחיר שלנו</p>
<input class="plus" type='button' value='+'/>
<input class="quantity" type='number' value='<?= $prod["quantity"] ?>' min='1'/>
<input class="minus" type='button' value='-'/>
<input class="product_id" type="hidden" value="<?= $prod["id"] ?>"/>
<button class='button_addCart' value='submit'>הוסף לסל</button>
</div>
<?php } ?>
<div id="results"></div>
Your script takes care of the functionality using jQuery:
//located in app/products.js
$(document).ready(function () {
$(".plus").click(function () {
var $product_elem = $(this).closest(".product");
var $quantity_elem = $product_elem.find(".quantity");
$quantity_elem.val(parseInt($quantity_elem.val()) + 1);
});
$(".minus").click(function () {
var $product_elem = $(this).closest(".product");
var $quantity_elem = $product_elem.find(".quantity");
$quantity_elem.val(parseInt($quantity_elem.val()) - 1);
});
$(".button_addCart").click(function () {
var $product_elem = $(this).closest(".product");
var quantity = $product_elem.find(".quantity").val();
var id = $product_elem.find(".product_id").val();
var postdata = {
product_id: id,
quantity: quantity
};
var url = "functions.php?function=update_cart";
$.post(url, postdata, function (data) {
console.log(data);
$('#results').html(data);
});
});
});
I hope this helps.
