diff --git a/public/js/product-detail.js b/public/js/product-detail.js new file mode 100644 index 0000000..b1effe0 --- /dev/null +++ b/public/js/product-detail.js @@ -0,0 +1,30 @@ +function productDetail() { + var url = new URL(window.location); + var urlParams = new URLSearchParams(url.search); + var productId = urlParams.get('product'); + + if (!productId) { + window.location = '/'; + } + + (function renderProduct() { + var productsCollection = firebase.firestore().collection('products'); + productsCollection.doc(productId).get().then(function(snapshot) { + if(!snapshot.exists) { + window.location = '/'; + } + var product = snapshot.data(); + + $('#image-preview').attr('src', product.imageUrl); + $('#name').text(product.name); + $('#description').text(product.description); + $('#price').text('P ' + parseFloat(product.price).toFixed(2)); + $('#checkout').attr('href', '/checkout.html?product=' + productId); + + $('#product-detail').removeClass('hide'); + $('#loader').addClass('hide'); + }); + })(); +} + +$(document).ready(productDetail); \ No newline at end of file diff --git a/public/product.html b/public/product.html index ff1c3ce..a93fe7b 100644 --- a/public/product.html +++ b/public/product.html @@ -6,6 +6,8 @@ + + @@ -30,31 +32,47 @@ -
+

- +
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam mollitia officia, tempora molestiae ducimus molestias dolor impedit. Et ut ex, placeat vero earum facilis tempore, nemo in quis illum id. +

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam mollitia officia, tempora molestiae ducimus molestias dolor impedit. Et ut ex, placeat vero earum facilis tempore, nemo in quis illum id.

-
P 200.00
- add_shopping_cartPlace Order +
P 200.00
+ add_shopping_cartPlace Order
+
+
+
+
+ +
+ + \ No newline at end of file