rosedoucette / P5-Web-Dev-Kanap

Boiler plate code for project 5 of Web Developer.
0 stars 0 forks source link

cart.js #2

Open rosedoucette opened 1 year ago

rosedoucette commented 1 year ago

@AccessiT3ch, I believe I have correctly populated the cart.js page with the template literals from the cart.html page. I was just hoping you could look it over and let me know if I'm on the right track. I was also wondering how I should go about linking the cart.js to the web page so I can actually add items to the cart and see what they're doing. I'm not exactly sure the verbiage to use for a google search.

AccessiT3ch commented 1 year ago

@rosedoucette - the template literal itself looks good, just one thing about your file setup:

You won't need this line(res => res.json()).then(data => { because you're not fetching any data from the API. If you remove that and get the cart from localStorage (like you did on the product page) then you can loop through the cart the same way you're looping through data, you would just change data to cart so it might look something like this:

// grab the cart from localStorage
const cart = JSON.parse (localStorage.getItem ("cart") || "[]");
// identify the el you want to inject the template literals into
const container = document.getElementById(`items`);
// loop through the cart array
cart.forEach(...);

cart.js should automatically be loading on the cart page because the cart page is loading a script called cart.js. It might not have been doing anything before b/c of the first line, but should be loading/working otherwise :)

AccessiT3ch commented 1 year ago

Oh and in the template literal, you'll want to reference the items in the cart, which should have the color which should the selected color for that item. The cart item object will also have colors from the original data you grabbed from the API, but you won't need that here! And don't forget to include the product.quantity in the quantity paragraph tag!