@@ -37,7 +18,7 @@
alt="image of a high mountain lake"
/>
@@ -53,54 +34,9 @@
- 
+
+
SleepOutside
-
- SleepOutside
-
-
- SleepOutside
-
-
-
-
-
-
+ 
- 
- 
- 
- ${alert.message}
+ `, + ) + .join(""); + + let alertParent; + if (typeof elementOrSelector === "string") { + alertParent = document.querySelector(elementOrSelector); + } else if (elementOrSelector instanceof Element) { + alertParent = elementOrSelector; + } + + const htmlEl = document.querySelector("html"); + const modalActiveClass = "modal-active"; + htmlEl.classList.add(modalActiveClass); + alertParent.appendChild(section); + + const top = ( + window.innerHeight / 2 - + section.offsetHeight / 2 + + window.scrollY + ).toFixed(); + const left = (window.innerWidth / 2 - section.offsetWidth / 2).toFixed(); + section.style = `left: ${left}px; top: ${top}px; opacity: 1;`; + + htmlEl.addEventListener("click", function listenerFunc(e) { + if (e.target === alertParent || alertParent.contains(e.target)) { + return; + } + + htmlEl.classList.remove(modalActiveClass); + htmlEl.removeEventListener("click", listenerFunc); + }); + } +} diff --git a/src/js/ProductData.mjs b/src/js/ProductData.mjs index 2361ff218..41afbdf9a 100644 --- a/src/js/ProductData.mjs +++ b/src/js/ProductData.mjs @@ -6,18 +6,31 @@ function convertToJson(res) { } } -export default class ProductData { +export async function findProductById(id) { + const products = await getData(); + return products.find((item) => item.Id === id); +} + +export function getData(category = "tents") { + return fetch(`../json/${category}.json`) + .then(convertToJson) + .then((data) => data); +} + + +export default class ProductData { constructor(category) { this.category = category; this.path = `../json/${this.category}.json`; } - getData() { + getData() { return fetch(this.path) + //.then(convertToJson).then((data) => data); .then(convertToJson) - .then((data) => data); + .then((data) => data.filter((item) => item.Id != '989CG' && item.Id != '880RT')); } async findProductById(id) { - const products = await this.getData(); + const products = await this.getData() return products.find((item) => item.Id === id); } -} +} \ No newline at end of file diff --git a/src/js/ProductDetails.mjs b/src/js/ProductDetails.mjs new file mode 100644 index 000000000..af0687041 --- /dev/null +++ b/src/js/ProductDetails.mjs @@ -0,0 +1,51 @@ +import { setLocalStorage, getLocalStorage } from "./utils.mjs"; +import { findProductById } from "./ProductData.mjs"; +import { qs, setContent } from "./utils.mjs"; + +function productDetailsTemplate(product) { + return `${product.Brand.Name}
+${product.NameWithoutBrand}
+$${product.FinalPrice}
+${product.Colors[0].ColorName}
++ ${product.DescriptionHtmlSimple} +
+
+
+
${product.Brand.Name}
+${product.Name}
+$${product.FinalPrice}
+${product.name}
+${product.description}
+ $${product.price} + `; + return card; + } +} +*/ + + + +/* +export default class ProductListing { + constructor(category, dataSource, listElement) { + // We passed in this information to make our class as reusable as possible. + // Being able to define these things when we use the class will make it very flexible + this.category = category; + this.dataSource = dataSource; + this.listElement = listElement; + } + + async init() { + // our dataSource will return a Promise...so we can use await to resolve it. + const list = await this.dataSource.getData(); + // render the list - to be completed + } + } +*/ \ No newline at end of file diff --git a/src/js/cart.js b/src/js/cart.js index a2fb3d8ef..93b40c593 100644 --- a/src/js/cart.js +++ b/src/js/cart.js @@ -1,7 +1,7 @@ import { getLocalStorage } from "./utils.mjs"; function renderCartContents() { - const cartItems = getLocalStorage("so-cart"); + const cartItems = getLocalStorage("so-cart") || []; const htmlItems = cartItems.map((item) => cartItemTemplate(item)); document.querySelector(".product-list").innerHTML = htmlItems.join(""); } diff --git a/src/js/main.js b/src/js/main.js index e69de29bb..6b665bb8e 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -0,0 +1,37 @@ +import { loadHeaderFooter } from "./utils.mjs"; + +import ProductData from "./ProductData.mjs"; +import ProductList from "./ProductList.mjs"; + +loadHeaderFooter(); + +const dataSource = new ProductData("tents"); +const element = document.querySelector(".product-list"); +const listing = new ProductList("Tents", dataSource, element); + +listing.init(); + + +/* +import ProductData from "./ProductDetails.mjs"; +import ProductListing from "./ProductList.mjs"; + +// Create an instance of ProductData +const productDataInstance = new ProductData(); + + + +// estruturando ProductListing + +// Select the HTML element where the product list will be rendered +const listElement = document.getElementById("product-list"); + +// Specify the URL for your product data (JSON format) +const productDataUrl = "path/to/your/product-data.json"; // Adjust as necessary + +// Create an instance of ProductListing for a specific category (e.g., 'electronics') +const productListing = new ProductListing("your-categor", productDataUrl, listElement); + +// Initialize the product listing to fetch and display products +productListing.init(); +*/ \ No newline at end of file diff --git a/src/js/product.js b/src/js/product.js index 0b8d0aa67..8df4bea14 100644 --- a/src/js/product.js +++ b/src/js/product.js @@ -1,18 +1,22 @@ -import { setLocalStorage } from "./utils.mjs"; -import ProductData from "./ProductData.mjs"; +import { setLocalStorage, getLocalStorage } from "./utils.mjs"; +import { findProductById } from "./ProductData.mjs"; -const dataSource = new ProductData("tents"); - -function addProductToCart(product) { - setLocalStorage("so-cart", product); -} -// add to cart button event handler -async function addToCartHandler(e) { - const product = await dataSource.findProductById(e.target.dataset.id); - addProductToCart(product); -} - -// add listener to Add to Cart button -document - .getElementById("addToCart") - .addEventListener("click", addToCartHandler); + //const dataSource = new ProductData("tents"); + + function addProductToCart(product) { + // TODO product should be an array + const currentCart = getLocalStorage("so-cart") || []; + currentCart.push(product); + setLocalStorage("so-cart", currentCart); + } + + // add to cart button event handler + async function addToCartHandler(e) { + const product = await findProductById(e.target.dataset.id); + addProductToCart(product); + } + + // add listener to Add to Cart button + document + .getElementById("addToCart") + .addEventListener("click", addToCartHandler); diff --git a/src/js/utils.mjs b/src/js/utils.mjs index 1a04d87ff..c16ebbd64 100644 --- a/src/js/utils.mjs +++ b/src/js/utils.mjs @@ -9,10 +9,41 @@ export function qs(selector, parent = document) { export function getLocalStorage(key) { return JSON.parse(localStorage.getItem(key)); } + // save data to local storage export function setLocalStorage(key, data) { localStorage.setItem(key, JSON.stringify(data)); } + + +export function setContent(selector, content) { + qs(selector).innerHTML = content; +} + +// helper to get parameter strings +export function getParam(param) { + const queryString = window.location.search; + const urlParams = new URLSearchParams(queryString); + const product = urlParams.get(param); + return product; +} + +// function to take a list of objects and a template and insert the objects as HTML into the DOM +export function renderListWithTemplate( + templateFn, + parentElement, + list, + position = "afterbegin", + clear = false +) { + const htmlStrings = list.map(templateFn); + // if clear is true we need to clear out the contents of the parent. + if (clear) { + parentElement.innerHTML = ""; + } + parentElement.insertAdjacentHTML(position, htmlStrings.join("")); +} + // set a listener for both touchend and click export function setClick(selector, callback) { qs(selector).addEventListener("touchend", (event) => { @@ -21,3 +52,28 @@ export function setClick(selector, callback) { }); qs(selector).addEventListener("click", callback); } + +async function loadTemplate(path) { + const res = await fetch(path); + const template = await res.text(); + return template; +} + +// dynamically load header and footer into page +export async function loadHeaderFooter() { + const headerTemplate = await loadTemplate("../public/partials/header.html"); + const headerElement = document.querySelector("#main-header"); + const footerTemplate = await loadTemplate("../public/partials/footer.html"); + const footerElement = document.querySelector("#main-footer"); + + renderWithTemplate(headerTemplate, headerElement); + renderWithTemplate(footerTemplate, footerElement); +} + +export function renderWithTemplate(template, parentElement, data, callback) { + parentElement.insertAdjacentHTML("afterbegin", template); + //if callback... call it and pass data + if (callback) { + callback(data); + } +} \ No newline at end of file diff --git a/src/product_pages/index.html b/src/product_pages/index.html new file mode 100644 index 000000000..7cddb54cf --- /dev/null +++ b/src/product_pages/index.html @@ -0,0 +1,19 @@ + + + + + +
+
+ SleepOutside
+
+
+ SleepOutside
+
+
+
+
+
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 4a5eef384..9e045ab9f 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -10,21 +10,10 @@ export default defineConfig({
input: {
main: resolve(__dirname, "src/index.html"),
cart: resolve(__dirname, "src/cart/index.html"),
+ product: resolve(__dirname, "src/product_pages/index.html"
+ ),
checkout: resolve(__dirname, "src/checkout/index.html"),
- product1: resolve(
- __dirname,
- "src/product_pages/cedar-ridge-rimrock-2.html"
- ),
- product2: resolve(__dirname, "src/product_pages/marmot-ajax-3.html"),
- product3: resolve(
- __dirname,
- "src/product_pages/northface-alpine-3.html"
- ),
- product4: resolve(
- __dirname,
- "src/product_pages/northface-talus-4.html"
- ),
},
},
},
-});
+});
\ No newline at end of file