Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Tadjiev Codes
9,626 PointsJS tiny shopping cart and Objects, Arrays, Functions related bugs, please help to fix
Dear folks,
Could someone please help me to understand the bugs and problems that I'm having in my little web app or project and fix them for me, please.
Workspace Link: https://w.trhou.se/exgtpkwwef
1) Line 947 of addToCart() function throws an error sometimes not always, but why? As it can't access the array's object's price or sth like that but 90% of the time it works. what's the bug?
2) still having problems with the looping through arrays and displaying items accordingly on function displayStoreItems(). How to combine the loops so everything gets displayed? And, what would be a simple way to force the rows of items into the next line once reaches four or 5 items in the row. Tried doing flex-wrap: wrap and it doesn't work.
3) displayCartCheckout() line 771 errors, I want it to load together with displayCartItems n show the prices of Total tax total price and calculateCartTotals2() on line 1125 can't make it work. First time doing a calculation of such a cart with arrays n objects.
4) When I add item number 1 for the first item it adds as maxPerCustomer set to 1 but when I add the same item again . it creates a new item inside the cart while I want the same item to be incremented if it's the same item being added again. How to do that?
5) What's wrong with the changeCurrency() function on line 1273 with ES6 method Intl.NumberFormat. What I should do so that storeItems Array items change the prices while currency changed through the dropdown list? I read on MDN that .map array iteration method can convert the numbers, tried doing that still sth is wrong with it. I found a Jquery method down of that function but I wanna use this new method for real than Jquery so it's pure JS only. Plus, "en-CA" somewhere it's written en-CAD. en-CAD though gives an error in the console.
6) Does my reviewItem() function work to add the new review to the section of reviews of the Object? Cuz when I click itemDetails button the review doesn't seem to show the newly added review.
Really Appreciate if someone could help me out to get out of these bugs and errors🙏🙏🙏 Jennifer Nordell KRIS NIKOLAISEN Steven Parker Guil Hernandez
6 Answers
Steven Parker
231,248 PointsWhat I was suggesting might be done this way:
Have the code that changes the currency selection also put a value in a global variable. For example, if the seller is Canadian, then when Canadian currency is selected you might set "exchangeRate = 1.0;". But if US currency is selected, you would set "exchangeRate = 0.70;". And any time the currency is changed, you would call "displayStoreItems" again.
Then, when the items are being displayed, you just multiply the price by the exchange rate:
price.innerText = "Price: $" + tempStoreItem.price * exchangeRate;
You would similarly use the multiplier anywhere amounts are displayed, like in the shopping cart. That way, the stored prices never have to be changed.
Tadjiev Codes
9,626 PointsWow you're a star))) It works. First I didn't understand where to do this but after a few minutes realized)
if (departmentSelection.value === 'All' ||
departmentSelection.value === tempStoreItem.category) {
let currencySelector = document.getElementById('currencySelector');
if (currencySelector.value === "CAD") {
exchangeRate = 1.0;
document.querySelector("img.currencyFlag").src = "canada.jpg";
} else if (currencySelector.value === "USD") {
exchangeRate = 0.72;
document.querySelector("img.currencyFlag").src = "US.jpg";
}
And I added conditionals to check if its CAD or USD in displatCartItems as well otherwise It was displaying Old CAD prices. And In calculates function again I added the same if statement so that it calculates according to the exchange rate in subtotal amount. I hope it's not bad that I have the same conditional in three functions repetitive code. Well it works though so it's fine I guess
Steven Parker
231,248 PointsI'm not sure why you'd need other conditionals, just always multiply by exchangeRate.
Steven Parker
231,248 PointsFor this amount of detailed debugging you might consider hiring someone.
But a few hints:
- for help with a highly intermittent issue, give explicit instructions on how to replicate the problem
- if you keep a count of items displayed you can close out one row and begin another when the limit is reached
- you can't just add "flex-wrap: wrap", you'd need to abandon tables and do a total flexbox rework
- there should be one loop through items to display, and one conditional inside it
- the conditional can test if the current item matches the selected category or if the selection is "All"
- when a new item is added and if it is already in the cart, increment the count instead of adding again
- it might be better to store prices in the seller's currency and convert them only for the display
- one problem with the review is that "reviewIdMsg" is an empty span, not the input element
Before continuing with such an involved project, you might want to take some time for a bit of review and/or extra training. Topics you might focus on in particular:
- functional programming concepts (such as separation of concerns)
- debugging with browser dev tools
- CSS layouts with flexbox and grid
Tadjiev Codes
9,626 PointsThanks a lot) So you mean to say add a conditional statement just underneath the line 513? So that I have only one if that tests all the categories?
And in my review I made some changes now it displays on the output span. But my if was wrong I actually want to add each review to the specific review property of the object of the array? how to push that specifically inside the reviews section of the object which is stored in storeItems Array. Thanks
Tadjiev Codes
9,626 PointsGood day, Mr.Steven ,
Can you please help me to fix the loops and conditionals at least in my displayStoreItems function() ? Steven Parker
Thanks a lot 🙏
Steven Parker
231,248 PointsIt's just a matter of condensing it down to one loop and one conditional instead a chain of them:
// create the table element variables before the loop ...
// loop through array ONE TIME
for (var i = 0; i < storeItems.length; i++) {
var tempStoreItem = storeItems[i];
// show item if "All" selected OR if it matches the category
if (departmentSelection.value === 'All' ||
departmentSelection.value === tempStoreItem.category) {
// ... code to display the item ...
Tadjiev Codes
9,626 PointsThank you Mr.Steven your code really shortened mine) As I had 4 conditional statements and the creation of bootstrap cards was working to display accordingly but lots of redundant code. Can I please ask you to fix one more issue only with the currencies? I've been tearing off my hair with this problem. This is the most alien thing to me out of this project. This is the last thing I'm asking about this project. I seem to have figured out the other problems. I'm trying to use the ES6 method but then uncommented and tried using jquery still doesn't seem to work. Though still if u could find the right way with the ES6 method would be better. changeCurrency() function on line: 1412. Now actually both functions are there in HTML code and JS but even when I used each separately still couldn't make it work. In console shows $NAN. Earlier you said "it might be better to store prices in the seller's currency and convert them only for the display" But how to convert them for display dynamically? So that when USD or CAD selected all store items dynamically change on the spot? New workspace: https://w.trhou.se/88jun4zos9
Please if you could help me only with this function the rest I've figured out by myself only small things left to do🙏🙏🙏 Steven Parker
Tadjiev Codes
9,626 PointsYeah you're right It works even without extra conditionals. I thought it needs to know the exchange rate always inside the function but means it can reach outside and get the value of exchangeRate. Thanks
Tadjiev Codes
9,626 PointsTadjiev Codes
9,626 PointsJustin Horner