FIrestore Product Card test (Filter test)

by Alex Cowan

HTML

<!DOCTYPE html>
<html>

  <!DOCTYPE html>
  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-firestore.js"></script>

  <script>
    var config = {

      apiKey: "AIzaSyDWNTqk_QnOwEKBzab5FD9NUsDC5xxDQ7Q",
      authDomain: "brandefy-user-database.firebaseapp.com",
      databaseURL: "https://brandefy-user-database-default-rtdb.firebaseio.com",
      projectId: "brandefy-user-database",
      storageBucket: "brandefy-user-database.appspot.com",
      messagingSenderId: "862207940177",
      appId: "1:862207940177:web:0a48e25f8d2947c1f38a70",
      measurementId: "G-N7MTFJGHK9"
    };

    // Initialize Firebase
    firebase.initializeApp(config);
    const firestore = firebase.firestore();

  </script>

  <!DOCTYPE html>
  <html>

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Your Website Title</title>
    </head>

    <body>
      <nav>
        <a href="#">Home</a>
        <!-- Add a class "dropdown" to the Products link -->
        <div class="dropdown">
          <a href="#">Products</a>
          <!-- Add a class "dropdown-content" to the dropdown content -->
          <div class="dropdown-content">
            <a onclick="handleOptionClick('serum')" href="#">Serum</a>
            <a onclick="handleOptionClick('cream')" href="#">Cream</a>
            <a onclick="handleOptionClick('cleanser')" href="#">Cleanser</a>
          </div>
        </div>
        <a href="#">About Us</a>
  ...

CSS

body {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 header {
   background-color: #eaff9b;
   font-family: serif;
   color: #000;
   padding: 2px;
   text-align: center;
 }

 nav {
   display: flex;
   background-color: #000;
   padding: 10px;
 }

 /* Style for the navigation links */
 nav a {
   color: white;
   text-decoration: none;
   padding: 10px;
   position: flex;
 }

 .dropdown {
   margin-top: 10px;
 }

 /* Style for the dropdown content */
 .dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
 }

 /* Style for the dropdown links */
 .dropdown-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
 }

 /* Change color on hover for dropdown links */
 .dropdown-content a:hover {
   background-color: #ddd;
 }

 /* Show the dropdown content when hovering over the "Products" link */
 .dropdown:hover .dropdown-content {
   display: block;
 }

 section {
   padding: 20px;
   background-color: #fff;
   justify-content: center;
 }

 .product-card {
   border: 1px solid #ddd;
   float: left;
   display: inline-block;
   padding: 10px;
   margin: 10px;
   border-radius: 5px;
   text-align: center;
   width: 200px;
   height: 400px;
   background-color: #999;
 }

 .product-image {
   max-width: 100%;
   height: auto;
 }

 footer {
   background-color: #333;
   color: #fff;
   text-align: center;
   padding: 10px;
   position: fixed;
   bottom: 0;
   width: 100%;
 }

JavaScript

// Initialize Firebase
console.log(localStorage.getItem("pn"));
// Create a Firestore reference
let db = firebase.firestore();
// Function to fetch products from Firestore

async function fetchProducts() {
  const productContainer = document.getElementById('product-container');
  try {
    const productsSnapshot = await db.collection('products').get();

    productsSnapshot.forEach((doc) => {
      const productData = doc.data();
      const productCard = createProductCard(productData);
      productContainer.appendChild(productCard);

    });
  } catch (error) {
    console.error('Error fetching everything: ', error);
  }
}

// Function to create a product card
function createProductCard(productData) {
  const productCard = document.createElement('div');
  productCard.className = 'product-card';

  const productName = document.createElement('h3');
  productName.textContent = productData.name;

  const productPrice = document.createElement('p');
  productPrice.textContent = `Price: $${productData.price}`;

  const productImage = document.createElement('img');
  productImage.src = productData.img;
  productImage.alt = productData.name;
  productImage.className = 'product-image';

  productCard.appendChild(productName);
  productCard.appendChild(productPrice);
  productCard.appendChild(productImage);

  return productCard;
}
// Specify the collection and the name you want to filter by
function handleOptionClick(option) {
  const collectionRef = db.collection('products');
  const nameToFilter = option;

  // Use where() to filter elements by name
  const query = collectionRef.where('cat', '==', nameToFilter);

  // Execute the query
  query.get()
    .then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
        // Access the document data
        const data = doc.data();
        console.log('Document data:', data);
      });
    })
    .catch((error) => {
      console.error('Error getting documents: ', error);
    });
  // Example JavaScript function to...