Skip to content

Commit

Permalink
cart-update
Browse files Browse the repository at this point in the history
  • Loading branch information
@meetarora10
meetarora10 committed Jun 26, 2024
1 parent 1a9e241 commit b503803
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 27 deletions.
43 changes: 22 additions & 21 deletions buy_products.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ <h3>BALER-Hay & Forage Equipment</h3>
<br>
<p>Rupee 9,000</p>
<br>
<button class="add-to-cart" data-product="BALLER" data-image="https://imgs.search.brave.com/C0kR0ZD3syOLiv-dt8S_Rk6dyKcmB8zVgEXP2uoXa1k/rs:fit:500:0:0/g:ce/aHR0cHM6Ly93d3cu/ZGVlcmUuY29tL2Fz/c2V0cy9pbWFnZXMv/aGF5LWZvcmFnZS9i/YWxpbmcvcm91bmQt/YmFsZXIvNTYxLUJh/bGVyLWhheS1mb3Jh/Z2UtYmFsaW5nLXBh/Z2UtMTAyNHg1NzYu/anBn">Add to Cart</button>
<button class="add-to-cart" data-product="BALLER" data-image="https://imgs.search.brave.com/C0kR0ZD3syOLiv-dt8S_Rk6dyKcmB8zVgEXP2uoXa1k/rs:fit:500:0:0/g:ce/aHR0cHM6Ly93d3cu/ZGVlcmUuY29tL2Fz/c2V0cy9pbWFnZXMv/aGF5LWZvcmFnZS9i/YWxpbmcvcm91bmQt/YmFsZXIvNTYxLUJh/bGVyLWhheS1mb3Jh/Z2UtYmFsaW5nLXBh/Z2UtMTAyNHg1NzYu/anBn" data-price=9000>Add to Cart</button>
</div>
</div>
<div class="product">
Expand All @@ -72,7 +72,7 @@ <h3>ELECTRIC LAWN MOWERS-56 Volt 21 in.</h3>
<br>
<p>Rupee 12,000</p>
<br>
<button class="add-to-cart" data-product="ELECTRIC LAWN MOWERS" data-image="https://imgs.search.brave.com/g0fGmy5knehlgFMYdjcTu15Ta49Wk89nql-EkNI8AKE/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9oaXBz/LmhlYXJzdGFwcHMu/Y29tL3ZhZGVyLXBy/b2QuczMuYW1hem9u/YXdzLmNvbS8xNjgy/OTcxNTM3LTE2ODEz/MzE1MTEtZWNoby1k/bG0yMTAwLXNwLTY0/NTAxYjdhMmQzYjgu/anBnP2Nyb3A9MXh3/OjF4aDtjZW50ZXIs/dG9wJnJlc2l6ZT05/ODA6Kg">Add to Cart</button>
<button class="add-to-cart" data-product="ELECTRIC LAWN MOWERS" data-image="https://imgs.search.brave.com/g0fGmy5knehlgFMYdjcTu15Ta49Wk89nql-EkNI8AKE/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9oaXBz/LmhlYXJzdGFwcHMu/Y29tL3ZhZGVyLXBy/b2QuczMuYW1hem9u/YXdzLmNvbS8xNjgy/OTcxNTM3LTE2ODEz/MzE1MTEtZWNoby1k/bG0yMTAwLXNwLTY0/NTAxYjdhMmQzYjgu/anBnP2Nyb3A9MXh3/OjF4aDtjZW50ZXIs/dG9wJnJlc2l6ZT05/ODA6Kg" data-price=12000>Add to Cart</button>
</div>
</div>
<div class="product">
Expand All @@ -82,7 +82,7 @@ <h3>PESTICIDE SPRAY BOTTLES- 30 litre</h3>
<br>
<p>Rupee 2,000 (set of 3)</p>
<br>
<button class="add-to-cart" data-product="PESTICIDE SPRAY BOTTLES- 30 litre" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/660692c512c5eb4895a92c96/garden-sprayer-pump-480x480.jpg">Add to Cart</button>
<button class="add-to-cart" data-product="PESTICIDE SPRAY BOTTLES- 30 litre" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/660692c512c5eb4895a92c96/garden-sprayer-pump-480x480.jpg" data-price=2000>Add to Cart</button>
</div>
</div>
<div class="product">
Expand All @@ -92,7 +92,7 @@ <h3>FRUIT PLUCKER</h3>
<br>
<p>Rupee 800</p>
<br>
<button class="add-to-cart" data-product="FRUIT PLUCKER" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/66069a53b5380238a1888d6c/bharat-agrotech-mango-plucker-tools-480x480.jpg">Add to Cart</button>
<button class="add-to-cart" data-product="FRUIT PLUCKER" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/66069a53b5380238a1888d6c/bharat-agrotech-mango-plucker-tools-480x480.jpg" data-price=800>Add to Cart</button>
</div>
</div>
<div class="product">
Expand All @@ -102,7 +102,7 @@ <h3>RUBBER HAND GLOVES</h3>
<br>
<p>Rupee 400 (1 set of pair)</p>
<br>
<button class="add-to-cart" data-product="RUBBER HAND GLOVES" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/660682ff8cc79cd761d822ca/surf-322c-70-industrial-rubber-gloves-480x480.jpg">Add to Cart</button>
<button class="add-to-cart" data-product="RUBBER HAND GLOVES" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/660682ff8cc79cd761d822ca/surf-322c-70-industrial-rubber-gloves-480x480.jpg" data-price=400>Add to Cart</button>
</div>
</div>
<div class="product">
Expand All @@ -112,7 +112,7 @@ <h3>BIG TORCH LIGHT (HAND TORCH)</h3>
<br>
<p>Rupee 1,500</p>
<br>
<button class="add-to-cart" data-product="BIG TORCH LIGHT" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/6638b754950fb25829b96ed8/1_-6-2-480x480.jpg">Add to Cart</button>
<button class="add-to-cart" data-product="BIG TORCH LIGHT" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/6638b754950fb25829b96ed8/1_-6-2-480x480.jpg" data-price=1500>Add to Cart</button>
</div>
</div>
<div class="product">
Expand All @@ -122,7 +122,7 @@ <h3>WOLF GARDEN 7 TOOL SET </h3>
<br>
<p>Rupee 3,500</p>
<br>
<button class="add-to-cart" data-product="WOLF GARDEN 7 TOOL SET" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/6606a09501405ca92cd58eae/wolf-garten-7-tool-set-480x480.jpg">Add to Cart</button>
<button class="add-to-cart" data-product="WOLF GARDEN 7 TOOL SET" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/6606a09501405ca92cd58eae/wolf-garten-7-tool-set-480x480.jpg" data-price=3500>Add to Cart</button>
</div>
</div>
<div class="product">
Expand All @@ -131,7 +131,7 @@ <h3>WOLF GARDEN 7 TOOL SET </h3>
<h3>BALWAAN MANUAL AGRICULTURAL SEEDER</h3>
<p>Rupee 4,600</p>
<br>
<button class="add-to-cart" data-product="BALWAAN MANUAL AGRICULTURAL SEEDER" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/663895e6b0cbcb028f3a3d58/1_-4-1-480x480.jpg">Add to Cart</button>
<button class="add-to-cart" data-product="BALWAAN MANUAL AGRICULTURAL SEEDER" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/663895e6b0cbcb028f3a3d58/1_-4-1-480x480.jpg" data-price=4600>Add to Cart</button>
</div>
</div>
<div class="product">
Expand All @@ -141,7 +141,7 @@ <h3>SOIL CRUMBLER TOOL</h3>
<br>
<p>Rupee 2,700</p>
<br>
<button class="add-to-cart" data-product="SOIL CRUMBLER TOOL" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/66069b0a14ff5b39380e5691/bharat-agrotech-weeder-soil-crumbler-tools-480x480.jpg">Add to Cart</button>
<button class="add-to-cart" data-product="SOIL CRUMBLER TOOL" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/66069b0a14ff5b39380e5691/bharat-agrotech-weeder-soil-crumbler-tools-480x480.jpg" data-price=2700>Add to Cart</button>
</div>
</div>
<div class="product">
Expand All @@ -151,7 +151,7 @@ <h3>EARTH AUGER BIT</h3>
<br>
<p>Rupee 1,500</p>
<br>
<button class="add-to-cart" data-product="EARTH AUGER BIT" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/660691e66cb6729449f6db49/earthaugerbit-8-480x480.jpg">Add to Cart</button>
<button class="add-to-cart" data-product="EARTH AUGER BIT" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/660691e66cb6729449f6db49/earthaugerbit-8-480x480.jpg" data-price=1500>Add to Cart</button>
</div>
</div>
<div class="product">
Expand All @@ -161,7 +161,7 @@ <h3>NEPTUNE PRESSURE HOSE</h3>
<br>
<p>Rupee 4,900</p>
<br>
<button class="add-to-cart" data-product="NEPTUNE PRESSURE HOSE" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/66069be7cc2819fd0015f4cc/8-5-mmx100-mtr-neptune-pressure-hose-480x480.jpg">Add to Cart</button>
<button class="add-to-cart" data-product="NEPTUNE PRESSURE HOSE" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/66069be7cc2819fd0015f4cc/8-5-mmx100-mtr-neptune-pressure-hose-480x480.jpg" data-price=4900>Add to Cart</button>
</div>
</div>
<div class="product">
Expand All @@ -171,7 +171,7 @@ <h3>NEPTUNE POWER SPRAYERS</h3>
<br>
<p>Rupee 6,000</p>
<br>
<button class="add-to-cart" data-product="NEPTUNE POWER SPRAYERS" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/66069c061d3a4dfcf98aae73/ps-50-neptune-power-sprayers-480x480.jpg">Add to Cart</button>
<button class="add-to-cart" data-product="NEPTUNE POWER SPRAYERS" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/66069c061d3a4dfcf98aae73/ps-50-neptune-power-sprayers-480x480.jpg" data-price=6000>Add to Cart</button>
</div>
</div>
<div class="product">
Expand All @@ -181,7 +181,7 @@ <h3>NEPTUNE CHAINSAW MACHINE</h3>
<br>
<p>Rupee 15,000</p>
<br>
<button class="add-to-cart" data-product="NEPTUNE CHAINSAW MACHINE" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/66069c3b15f5fb2b71edbf79/cs-58-neptune-chainsaw-480x480.jpg">Add to Cart</button>
<button class="add-to-cart" data-product="NEPTUNE CHAINSAW MACHINE" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/66069c3b15f5fb2b71edbf79/cs-58-neptune-chainsaw-480x480.jpg" data-price=15000>Add to Cart</button>
</div>
</div>
<div class="product">
Expand All @@ -191,7 +191,7 @@ <h3>CORIANDER SEEDS </h3>
<br>
<p>Rupee 400 per KG </p>
<br>
<button class="add-to-cart" data-product="CORIANDER SEEDS" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/664ae03d089b67a6b2294ffb/namdhari-ns-surabhi-coriander-seeds-480x480.jpg">Add to Cart</button>
<button class="add-to-cart" data-product="CORIANDER SEEDS" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/664ae03d089b67a6b2294ffb/namdhari-ns-surabhi-coriander-seeds-480x480.jpg" data-price=400>Add to Cart</button>
</div>
</div>
<div class="product">
Expand All @@ -201,7 +201,7 @@ <h3>BOTTLE GOURD SEEDS</h3>
<br>
<p>Rupee 200 per KG</p>
<br>
<button class="add-to-cart" data-product="BOTTLE GOURD SEEDS" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/66056a53ba076ce1d82b1a1c/vnr-bottle-gourd-sarita-f1-hybrid-seed-sw-480x480.jpg">Add to Cart</button>
<button class="add-to-cart" data-product="BOTTLE GOURD SEEDS" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/66056a53ba076ce1d82b1a1c/vnr-bottle-gourd-sarita-f1-hybrid-seed-sw-480x480.jpg" data-price=200>Add to Cart</button>
</div>
</div>
<div class="product">
Expand All @@ -211,7 +211,7 @@ <h3>HYBRID CHILLI SEEDS (GREEN CHILLI)</h3>
<br>
<p>Rupee 550 KG</p>
<br>
<button class="add-to-cart" data-product="HYBRID CHILLI SEEDS" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/66067447a4305d754cc37c8c/vnr-unnati-_60-13_-hybrid-chilli-seeds-10gm-sw-480x480.jpg">Add to Cart</button>
<button class="add-to-cart" data-product="HYBRID CHILLI SEEDS" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/66067447a4305d754cc37c8c/vnr-unnati-_60-13_-hybrid-chilli-seeds-10gm-sw-480x480.jpg" data-price=550>Add to Cart</button>
</div>
</div>
<div class="product">
Expand All @@ -221,7 +221,7 @@ <h3>HYBRID BRINJAL SEEDS</h3>
<br>
<p>Rupee 400 per KG</p>
<br>
<button class="add-to-cart" data-product="HYBRID BRINJAL SEEDS" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/663828d3950fb25829b3b7e3/rosy-hybrid-brinjal-seeds-480x480.png">Add to Cart</button>
<button class="add-to-cart" data-product="HYBRID BRINJAL SEEDS" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/663828d3950fb25829b3b7e3/rosy-hybrid-brinjal-seeds-480x480.png" data-price=400>Add to Cart</button>
</div>
</div>
<div class="product">
Expand All @@ -231,7 +231,7 @@ <h3>BIOFIT SOIL ENHANCEMENT </h3>
<br>
<p>Rupee 500</p>
<br>
<button class="add-to-cart" data-product="BIOFIT SOIL ENHANCEMENT" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/6655626e6841b2b3e9ba3440/1-s-h-e-t-soil-helth-enhancement-technology-1-netsurf-biofit-original-imagkhg5urgwzmdk-480x480.webp">Add to Cart</button>
<button class="add-to-cart" data-product="BIOFIT SOIL ENHANCEMENT" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/6655626e6841b2b3e9ba3440/1-s-h-e-t-soil-helth-enhancement-technology-1-netsurf-biofit-original-imagkhg5urgwzmdk-480x480.webp" data-price=500>Add to Cart</button>
</div>
</div>
<div class="product">
Expand All @@ -241,7 +241,7 @@ <h3>BIOFIT CULTURE BANNER</h3>
<br>
<p>Rupee 300</p>
<br>
<button class="add-to-cart" data-product="BIOFIT CULTURE BANNER" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/66555b0a9625686061186d21/biofit-culture-banner-mobile-480x480.jpg">Add to Cart</button>
<button class="add-to-cart" data-product="BIOFIT CULTURE BANNER" data-image="https://www.kisanshop.in/s/65f83b39d13b931b1c1f1a9b/66555b0a9625686061186d21/biofit-culture-banner-mobile-480x480.jpg" data-price=300>Add to Cart</button>
</div>
</div>
<div class="product">
Expand All @@ -251,7 +251,7 @@ <h3>SLURRY BUGS</h3>
<br>
<p>Rupee 399</p>
<br>
<button class="add-to-cart" data-product="SLURRY BUGS" data-image="https://imgs.search.brave.com/HPIjGhCrGP9FbsXik7v0lSBNloj73bd1urjI5znyAxg/rs:fit:500:0:0/g:ce/aHR0cHM6Ly93d3cu/d3lubnN0YXkuY28u/dWsvbWVkaWEvY2F0/YWxvZy9wcm9kdWN0/L2NhY2hlL2E1ODli/MDBhOTIyYWNlYzcx/MzhiNWU5NmI4ODk3/OTgwLzYvMS82MTUz/Nl9zbHVycnlidWdz/LW5ldy13ZWItMjAy/MS5qcGc">Add to Cart</button>
<button class="add-to-cart" data-product="SLURRY BUGS" data-image="https://imgs.search.brave.com/HPIjGhCrGP9FbsXik7v0lSBNloj73bd1urjI5znyAxg/rs:fit:500:0:0/g:ce/aHR0cHM6Ly93d3cu/d3lubnN0YXkuY28u/dWsvbWVkaWEvY2F0/YWxvZy9wcm9kdWN0/L2NhY2hlL2E1ODli/MDBhOTIyYWNlYzcx/MzhiNWU5NmI4ODk3/OTgwLzYvMS82MTUz/Nl9zbHVycnlidWdz/LW5ldy13ZWItMjAy/MS5qcGc" data-price=399>Add to Cart</button>
</div>
</div>
<div class="product">
Expand All @@ -261,7 +261,7 @@ <h3>FERTILISERS NATURAL LAWN FOOD</h3>
<br>
<p>Rupee 1,300</p>
<br>
<button class="add-to-cart" data-product="FERTILISERS NATURAL LAWN FOOD" data-image="https://imgs.search.brave.com/drHH_fhUJmuxO3TIdIn_HSlkViQJxzCCyoL4KEHszZQ/rs:fit:860:0:0/g:ce/aHR0cHM6Ly93d3cu/Ym9idmlsYS5jb20v/d3AtY29udGVudC91/cGxvYWRzLzIwMjMv/MDYvYmVzdF9sYXdu/X2ZlcnRpbGl6ZXJf/Zm9yX3NwcmluZ19v/cHRpb24uanBnP3c9/Njc1">Add to Cart</button>
<button class="add-to-cart" data-product="FERTILISERS NATURAL LAWN FOOD" data-image="https://imgs.search.brave.com/drHH_fhUJmuxO3TIdIn_HSlkViQJxzCCyoL4KEHszZQ/rs:fit:860:0:0/g:ce/aHR0cHM6Ly93d3cu/Ym9idmlsYS5jb20v/d3AtY29udGVudC91/cGxvYWRzLzIwMjMv/MDYvYmVzdF9sYXdu/X2ZlcnRpbGl6ZXJf/Zm9yX3NwcmluZ19v/cHRpb24uanBnP3c9/Njc1" data-price=1300>Add to Cart</button>
</div>
</div>
</div>
Expand All @@ -271,6 +271,7 @@ <h1><center>CART</center></h1>
<ul id="cart-items"></ul>
<br>
<center><button id="checkout">Checkout</button></center>
<center><h2>Total price : <span id="dyna">0</span></h2></center>
</div>
<br><br><br><br>
<br><br>
Expand Down
28 changes: 22 additions & 6 deletions buy_products.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,25 +29,36 @@ document.addEventListener("DOMContentLoaded", function () {
const cartItemsList = document.getElementById('cart-items');
const miniCart = document.getElementById('mini-cart');
const goToTopButton = document.getElementById('go-to-top');

const dyna=document.getElementById('dyna');
addToCartButtons.forEach(button => {
button.addEventListener('click', () => {
const product = button.getAttribute('data-product');
const image = button.getAttribute('data-image');
addItemToCart(product, image);
const price = button.getAttribute('data-price');
addItemToCart(product, image,price);
updateCart();
updatePrice();
});
});

function addItemToCart(product, image) {
function addItemToCart(product, image,price) {
const existingItem = cartItems.find(item => item.product === product);
if (existingItem) {
existingItem.quantity += 1;
} else {
cartItems.push({ product, image, quantity: 1 });
cartItems.push({ product, image,price, quantity: 1 });
dyna.innerHTML-=Number(dyna.innerHTML);
}
}

function updatePrice(){
cartItems.forEach(item=>{
const itemPrice= Number(item.price);
console.log(itemPrice);
console.log(dyna.innerHTML);
dyna.innerHTML = Number(dyna.innerHTML)+itemPrice;
console.log(dyna.innerHTML);
})
}
function updateCart() {
cartItemsList.innerHTML = '';
cartItems.forEach(item => {
Expand All @@ -62,19 +73,24 @@ document.addEventListener("DOMContentLoaded", function () {
</div>
`;
cartItemsList.appendChild(li);

// dyna.innerHTML='';
const minusButton = li.querySelector('.minus');
const plusButton = li.querySelector('.plus');
minusButton.addEventListener('click', () => {
if (item.quantity > 1) {
item.quantity -= 1;
} else {
item.quantity=0;
cartItems.splice(cartItems.indexOf(item), 1);
}
const itemSub= Number(item.price);
dyna.innerHTML = Number(dyna.innerHTML)-itemSub;
updateCart();
});
plusButton.addEventListener('click', () => {
item.quantity += 1;
const itemAdd= Number(item.price);
dyna.innerHTML = Number(dyna.innerHTML)+itemAdd;
updateCart();
});
});
Expand Down

0 comments on commit b503803

Please sign in to comment.