PHP Shopping Cart Tutorial

JavaScript

Explanation of the .forEach() Method

.forEach() is javascript not jquery. In jquery you use the .each() method.

results.products.forEach(function(element) {
//Elements being looped over
}); // end of forEach

The callback function function(element) is passed as an argument to the forEach function. The forEach function calls a function without a name, an anonymous function, as its first argument. The function will be executed for every single element of the array. The function returns a string of HTML appended to a div with the id grid-container. The string of HTML loops over the element keys and returns their values. A simple example of a forEach loop is:

var products = [ { "id": 0, "name": "Blender", "price": 39.00, "image": "blender.jpg" } ];

products.forEach(function(element) {
    console.log(element);
});

This code prints out the keys and values of the array. So it prints out:

{ id: 0, name: 'Blender', price: 39, image: 'blender.jpg' }

If you just want the value of the name key, you would write:

products.forEach(function(element) {
    console.log(element.name);
});

and this would print out:

Blender

The element is the current item's value. Think of it as products[i]. There are 3 parameters that you can pass to the foreach method and the element is the only required parameter, so you must always declare an element parameter.

Explanation of the Click Event

$('.minus-btn').on('click', function(e) {
    		e.preventDefault();
    		var $this = $(this);
    		var $input = $this.closest('span').find('input');
    		var value = parseInt($input.val());

    		if (value > 1) {
    			value = value - 1;
    		} else {
    			value = 0;
    		}

        $input.val(value);

    	});

<input> elements of type number are used to let the user enter a number. When the arrows are disabled through css, the plus/minus button elements can be used instead. This css makes the arrows disappear so that the plus/minus buttons can be used instead

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 

}

The event.preventDefault() method prevents the submit button from submitting the form so that the quantity can be decremented by 1 and re-assigned with the -- operator without submitting the form.

$(this) will hold the element that you originally requested, - in this case that's the minus button element. It is used instead of re-selecting the button with the class .minus-btn.

In the string_of_html variable in our javascript file we have a <span> enclosing the button elements:

<span>
<button class="minus-btn pm" type="button" name="button">-</button>
<input class="num" type="number" name="quantity" value="1" min="1" max="100">
<button class="plus-btn pm" type="button" name="button">+</button>
</span>

The $input variable stores the span element closest to the number input object.

var $input = $this.closest('span').find('input');

var value = parseInt($input.val());

The value variable returns an integer the from the user input. If the value of the number input is greater than 1, the value gets decremented. If the value is equal to zero, the value isn't decremented, preventing negative number inputs.

input.val(value); sets the value of the number input element.

Explanation of the InnerHTML Property

The following returns the HTML content of a <div> element with id="grid-container":

var cart = document.getElementById("grid-container");

cart.innerHTML += string_of_html;

The same + operator you use for adding two numbers can be used to concatenate strings.

Note that back ticks are used while assigning the value to the string_of_html and not single quotation marks.

var string_of_html = `<form method="POST" action="cart.php">
<div class="products">
<h3>` + name + `</h3>
<img src="images/thumbs/` + image + `"class="thumbs" />
<div class="quantities"><span>
<button class="minus-btn pm" type="button" name="button">-</button>
<input class="num" type="number" name="quantity" value="1" min="1" max="100">
<button class="plus-btn pm" type="button" name="button">+</button>
</span><input type="hidden" name="product_id" value=` + id + `>
<button type="submit" class="add-button">Add to Cart</button>
</div><!-- end of .quantities-->
</div><!-- end of .products-->
</form>`;

Download Zip

If you downloaded the code, please buy me a cup of coffee:

❮ Previous Next ❯

Name :
Website :
Comment :