CODEWITHSUNDEEP
javascripthtmlgoogle-cloud-firestore
Marius
Marius

Reputation: 73

Firestore display property with a function in webshop

this will be very hard to explain for me, so I hope you understand. And thanks beforehand for attempting to understand my goal.

I am completely new to Firestore, and I've sat for hours and read the documentations, which in the end doesn't even work. So eventually I found a video on YouTube from Firestore that got me started on the right path.

Simply, I am creating a webshop with a x amount of products which I want to store in a firestore database, info such as price, sku, and just a identifyer to easily find the correct product if I want to read the data.

My goal is to be able to simply run a function from my HTML file, let's say getData(price[sku]); And it'll run the function, looking for the price for the product with the sku. (I have no experience with this so I might be wayyy out of line here with my goals)

My current code looks like this:

async function getData(data) {
  const q = query(collection(db, 'products'));
  const qsnap = await getDocs(q);
  qsnap.forEach((doc) => {
    console.log(doc.id, " => ", doc.data() + `.` + data);
  });
}

getData(price);

And you can probably see what I want to do here. I am adding "price" when I run getData(price); and I want it to just add .price to the end of doc.data().price but this doesn't work. And I have no idea on how to make it look up the SKU for each product either.

The console just returns x-product => [object Object].price And if I remove + `.` + data from the code it returns {sku: 'd80cb795', id: 'd80cb795-945d-4f3f-a875-c04a380bb59a', price: 250} like it should when I am not looking for a specific property.

In the future I also want to implement a shopping cart system which uses the SKU to add to a cart, but this is just too advanced for me and I might never get there. I just hope that this information is enough to make my goal understandable. And I want to learn how to do this. There is basically no documentation on this specific thing.

So if you can, please don't spoon-feed me and give me critique if I'm typing wrong. It helps me learn.

Upvotes: 1

Views: 48

Answers (1)

Alex
Alex

Reputation: 864

I can see you are trying to get all the documents ('products') from a collection. If you want to search them by SKU, you need to have it first, this can be done by getting it from the scanner or maybe from a previous query using the product id, in such case I would simply use the product ID instead for the query but that's up to you. This is how you can Get multiple documents from a collection applied to your specific case:

async function getData(inputSKU) {
    const q = query(collection(db, 'products'), where("sku", "==", inputSKU));
    
    const qsnap = await getDocs(q);
    qsnap.forEach((doc) => {
        console.log(doc.id, "=>", doc.data())
    });
}

getData(inputSKU);

If you want to get only a document that has a unique id/SKU or if you only want to get a single document per product then the best option would be something like this:

const docRef = doc(db, 'products', 'inputSKU');
const docSnap = await getDoc(docRef);

// and optionally...
if (docSnap.exists()) {
    console.log("Product data:", docSnap.data());
  } else {
    // doc.data() will be undefined in this case
    console.log("No such product");
  }

When you add + '.' + data it doesn't make sense speaking of adding it as a parameter for price, if you want to add data to your document or in other words Update a document without overwriting the entire document , use the update() method:

const productRef = doc() const productRef = doc(db, "product", inputSKU);

  // Set the "price" to the amount you want
  await updateDoc(productRef, {
    price: anyPrice
  });

You can use this in a separate function or add it to the one you use to query the product.

In the future if you want to create a cart it would be as simple as creating a document or collection depending on the structure you have chosen with all the products id/sku you want to buy as you previously created a collection of products.

Upvotes: 1

Related Questions