diff --git a/js/addKartProduct.js b/js/addKartProduct.js index 26a52139..0b0d30e0 100644 --- a/js/addKartProduct.js +++ b/js/addKartProduct.js @@ -1,112 +1,144 @@ document.addEventListener("DOMContentLoaded", () => { - [ + const elementsToLoad = [ { id: "footer-addkart", url: "../footer/footer.html" }, { id: "header-addkart", url: "../header/header.html" }, - ].forEach(({ id, url }) => - fetch(url) - .then((res) => res.text()) - .then((data) => (document.getElementById(id).innerHTML = data)) - .catch((err) => console.error(`Error loading ${url}:`, err)) - ); + ]; + + elementsToLoad.forEach(({ id, url }) => loadHtml(id, url)); }); -const getQueryParameter = (name) => new URLSearchParams(window.location.search).get(name); +const loadHtml = (id, url) => { + fetch(url) + .then((res) => res.ok ? res.text() : Promise.reject(res.status)) + .then((data) => document.getElementById(id).innerHTML = data) + .catch((err) => { + console.error(`Error loading ${url}:`, err); + document.getElementById(id).innerHTML = `

Failed to load content. Please try again later.

`; + }); +}; + +const getQueryParameter = (name) => { + return new URLSearchParams(window.location.search).get(name); +}; -let simiCategory; const formatIndianRupee = (number) => { const [integerPart, decimalPart] = number.toString().split("."); return integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (decimalPart ? "." + decimalPart : ""); }; -const createSearchProductCard = (product) => { - simiCategory = product.category; - const discont = Math.floor((product.rating * parseInt(product.price.toString().slice(0, 2))) / 10); - const afterDiscontPrice = Math.round(((100 - discont) * product.price) / 100); +const createProductCard = (product) => { + const discount = Math.floor((product.rating * parseInt(product.price.toString().slice(0, 2))) / 10); + const discountedPrice = Math.round(((100 - discount) * product.price) / 100); + return ` - -
-
-
- ${product.name} -
-
-   Add To Cart -  Buy Now +
+
+
+ ${product.name} +
+
-
-
-
-
${product.name}
-
${product.rating}  
- Special price -
₹${formatIndianRupee(afterDiscontPrice)} ₹${formatIndianRupee(product.price)} ${discont}% off ?
-
Available offers
-
- Bank Offer Get ₹50 instant discount on first Flipkart UPI transaction on order of ₹200 and above T&C
- Bank Offer 5% Cashback on Flipkart Axis Bank Card T&C
- Special Price Get extra 12% off (price inclusive of cashback/coupon) T&C
- View 12 more offers -
-
Warranty     Covers Manufacturing Defects Know More
-
-
-
Delivery
-
-
-
- - -
- -
-
+
+
+
${product.name}
+
${product.rating}  
+ Special price +
+ ₹${formatIndianRupee(discountedPrice)} + ₹${formatIndianRupee(product.price)} + ${discount}% off +
+
Available offers
+
+ + Bank Offer Get ₹50 instant discount on first Flipkart UPI transaction on order of ₹200 and above T&C
+ + Bank Offer 5% Cashback on Flipkart Axis Bank Card T&C
+ + Special Price Get extra 12% off (price inclusive of cashback/coupon) T&C
+ View 12 more offers
-
-
-
Delivery by 16 Jul, Tuesday
-
-
Free ?
+
+ Warranty +   Covers Manufacturing Defects Know More +
+
+
+
Delivery
+
+
+
+ + + + +
+ +
+
+
+
+
+
Delivery by 16 Jul, Tuesday
+
+
Free ?
+
+
if ordered before 9:59 PM
-
if ordered before 9:59 PM
+
View Details
-
View Details
+
${product.description}
-
${product.description}
-
-
`; +
`; }; -const createSearchSimilarProducts = (product) => { - const discont = Math.floor((product.rating * parseInt(product.price.toString().slice(0, 2))) / 10); - const afterDiscontPrice = Math.round(((100 - discont) * product.price) / 100); +const createSimilarProductCard = (product) => { + const discount = Math.floor((product.rating * parseInt(product.price.toString().slice(0, 2))) / 10); + const discountedPrice = Math.round(((100 - discount) * product.price) / 100); + return ` - - -
-
- ${product.id} -
-
${product.name.slice(0, 20)}${product.name.length > 20 ? "..." : ""}
-
${product.rating}  
-
₹${formatIndianRupee(afterDiscontPrice)} ₹${formatIndianRupee(product.price)} ${discont}% off
-
- `; + + ${product.name} +
₹${formatIndianRupee(discountedPrice)}
+
${product.name}
+
₹${formatIndianRupee(product.price)}
+
${discount}% off
+ `; }; -const searchFetch = (products) => { - document.getElementById("addkart").innerHTML = products.map(createSearchProductCard).join(""); -}; +const displayProduct = async () => { + try { + const productId = getQueryParameter("id"); + if (!productId) throw new Error("Product ID is missing in the URL."); + + const response = await fetch("https://raw.githubusercontent.com/csathnere/APIs/main/json-ec/products.json"); + if (!response.ok) throw new Error("Failed to fetch product data."); + + const products = await response.json(); + const product = products.find((p) => p.id === parseInt(productId)); + if (!product) throw new Error("Product not found."); + + document.getElementById("productkart-card").innerHTML = createProductCard(product); -const searchFetchSimi = (products) => { - document.getElementById("similarProducts").innerHTML = products.map(createSearchSimilarProducts).join(""); + const similarProductsContainer = document.getElementById("similar-products"); + similarProductsContainer.innerHTML = products + .filter((p) => p.category === product.category && p.id !== product.id) + .map((p) => createSimilarProductCard(p)) + .join(""); + } catch (error) { + console.error(error); + document.getElementById("productkart-card").innerHTML = `

Error: ${error.message}

`; + } }; -fetch("https://raw.githubusercontent.com/csathnere/APIs/main/json-ec/product.json") - .then((res) => res.json()) - .then((data) => { - const query = getQueryParameter("query"); - searchFetch(data.filter((product) => product.name == query)); - setInterval(() => searchFetchSimi(data.filter((product) => product.category == simiCategory).slice(0, 12)), 1500); - }) - .catch((err) => console.error("Error fetching data:", err)); +displayProduct(); diff --git a/viewcart/index.html b/viewcart/index.html index b80f6bff..798b7945 100644 --- a/viewcart/index.html +++ b/viewcart/index.html @@ -123,7 +123,8 @@

Missing Cart items?

-->
- +
@@ -140,7 +141,7 @@
PRICE DETAILS
- +