Skip to content

Instantly share code, notes, and snippets.

@msanigar
Created May 7, 2016 07:17
Show Gist options
  • Save msanigar/546ccd95f9265607dae3f5f33113c18c to your computer and use it in GitHub Desktop.
Save msanigar/546ccd95f9265607dae3f5f33113c18c to your computer and use it in GitHub Desktop.
basic vanilla JS minibasket, some ES6
var _btn = document.getElementsByClassName("buy"),
_basketItems = document.getElementById("basketItems"),
_basketArr = [];
if(_basketItems !== null) {
_basketItems.addEventListener("click", getBtn);
}
for (var i=0; i<_btn.length; i++) {
_btn[i].addEventListener("click", btnClicked);
}
function btnClicked() {
var _price = parseFloat(this.getAttribute("data-price")),
_name = this.getAttribute("data-name"),
_sku = this.getAttribute("data-sku");
addToBasket(_price, _name, _sku);
showProducts();
basketTotal();
}
function basketTotal(_price, _name, _sku) {
var grandTotal = _basketArr.reduce(function(total, product) {
return total += product.Price * product.qty;
}, 0);
document.getElementById("total").innerHTML = grandTotal;
}
function addProduct(_price, _name, _sku) {
_basketArr.push( {
"Price" : _price,
"Name" : _name,
"Sku" : _sku,
"qty" : 1
});
}
function showProducts() {
var basket = document.getElementById("basketItems");
basket.innerHTML = "";
_basketArr.forEach(function(product) {
basket.innerHTML += createProduct(product);
});
}
function createProduct(product) {
return '<ul data-sku="' + product.Sku+ '"><li>Sku: <span class="skus">' + product.Sku + '</span></li>' + '<li>' + product.Name + '</li>' + '<li>Price: ' + product.Price + '</li>' + '<li>' + ' qty: ' + product.qty + '</li><button class="remove" data-sku="'+product.Sku+'">Remove</button></ul>';
}
function addToBasket(price, name, sku) {
var inBasket = _basketArr.filter(product => sku === product.Sku);
if(inBasket.length) {
inBasket[0].qty++;
}
else {
addProduct(price, name, sku)
}
}
function getBtn() {
var elm = event.target,
esku = elm.getAttribute("data-sku");
removeProduct(esku);
}
function removeProduct(rsku) {
_basketArr.forEach(function(product, i) {
if(product.Sku == rsku) {
if(product.qty > 1) {
product.qty--;
} else {
_basketArr.splice(i, 1);
}
basketTotal();
showProducts();
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment