In HTML, a form begins and ends with a <form> tag. The form has two attributes: "action" and "method." The "action" attribute indicates to which page the form will be submitted. The “method” attribute specifies how the form will be submitted. There are two methods: "get" and "post". In our javascript form the form was submitted to our php file using the GET method. In our PHP form, the form was submitted to itself using the POST method.
In the HTML string of cart.js, the name attribute is set for two of the inputs.
<input class="num" type="number" name="quantity" value="1" min="1" max="100"> <input type="hidden" name="product_id" value=` + id + `>
The expression isset($_POST["product_id"]) returns true only if if the user has sent a value named 'product_id' using an HTML form. It's testing if a hidden input element named 'product_id' has been used. Post data is accessed with the $_POST array in PHP.
You can use the "isset" function on any variable to determine whether a variable is set and is not NULL. You can use this function on the $_POST array to determine if the variable was posted or not.
<?php
if ( isset($_POST["product_id"]) ) {
$id = $_POST["product_id"];
}
if ( isset($_POST["quantity"]) ) {
$quantity = $_POST["quantity"];
}
?>
It checks that there are fields with names 'quantity' and 'product_id' in the form submitted to this php page. In other words it shows that the form has been submitted and has to be processed.
The element name attribute (name="product_id") is used to access its form field data with $_POST["product_id"]. The same procedure is used for $_POST["quantity"]. The form data is then assigned to a variable that was used to display the results.
$_SESSION["cart_items"] We are using session because we have to carry the shopping cart to all the pages along with the visitor. Visitor can add or remove items from the cart from any page. When a product is selected, the posted id is used as the key to find the other elements from the JSON file. You can think of $_SESSION["cart_items"] as an array with $id as the index. Similar to this:
$array = [];
and using the index to get the value, you would write:
<?php
$count = count($array);
for ($i = 0; $i < $count; $i++) {
echo $array[$i]; //returns the value of the array at index $i
}
?>
So in the same way, $_SESSION["cart_items"][$id] is an array with index $id and the value is the $quantity. If you use similar code
<?php
session_start();
$id = 3;
$quantity = 4;
if ( isset($id) && isset($quantity) && $quantity != 0) {
if (!isset($_SESSION["cart_items"][$id])) {
$_SESSION["cart_items"][$id] = 0;
}
$_SESSION["cart_items"][$id] += $quantity;
}
}
?>
print_r($_SESSION["cart_items"]);
it prints out:
Array ( [3] => 4 )
Then if you add the following code and you loop through the array, you can see that the key is the id and the value is the quantity.
<?php
foreach($_SESSION["cart_items"] as $key=>$value){
echo "The key is " . $key . ". The value is " . $value . "<br/>";
}
?>
The loop above prints out: "The key is 3. The value is 4." Where the key is the id and the value is the quantity.
If you refresh the page, you will see that the quantity updates with a new value. This is because of this line here:
$_SESSION["cart_items"][$id] += $quantity;
This line uses the += operator to sum and reassign the quantity. So if you refresh the page, the original quantity of 4 will become 8.
To prevent our POST variables from updating when the page is refreshed, we use the following Javascript snippet in our head.
<script>
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
</script>
If you add unset($_SESSION["cart_items"]);, the function will return 0 because the if clause is true. isset() returns false if either the variable isn't set or the variable is null.
The next snippet of code is:
<?php
if (isset($_SESSION["cart_items"])){
for($i=0; $i<=7; $i++){
if (isset($_POST["remove_$i"]) && $_POST["remove_$i"]=="delete" ){
unset($_SESSION["cart_items"][$i]);
}
}
}
?>
In the code for the shopping cart, we have
<button type="submit" id="my" value="delete" name="remove_{$cart_product_id}" class="deletebtn">X</button>
This button submits data to the form with the name attribute of remove_{$cart_product_id}. The $cart_product_id is the key of the $_SESSION["cart_items"] array that gets looped through here:
<?php
$json_url = "js/products.json"; //assigns the json file to the $json_url variable
$json = file_get_contents($json_url); //reads the entire json file into a string
$data = json_decode($json, TRUE); //takes the string and converts it into the $data variable.
foreach( $_SESSION["cart_items"] as $cart_product_id =>$cart_product_quantity ) {
$product_id = $data["products"][$cart_product_id]["id"];
if($product_id == $cart_product_id) {
echo `<button type="submit" id="my" value="delete" name="remove_{$cart_product_id}" class="deletebtn">X</button>`;
}
}
?>
The following defines a multiline string without the need to constantly escape things, while maintaining the original formatting with heredocs. This is used to embed snippets of code.
<?php
$code=<<<heredocs
<form method="post" name="yourForm">
<tr><td><button type="submit" id="my" value="delete" name="remove_{$cart_product_id}" class="deletebtn">X</button></td>
<td><img src="images/thumbs/{$thumbnail}" class="" style="width: 100px; height: 100px;" /></td>
<td>{$cart_product_quantity}</td>
<td>{$product_name}(s) </td>
<td>\${$price}</td>
<td>\${$number}</td>
</tr>
heredocs;
echo $code;
?>
$product_id = $data["products"][$cart_product_id]["id"];
Explanation of the $product_id variable:
"products" is the name of the array of objects in the products.json file.
$data is the PHP variable returned from json_decode.
[$cart_product_id] is the name of the key used in the foreach loop.
["id"] is the index of the $product_id array.
if (isset($_POST["remove_$i"]) && $_POST["remove_$i"]=="delete" ){
Here it's checked whether the name remove_{$cart_product_id} was posted to the form and is not equal to zero. Then the additional condition that the value of "delete" is equal to the post data of $_POST["remove_$i"]
So if the delete button was clicked then unset the session variable with the same id as the delete button.
if ( !empty($_SESSION["cart_items"])){
This is a condition to check if the array is empty or not. If it's not empty, the shopping cart gets displayed. Otherwise the text "Your cart is empty" gets printed out.
<?php
} else {
echo "Your cart is empty";
}
?>
$price gets set in the foreach loop in the same way that $product_id did.
$price = $data["products"][$cart_product_id]["price"];
$total_price gets calculated by summing up the $price times the $cart_product_quantity where $cart_product_quantity is the value that is looped over in the foreach loop.
$total_price += ($cart_product_quantity*$price);
If the session variables aren't equal to zero or empty, calculate the $total_price and print out the grand total.
<?php
if (isset($total_price) && !empty($_SESSION["price"]) && ($_SESSION["price"] != NULL)) {
$total_price = number_format($total_price, 2, '.', '');
echo "<tr><td></td><td></td><td></td><td></td><td>Grand Total </td><td>\$" . $total_price . "</td>";
}
$total_price = number_format($total_price, 2, '.', '');
?>
The first parameter of $total_price is the number to be formatted. The second parameter shows how many decimals to display. The third parameter shows what to use for the decimal point. This is because different countries use different separators for the decimal point. For example, in Germany a decimal point is a comma not a period. The fourth parameter shows the character to use for the thousands separator. In Germany, it is a period (.).
If you downloaded the code, please buy me a cup of coffee: