Skip to content

Commit

Permalink
homepage completed, cart page completed, checkout page completed, loc…
Browse files Browse the repository at this point in the history 
…ation,payment is reamaning
  • Loading branch information
@taruntailor7
taruntailor7 committed Aug 3, 2022
1 parent 345f243 commit 334cd61
Show file tree
Hide file tree
Showing 14 changed files with 3,491 additions and 124 deletions.
502 changes: 420 additions & 82 deletions cart.css
View file

Large diffs are not rendered by default.

184 changes: 181 additions & 3 deletions cart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,191 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="cart.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<title>cart</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/9c260d5759.js" crossorigin="anonymous"></script>
<title>Cart</title>
</head>
<body>
<div id="cart">
<!-- Header Section -->
<header>
<div id="container">
<div>
<a href="index.html"><img src="https://webasset.fraazo.com/production/b70a67f4e825e3d388ac4466952c20a8.svg" alt="logo"></a>
<div>
<i class="fa-solid fa-location-dot"></i>
<p>Location</p>
</div>
<input type="text" placeholder="Find fresh vegetables, fruits and dairy...">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<div>
<a href="cart.html"><i class="fas fa-shopping-cart"></i></a>
<p><a href="cart.html">Cart</a></p>
<i class="fas fa-wallet"></i>
<p><a href="">Credits</a></p>
<button>Sign Up</button>
<button>Log In</button>
</div>
</div>
</header>
<!-- End -->
<!-- Category Section -->
<section>
<div class="category">
<div class="dropdown">
<button class="btn dropdown-toggle" data-toggle="dropdown">Fruits
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-content">
<li><a href="#fruSection">Exotic Fruits</a></li>
<li><a href="#fruSection">Fresh Fruits</a></li>
<li><a href="#fruSection">Fruits Combos</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn dropdown-toggle" data-toggle="dropdown">Vegetables
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-content">
<li><a href="#vegeSection">Daily Veggies</a></li>
<li><a href="#vegeSection">Hearbs & Leafies</a></li>
<li><a href="#vegeSection">Exotic Vegetables</a></li>
<li><a href="#vegeSection">Cuts, Peeled & Sprouts</a></li>
<li><a href="#vegeSection">Vegetables Combos</a></li>
</ul>
</div>
</div>
</section >
<!-- End -->
<!-- Cart Section -->
<div id="empty">
<!-- Append Here -->
</div>
<div class="kart">
<div id="cart">
<h1>ok</h1>
<!-- Append Here -->
</div>
<div id="cartValue" >
<!-- Append Here -->
<button>Apply Coupon/Referral</button>
<table>
<thead>
<tr>
<th style="padding:8px">Bill Details</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:8px">Total Items Price</td>
<td></td>
<td id="total"></td>
</tr>
<tr>
<td style="padding:8px">Product Discount</td>
<td></td>
<td>₹ 0</td>
</tr>
<tr>
<td style="padding:8px">Cart Total</td>
<td id="items"></td>
<td id="totals">ok</td>
</tr>
<tr>
<td style="padding:8px">Other Charges</td>
<td></td>
<td>₹ 0</td>
</tr>
</tbody>
</table>
<hr>
<table class="Pay">
<tbody>
<tr>
<td>Total to Pay</td>
<td>You saved ₹ 0</td>
<td id="pay"></td>
</tr>
</tbody>
</table>
<a href="checkout.html">
<div id="checkout">
<div>
<p>Total</p>
<p id="check">ok</p>
</div>
<h4>Checkout</h4>
</div>
</a>
</div>
</div>
<!-- End -->
<!-- Footer Image Section -->
<div class="footerImg">
<img src="https://webasset.fraazo.com/production/a72cf5cd03bd56f4be37fa1c4ce7062d.svg" alt="Footer Image">
</div>
<!-- End -->
<!-- Footer Section -->
<footer>
<div class="footer">
<div class="first">
<div class="ff">
<div class="fff">
<a href="index.html"><img src="https://webasset.fraazo.com/production/f01ccf2737aa24558c3808178effa5fb.svg" alt="footer logo"></a>
<p>
Order online vegetables & fruits
directly from the farm. Fraazo is
online platform that allows customer
to get farm fresh produce directly
from farmers.
</p>
</div>
<div class="ffs">
<ul>Useful Links
<li><a href="">Privacy Policy</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Terms & Conditions</a></li>
<li><a href="">Sitemap</a></li>
</ul>
</div>
</div>
<div class="fs">
<div class="fsf">
<ul>Cities We Serve
<li><a href="">Mumbai</a></li>
<li><a href="">Hyderabad</a></li>
<li><a href="">Bangalore</a></li>
<li><a href="">Delhi</a></li>
<li><a href="">Noida</a></li>
<li><a href="">Gurugram</a></li>
<li><a href="">Pune</a></li>
</ul>
</div>
<div class="fss">
<ul>Connect with us
<li><a href=""><i class="fa-solid fa-envelope-open"></i> [email protected]</a></li>
<li><a href=""><i class="fa-solid fa-phone"></i> +91 9152291522</a></li>
</ul>
<h4>Download The App</h4>
<div>
<img src="https://webasset.fraazo.com/production/footer-g-play.53194b32f1f28968b89e.png" alt="play store">
<img src="https://webasset.fraazo.com/production/footer-appstore.b90f071a00b68166f2af.png" alt="apple store">
</div>
</div>
</div>
</div>
<div class="second">
<h1>Fresh Fruits & Vegetables Grocery Shopping Online</h1>
<p>The quality of fruits & vegetables is synonymous with its freshness, while getting fresh fruits and vegetables is a tedious task at times but with Fraazo you can get it delivered at your doorstep. Fraazo brings a wide range of farm fresh fruits, vegetables and dairy products to you, all in just a click. We currently serve about more than 3lacs+ happy customers in Mumbai, Navi Mumbai, Thane, Kalyan-Dombivli and Virar. Fraazo has made online shopping of fresh produce much easier with its hassle-free home delivery options. You can choose the delivery slot as per your choice and schedule your order accordingly. Or you can simply opt for the option of 90 mins Express Delivery and get your order delivered in not more than 90 mins. The farm fresh fruits and vegetables on Fraazo are available at best prices compared to other vendors & supermarkets. Plus with so many exciting offers, one can save up to 20% on their Monthly grocery budgets. No need to wait in long queues in crowded supermarkets or local mandis for getting the best prices on veggies. Kick the stress out & just Fraazo your dose of freshness with savings at the comfort of your home. Fraazo directly sources fresh fruits and veggies from an extensive network of farmers across Maharashtra, hence bringing you fresh produce straight from farm to table in less than 18 hours. With our Safe & Hygienic packaging and minimal multiple handling, we ensure you get the best quality fresh produce.</p>
<p>The fruits and vegetables are 100% hand-picked fresh from farm, while some products are hydroponically-grown. The wide range of fruits and veggies on Fraazo include more than 100+ farm fresh vegetables and fruits, starting from regular veggies like dudhi, cauliflower, beetroot, cabbage, etc. to exotic veggies like broccoli, lettuce etc. We also provide the essential vegetable combos like Onion, Potato, Tomato Combo, Salad Combo, Fresh Cut-Veg Combos or Fruit Combos like Banana, Apple Combo, & more. There are a lot of exciting deals on vegetables & fruits, every day of the week, the major highlights being Monday Mandi, Veggie Wednesday, Freelivery Thursday & Fruit Friday.For payments, you can choose from the multiple payment options as Fraazo accepts Debit card, Credit card, UPI options like iMobile, Google Pay, 8+ e-Wallet options like Phonepe, JioPay, MobiKwik, Sodexo, NetBanking and Cash on Delivery (COD). If you ever have an issue with missing items or any quality issue, you can raise your concern with us in 48 hrs & we shall refund/ replace your product with “no-questions-asked-policy”. You can simply connect with our Customer Support team via Chat Support or Call on 9152291522.</p>
</div>
<hr>
<div class="third">
<p>© Copyrights 2021 - 2022. Fraazo. All Rights Reserved.</p>
</div>
</div>
</footer>
<!-- End -->
</body>
</html>
<script src="cart.js"></script>
52 changes: 40 additions & 12 deletions cart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,47 @@ if(cartProduct.length == 0){
}
else{
displayProduct();
cartValue();
}

