Modify cart changes?

[divineaverage]

Hey Conor,

After much research, I found something that might be shorter for modifying the cart - but I could be totally off-base. I kept the code we were working yesterday, commented out, but the new code starts on line 71 of cart.js.

The thing is, it's throwing an error that "products" isn't defined -- which I'm not understanding, because it is defined in the function it's calling. What's the fix - or is this just all wrong? Thanks in advance!

[divineaverage]

Lol I never assigned this. SIGH!

[AccessiT3ch]

@divineaverage - It looks like it's a scoping issue, in the displayCart function, products is being passed into that function's scope and won't be available outside of that function. It does look, however, like you the changeQuantity function is expecting a cart argument which is not being provided on line 68.

I'm guessing the products array should be passed to the changeQuantity function, which you can then pass to the displayCart function.

WARNING: Infinite and Exponential Loop!

Right now your displayCart function is calling changeQuality which, in turn, calls the displayCart function...resulting in an infinite loop.

Furthermore, each changeQuality function calls displayCart once for every item in the cart, resulting in growing number of changeQuality executions every loop (assuming there is more than one item in the cart), which will quickly escalate and eat up all available RAM.

Pro Tip: When we accidentally enter an infinite loop, the quickest (and often the only) way to kill the loop is to close the tab!

[divineaverage]

Ok, closer! The errors are now gone, but it's still not working. Neither is the order form/confirmation. We can probably chat tomorrow, but if you see something obvious that I can fix tonight I'll take any tips! Still not confident but a little more adventurous at least lol...

[divineaverage]

Hey Conor,

It's been about 10 hours and I've gotten nowhere with any of it, really. And now the code is creating this enormous array and I have no idea why or how to stop it. And for some reason, even though I stopped it, my browser is acting really bizarre. No idea what to do at this point.

[AccessiT3ch]

@divineaverage - if your browser is saving some huge array in localstorage, it could be effecting the browser's capacity. While the site is open, inspect the page and (under the application tab) try clearing the local storage to see if your browser starts acting more normal again.

As for what's going on with your code, it might be helpful to essentially comment out almost all of it and try uncommenting things piece by piece to try and see where things are going sideways.

Lastly, this won't be what you want to hear, but take a break! After 10hrs of banging our heads on keyboards we're not our best programmer selves, and stepping away can bring enormous clarity when stepping back in the next day or even a few minutes/hours later. Also, I can definitely take a look tomorrow morning if your most recent stuff is pushed (even if it's borked!) :)

[divineaverage]

I stopped, after much yelling and banging. Hehehe! I did upload the latest, it keeps focusing in on one line (I think it was 56) that doesn't make sense, as it has always been there and hasn't been causing an issue. Which makes me wonder if there's a syntax error somewhere else, perhaps. But because it's working so hard, it's difficult to get my browser to cooperate to check lol.

[divineaverage]

Ok, I somehow broke my Chrome profile and it's glitching on Mac. Haven't been able to fix it so I uninstalled and switched to Firefox... where I am not having that issue anymore with the looping code making a giant array. What are you seeing? What a weird experience lol....

[AccessiT3ch]

@divineaverage - I just took a look at the code and ran it in my browser but didn't see any big arrays or infinite loops, were you able to clear your localstorage?

Is it working better in Firefox? I'm seeing the cart render as expected but deleting and updating the quantity don't make it to the cart in localstorage (if i refresh, the product is still rendered even though I deleted it).

Hopefully restarting your computer, or reinstalling Chrome will fix your browser! 😬

[divineaverage]

Uninstalled, rebooted, reinstalled, same issues. Really odd. Going to blame incompatibility with outdated MacOS that I can't update until Hilton says "go" lol. Anyhow, yes - the delete is working, but not saving to local storage while the modify isn't working at all. Still working on how to update the totals correctly, but what's the secret with local storage? Have tried 5 different ways and they wont work.

[AccessiT3ch]

@divineaverage - Im not seeing anywhere in the file that you're updating the value stored in localstorage.

If you have your get function like this:

function getCartFromLS() { 
   const cart = JSON.parse(localStorage.getItem("cart")); 
   if (typeof cart === "string") { 
     return JSON.parse(cart); 
   } 
   return cart || []; 
 }

You might have a set function that looks something like:

function setCartFromLS(cart) { 
   localStorage.setItem("cart",JSON.stringfy(cart));
 }

Which you call after updating your cart array on user interaction.

[divineaverage]

AHHHHHH I think that makes sense! Secondary question - is there a way to write the "populate" section differently so that it's a little clearer what's happening? I pieced it together from research, but I feel like I don't know what I'm doing line by line. How can I extrapolate this a little into longer, but maybe more logical piece of code?

function displayCart(products) { for (const product of products) { cartProducts.innerHTML += fillCartHTML(product); price += product.price; qty += product.quantity; } priceTotal.textContent = price; quantityTotal.textContent = qty;

[AccessiT3ch]

Ah, honestly this looks pretty good, you could loop through products twice (the first time setting the HTML and the second time updating the quantity/price, but then you're looping twice as many times as necessary. If you want, you could break both into two functions and call them each over a single iteration of your cart.

If you're having trouble understanding it line by line, try adding comment notes describing each line ☺️

[divineaverage]

Ok, everything is making way more sense now after making notes - the awakening might be happening lol. Still having a hard time figuring out how to delete things from localStorage and how to modify an input to change another field.

Deleting from localStorage just isn't working with the method we've tried, unsure why but will keep messing with it. Let me know if you have any alternative ideas - there's no error, it just doesn't work. I either delete everything in the cart from LS or delete nothing every time.

As for modifying, I need to update the price on the item when the quantity changes - and I can't figure out how to get to the price. It's one of two "p" tags within a class, but it's not the first. How can I differentiate something that doesn't have a unique class or id? Should I be trying to find its data id and working that way, or is it easier than that?

Hope this all makes sense. Not much has changed but I can push my code again later tonight or tomorrow. More asking theoretical questions right now 🤣

Thank you!

On Thu, Jan 5, 2023, 9:08 PM Conor @.***> wrote:

Ah, honestly this looks pretty good, you could loop through products twice (the first time setting the HTML and the second time updating the quantity/price, but then you're looping twice as many times as necessary. If you want, you could break both into two functions and call them each over a single iteration of your cart.

If you're having trouble understanding it line by line, try adding comment notes describing each line ☺️

— Reply to this email directly, view it on GitHub https://github.com/divineaverage/P5_Kanap/issues/1#issuecomment-1373046338, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZVIXX23VWVZGHV2RI3GFG3WQ55ALANCNFSM6AAAAAATMOH4D4 . You are receiving this because you were mentioned.Message ID: @.***>

[AccessiT3ch]

Deleting from localStorage just isn't working with the method we've tried, unsure why but will keep messing with it. Let me know if you have any alternative ideas - there's no error, it just doesn't work. I either delete everything in the cart from LS or delete nothing every time.

@divineaverage - After updating the array in your JS (aka - removing the deleted item from the array), you should be able to simply update the existing string in localStorage with a stringified version of the new array.

// get the cart before deleting
const oldCart = JSON.parse(localStorage.getItem('cart')
// filter out the item to be deleted
const newCart = oldCart.filter((item) => item.id !== theIdToDelete);
// override 'cart' with an updated array
localStorage.setItem('cart', JSON.stringify(newCart));

How can I differentiate something that doesn't have a unique class or id?

Probably the easiest way will be to give it a unique class :)

[divineaverage]

I might be totally wrong, but I don't think I can use the item id because the item id is the same for 2 couches that are the same model but different colors (and you wouldn't want to delete both if they're both in the cart). I figured out a way to concatenate the color with the id to make a unique "SKU," but I don't know where I could run that to assign the "SKU" back to the item arrays... so I assume I'm overcomplicating things again. LOL

[divineaverage]

I also updated the modify cart section - it's not working yet, as I can't quite figure out how to successfully call the actual item price and not the price displaying on the page (because that's a subtotal based on what's in the cart).

[divineaverage]

@AccessiT3ch I was making headway and got super excited... when suddenly line 12 started throwing an error I don't understand.

Uncaught SyntaxError: "undefined" is not valid JSON at JSON.parse (<anonymous>) at cart.js:12:19

I didn't touch line 12. But now it's breaking the entire page. How do I fix this?

[divineaverage]

WAIT I figured it out.... something is up with one of the items I had in the cart. Will try to reproduce again if I can, but I'm back on track. IGNORE ME. lol

[divineaverage]

REAL QUESTION TIME! How the hell do I get the dataset price information on line 98? (trying to follow https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes but it keeps saying that it's null.

[AccessiT3ch]

@divineaverage - it doesn't look like data-price is being set as a data attribute on the article, so you'd have to either add it to the html that you're populating or get the price from the cart in localStorage.

[divineaverage]

Got it. That worked, but it's not doing what I want (which now makes sense). Since I'm calling the cart from local storage, I can't get the unit price for an item because that's nowhere in the saved cart. So I'm trying to get the subtotal instead, and it keeps returning "undefined" - can't figure out how to get it to call a value.

Alternately, (trying to think of any way possible to do this) - how the heck do you track the up vs the down on the spinner in the number input? I'd love to just "add one if up" or "subtract one if down" but I can't figure out for the life of me how you'd do that.

[divineaverage]

Hello @AccessiT3ch! I got sick with Covid and have been pretty out of it - I just realized we didn't reschedule for today and you may not have seen my email. I am so sorry! I am getting back into things and still struggling with the above, but am going to look at it with fresh eyes this weekend. If you have any thoughts, I'm all "ears" lol. Talk Wednesday, apologies again!

[divineaverage]

Ok better question, as I think I found another way.... why isn't the .value working at line 100?