Skip to content

Commit

Permalink
Can show cart!
Browse files Browse the repository at this point in the history
  • Loading branch information
@RosalieWessels
RosalieWessels committed Feb 18, 2024
1 parent e983a6b commit 5ccad1b
Show file tree
Hide file tree
Showing 3 changed files with 156 additions and 12 deletions.
35 changes: 25 additions & 10 deletions cart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,25 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jomhuria&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap" rel="stylesheet">
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
</head>
<body>
<center>
<ul>
<li class="title jomhuria-regular">Santa Clara Swap</li>
<li class="newsreader-400" style="float:right; padding-top: 10px;"><a href="#home" class="last-button">Login</a></li>
<li class="newsreader-400" style="float:right; padding-top: 10px;"><a href="#news">My Profile</a></li>
<li class="newsreader-400" style="float:right; padding-top: 10px;"><a href="#contact">Messages</a></li>
<li class="newsreader-400" style="float:right; padding-top: 10px;"><a href="#contact">Sell</a></li>
<li class="newsreader-400" style="float:right; padding-top: 10px;"><a class="active" href="#about">Shop</a></li>
<ul id="navbar">
<li class="small-circle"><img src="H4H-logo.png" class="image-on-small-circle" alt="Image on circle"></li>
<li class="title jomhuria-regular" onclick="window.location.href='index.html'">Santa Clara Swap</li>
<li class="newsreader-400" style="float:right; padding-top: 10px;" id="login"><a href="login.html" class="last-button">Login</a></li>
<li class="newsreader-400" style="float:right; padding-top: 10px;" id="signup"><a href="signup.html">Sign Up</a></li>
<li class="newsreader-400" style="float:right; padding-top: 10px;"><a href="cart.html">Cart</a></li>
<li class="newsreader-400" style="float:right; padding-top: 10px;"><a href="post.html">Sell</a></li>
<li class="newsreader-400" style="float:right; padding-top: 10px;"><a class="active" href="shop.html">Shop</a></li>
</ul>

<hr>
<ul>
<li class="jomhuria-regular title" style="font-size: 60px; color: black;">Check out</li>
</ul>

<section class = "cartO">
<!-- <section class = "cartO" id="cartO">
<div class = "cartItem">
<div class = "cartItemContent">
<h1 class="cartItem_header newsreader-500">Item Name</h1>
Expand All @@ -48,7 +47,23 @@ <h1 class="cartItem_header newsreader-500">Item Name</h1>
<h1 class ="cartTotal_header newsreader-500">Total:</h1>
<button class="cart-button jomhuria-regular">Checkout!</button>
</div>
</section> -->
<section class="cards" id="cards">
<!-- This is where the cards will be added -->
</section>

<br>
<br>

<button class="login-button" style="margin-top: 50px;">Check out & Pay</button>
</center>
<!-- Link to Firebase -->
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-auth.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src="cart.js"></script>
</body>
</html>
90 changes: 90 additions & 0 deletions cart.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
const firebaseConfig = {
apiKey: "AIzaSyATzuEEeKwr9tht1-VZhWzjPcMue6hT3Us",
authDomain: "santa-clara-swap.firebaseapp.com",
projectId: "santa-clara-swap",
storageBucket: "santa-clara-swap.appspot.com",
messagingSenderId: "765275523808",
appId: "1:765275523808:web:6ffa04584f7f877853de85",
storageBucket: 'santa-clara-swap.appspot.com'
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
db = firebase.firestore();
storage = firebase.storage()
var storageRef = firebase.storage().ref();

var email = "";

firebase.auth().onAuthStateChanged((user) => {
if (user) {
console.log("logged in");
// User is signed in, see docs for a list of available properties
// https://firebase.google.com/docs/reference/js/v8/firebase.User
var uid = user.uid;
email = user.email;
document.getElementById("login").style.display = 'none';
document.getElementById("signup").style.display = 'none';
document.getElementById("navbar").innerHTML = `<li class="newsreader-400" style="float:right; padding-top: 10px;" onclick="firebase.auth().signOut();"><a href="" class="last-button">Sign Out</a></li> ` + document.getElementById("navbar").innerHTML;
} else {
// User is signed out
// ...
}
getCartItems();
});

function getCartItems() {
console.log("user email", email);
db.collection("carts").where("email", "==", email)
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
items = doc.data().items;
var len = items.length;
console.log(len)
for (i = 0; i < len; i++) {
console.log(i, items[i]);

var imageName = items[i];
var spaceRef = storageRef.child(imageName);
spaceRef.getDownloadURL().then(function(url) {
// Handle the download URL (e.g., display the image in an <img> tag)
console.log('Download URL:', url);
makeCards(imageName, url)
}).catch(function(error) {
// Handle any errors
console.error('Error retrieving image:', error);
});
}
});
})
.catch((error) => {
console.log("Error getting documents: ", error);
});

}

function makeCards(name, url) {
console.log(name, url);
db.collection("items").doc(name).get().then((doc) => {
if (doc.exists) {
console.log("Document data:", doc.data());
var cards = document.getElementById("cards");
cards.innerHTML +=
`<div class="card">
<div class="card__content">
<img class="card__img" style="height: 16rem;" src="${url}">
<h1 class="card__header newsreader-800">${doc.data().title} - $${doc.data().price}</h1>
<p class="card__text newsreader-400" >${doc.data().description}</p>
</div>
</div>`
} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
}).catch((error) => {
console.log("Error getting document:", error);
});
}
43 changes: 41 additions & 2 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -319,7 +319,6 @@ white{
flex: 1;
background-color: #FAFAF5;
border-radius: 0.4rem;
overflow: hidden;
box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
transition: 0.2s;
border: 1px solid #000000;
Expand Down Expand Up @@ -436,4 +435,44 @@ white{
height: 70px;
transform: translate(-50%, -50%);
z-index: 1; /* Ensure the image is above the circle */
}
}

.parent {
display: flex;
width: 100%;
align-items: center; /* Align items vertically */
justify-content: space-evenly; /* Align items horizontally */
}

.drop-container {
position: relative;
display: flex;
gap: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
height: 200px;
padding: 20px;
border-radius: 10px;
border: 2px dashed #555;
color: #444;
cursor: pointer;
transition: background .2s ease-in-out, border .2s ease-in-out;
}

.drop-container:hover {
background: #F3EBDA;
border-color: #111;
}

.drop-container:hover .drop-title {
color: #222;
}

.drop-title {
color: #444;
font-size: 20px;
font-weight: bold;
text-align: center;
transition: color .2s ease-in-out;
}

0 comments on commit 5ccad1b

Please sign in to comment.