Scribd
Upload
23 views

Jsonaddtocart

Uploaded by

LEGEND TAHA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
23 views

Jsonaddtocart

Uploaded by

LEGEND TAHA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.5.1/css/all.min.css"
integrity="sha512-
DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2
LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Products Selling</title>
</head>
<style>
body {
overflow-x: hidden;
}
</style>

<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-
bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else
here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-
disabled="true">Disabled</a>
</li>
</ul>

<div data-bs-toggle="modal" data-bs-target="#exampleModal" type="button"


class="me-3 mt-2 position-relative">
<i class="fa-solid fa-cart-shopping display-6"></i>
<span id="cart-len" class="position-absolute top-0 start-100 translate-
middle badge rounded-pill bg-danger">

<span class="visually-hidden">unread messages</span>


</span>
</div>

</div>
</div>
</nav>
<div class="container my-5">
<div class="row">

</div>
</div>

<!-- Modal -->


<div class="modal fade" id="exampleModal" tabindex="-1" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body">
<ol id="cart-body">

</ol>
<p><b id="total"></b></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<script>

var products = [
{
id: 1,
name: "Samsung S23 Ultra",
price: 220000,
quantity: 9,
link:
"https://images.samsung.com/pk/smartphones/galaxy-s23-ultra/buy/product_color_green
.png",
},
{
id: 2,
name: "Redmi 12c",
price: 26500,
quantity: 19,
link: "https://cubeonline.pk/cdn/shop/files/cube-website-graphics-
77_1024x1024.png?v=1698928317",
},
{
id: 3,
name: "Samsung A53",
price: 40000,
quantity: 16,
link: "https://images.samsung.com/is/image/samsung/p6pim/pk/2202/gallery/
pk-galaxy-a53-5g-a536-sm-a536elbgpkd-thumb-531569855",
},
{
id: 4,
name: "Infinix Hot 20",
price: 29000,
quantity: 74,
link: "https://g-mart.pk/wp-content/uploads/Infinix_Hot_20-438x593.jpg",
},
{
id: 5,
name: "Redmi Note 13",
price: 46500,
quantity: 130,
link: "https://mobiledevices.com.pk/images/xiaomi/xiaomi-redmi-note-13-5g-
02.webp",
},
{
id: 6,
name: "Iphone 15 Pro",
price: 450000,
quantity: 4,
link: "https://www.mega.pk/items_images/Apple+iPhone+15+Pro+Max_-
_24629.webp",
},
{
id: 7,
name: "Realme C50",
price: 29000,
quantity: 34,
link: "https://phonebolee.com/images/Realme-C50.jpg",
},
{
id: 8,
name: "OnePlus 11R",
price: 105000,
quantity: 2,
link: "https://oasis.opstatics.com/content/dam/oasis/page/2023/in/product/
11r/11r-red.png",
},
{
id: 9,
name: "Techno Pova",
price: 53000,
quantity: 21,
link: "https://advancetelecom.com.pk/wp-content/uploads/2023/11/Tecno-POVA-
5-Pro-5G-Silver.jpg",
},

{
id: 10,
name: "Iphone 13 Mini",
price: 87000,
quantity: 6,
link: "https://mobileguru.pk/wp-content/uploads/2022/07/Apple-iPhone-13-
mini-pakistan-mobileguru.png",
},

{
id: 11,
name: "Iphone 13 Mini",
price: 87000,
quantity: 6,
link: "https://mobileguru.pk/wp-content/uploads/2022/07/Apple-iPhone-13-
mini-pakistan-mobileguru.png",
},
]

var str = "";

products.forEach(function (data, index) {


str = str + `
<div class="col-12 col-sm-6 col-md-4">
<div class="card" style="width: 18rem;">
<img src=${data.link} class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${data.name}</h5>
<p class="card-text">Price : RS ${data.price}</p>
<p class="card-text">Stock : ${data.quantity}</p>
<a onclick='addTodo(${index} , ${data.price} , $
{JSON.stringify(data.name)} , 1)' class="btn btn-primary">Add To Cart</a>
</div>
</div>
</div>
`
})

document.getElementsByClassName("row")[0].innerHTML = str;

var cart = [];


var total = 0;

function addTodo(index, price, name, qty) {


// console.log(index , price , name ,qty)
cart = JSON.parse(localStorage.getItem("cart"));
total = JSON.parse(localStorage.getItem("total"));
var existingItem = cart.find((data) => data.name == name);
if (existingItem) {
existingItem.qty = existingItem.qty + 1;
total = total + price;
localStorage.setItem("cart", JSON.stringify(cart));
localStorage.setItem("total", total)
updateCart();
}
else {
cart.push({ name: name, price: price, qty: qty })
localStorage.setItem("cart", JSON.stringify(cart));
total = total + price;

localStorage.setItem("total", total)
updateCart();
}

var cartLen = document.getElementById("cart-len");

function updateCart() {
var str1 = "";
cart = JSON.parse(localStorage.getItem("cart"));

if (cart == null) {
cart = [];
}
total = JSON.parse(localStorage.getItem("total"))

if (total == null) {
total = 0;
}

console.log(total)
console.log(cart);
cartLen.innerHTML = cart.length;
cart.forEach(function (data, index) {
str1 = str1 + `
<li>${data.name} - (Rs : ${data.price}) <button onclick="increment(
${index} , ${data.price} , ${data.qty} )" class="btn-sm btn-primary">+</button>
<span>${data.qty}</span> <button onclick="decrement(${index} , ${data.price} , $
{data.qty})" class="btn-sm btn-primary">-</button></li>
`
})

document.getElementById("cart-body").innerHTML = str1;
document.getElementById("total").innerHTML = "Total : RS " + total;
}

updateCart();

function increment(index, price, qty) {


cart = JSON.parse(localStorage.getItem("cart"));
total = JSON.parse(localStorage.getItem("total"));
cart[index].qty = cart[index].qty + 1;
total = total + price;
localStorage.setItem("cart", JSON.stringify(cart));
localStorage.setItem("total", JSON.stringify(total))
updateCart();
}

function decrement(index, price, qty) {


cart = JSON.parse(localStorage.getItem("cart"));
total = JSON.parse(localStorage.getItem("total"));
if (cart[index].qty == 1) {
cart.splice(index, 1)
total = total - price;
localStorage.setItem("cart", JSON.stringify(cart));
localStorage.setItem("total", JSON.stringify(total))
updateCart();
}
else {
cart[index].qty = cart[index].qty - 1;
total = total - price;
localStorage.setItem("cart", JSON.stringify(cart));
localStorage.setItem("total", JSON.stringify(total))
updateCart();
}

</script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/
tWtIaxVXM"
crossorigin="anonymous"></script>
</body>

</html>

You might also like