document.querySelector('#cart > h1').innerText = "Cart items:" + cartProduct.length;
document.getElementById('items').innerText =cartProduct.length+" items";
document.getElementById('items').style.fontSize="12px";

function cartValue(){
var total = cartProduct.reduce(function(accumulator, element) {
return accumulator+Number(element.price);
},0);

document.getElementById("total").innerText ="₹ "+total;
document.getElementById("totals").innerText ="₹ "+total;
document.getElementById("pay").innerText ="₹ "+total;
document.getElementById("check").innerText ="₹ "+total;
}

function displayEmptyProduct(){
document.getElementById('cart').style.display = 'none';
document.getElementById('cartValue').style.display = 'none';
var h1 = document.createElement('h1');
h1.innerText = "My Cart (0 Items)";

var imgDiv = document.createElement('div');
imgDiv.setAttribute("class", "img");
// var imgDiv = document.createElement('div');
// imgDiv.setAttribute("class", "img");

var image = document.createElement('img');
image.setAttribute("src","/system-zombies/images/empty.png");

imgDiv.append(image);
// imgDiv.append(image);

var h2 = document.createElement('h2');
h2.innerText = "Whoops... Cart is empty";

var p = document.createElement('p');
p.setAttribute("class", "underline");
p.innerText = "Add some fruits, veggies and dairy products to your cart";
p.innerText = "Add some fruits, veggies and dairy products to your cart.";

var div = document.createElement('div');
div.setAttribute("id", "button");
// var div = document.createElement('div');
// div.setAttribute("id", "button");

var a = document.createElement('a');
a.setAttribute("href", "index.html");
Expand All @@ -37,19 +55,25 @@ function displayEmptyProduct(){
btn.innerText = "Let's Shop!";

a.append(btn);
div.append(a);
// div.append(a);

document.getElementById("cart").append(h1,imgDiv,h2,p,div);
document.getElementById("empty").append(h1,image,h2,p,a);

}
function displayProduct(){

document.getElementById("empty").style.display = "none";
// document.getElementById("cart").innerText="";
cartProduct.map(function(element, index){
var div = document.createElement("div");

var image = document.createElement("img");
image.setAttribute("src", element.image_url);

var mainDiv = document.createElement("div");
mainDiv.setAttribute("class","nameAndQuantityPrice");

var div1 = document.createElement("div");

var p = document.createElement("p");
p.innerText = element.name;

Expand All @@ -59,22 +83,26 @@ function displayProduct(){
var price = document.createElement("h4");
price.innerText = "₹ "+ element.price;

div1.append(p,quantity,price);

var btn = document.createElement("button");
btn.innerText = "Remove";
btn.addEventListener("click", function(){
remove(index);
refreshPage();
refreshPage(); // this is for refreshing the page because when we remove last one page should refresh and then show empty cart.
});

div.append(image, p, quantity, price,btn);
mainDiv.append(div1,btn);

div.append(image,mainDiv);
document.getElementById("cart").append(div);
});
}

function remove(index){
cartProduct.splice(index,1);
localStorage.setItem("cart",JSON.stringify(cartProduct));
displayProduct();
localStorage.setItem("cart",JSON.stringify(cartProduct));
}

function refreshPage(){
Expand Down
Loading

0 comments on commit 334cd61

Please sign in to comment.