Very well, I’ve been taking a look at the new code you provided, it looks more organized and cleaner, however there are a few things I have to fix and the the original issue still remains, even though now the objects index is reset in every section.
I like how everything is done with appData now, clicking category will filter the the data based on the category, if category is not clicked, then appData is the same as data. Going off of that, I can’t see to understand why is this not working:
function registerCategory(data) {
$('.categories__link').click(function() {
const category = this.id;
category === 'all' ? appData = [...data] : appData = data.filter(item => item.category === category);
category === 'sale' ? appData = data.filter(item => item.sale === category) : null
setProductsView(appData);
});
};
I know you mentioned this, but I still don’t see why it won’t filter the objects with the sale property. I used this logic with my original code and it worked. If the category__link has id="sale" then this should happen: appData = data.filter(item => item.sale === category)
Also, and maybe this is not very relevant but how come using an arrow function to generate the template literal won’t work with this code?
const clothingView = (item, index) =>
`<a href="${item.url}" class="shop-item">
${item.sale ? `<span class="shop-item__sale">Sale</span>`: ''}
<img data-src=${item.image} alt="${item.altDesc}" class="shop-item__img">
<div class="quickview">
<span class="quickview__icon">Quick View</span>
<span class="quickview__info">${item.product}
<br>
<span class="quickview__price">${item.price}
${item.sale ? `<span class="quickview__price--sale">${item.sale}</span>`: ''}
</span>
</span>
<span class="shop-item__index">${index}</span>
</div>
</a>`;
The code I’ve posted fixes your original issue that messed up quickview navigation.
When you say things don’t work, it is not suffice. You should mention how things aren’t working.
Your first snippet doesn’t work because of this line
data.filter(item => item.sale === category) : null
Last time I’ve checked, item.sale is a string representing the final price of an item on sale. You are comparing that to category, “sale”. Obviously, such comparison is always false.
The arrow function version of clothingView works just fine. I don’t see any error messages or buggy behavior. Check my posted code again.
https://codepen.io/gunhoo93/pen/mjRoKd?editors=1010
Ok my mistake, I fixed that by just doing this category === 'sale' ? appData = data.filter(item => item.sale) : null;
That was a dumb mistake from my part. As for my original issue, it’s still present in your new code, but I suspect this is happening because something is not working as expected with the quickview button functionality, if you go to the main section and click any item that isn’t the first one, the popup will display the first item regardless. I will take a look at that, but if possible I’d like to know why you added the Number method here:
currentPopup = Number( $(e.target).parent().children('.shop-item__index').text() );
The documentation says the following
Number() can be used to convert JavaScript variables to numbers:
Number(“10”);
// returns 10
At least in this example, it’s converting a string to a number. So will I be right to assume that in our example currentPopup is being converted to a number? If so, why?
I appreciate the way you are guiding me thru this process, I need hints when I fail to see why something is not working as I expect, I want to be able to come up with my own conclusions.
Change this line:
currentPopup = Number( $(e.target).parent().children('.shop-item__index').text() );
to this line:
currentPopup = Number($(e.target).parent().children('.clothing-index').text());
I’ve been using clothing-index to refer to index of each item and it somehow got mixed up.
The Number() is for converting numeric string to integer, so I can use arithmetic operator properly. The index you capture with jquery come as a string type because we are getting it as text.
I see… Just a typo error. Ok Number method is converting the index which comes as string to an integer, but why do we have to that? With the first code this wasn’t necessary but I know the app won’t work properly w/o this method.
The code for quickview navigation has changed
currentPopup += direction
If currentPopup is “1” adding any integer n will result “1n”
After all the hours I put on this project I realized that I was building a SPA, the website is almost complete but I’ve been doing this the wrong, or the hard way at least. Well, one learns along the way and I’ve learned a lot from this frustrating but exciting experience. I need to learn React now, then finish this project.
Just wanna thank you guys for all the help, here’s a link to the unfinished website
https://gilbert1391.github.io/Chels/index.html
@gunhoo93 since you know React, I’d like to know once I learn React (at least the basic to build this SPA) , will I have to re-code everything from scratch, or if at least the CSS and classes can still be reusable?
I hope this post can help beginners like me in the future and learn from my mistake.
Rewriting everything from scratch is always easier for a problem of this size. But, I heard it almost never happens in the real world because it is simply not practical. So, you can choose whether to slowly migrate or to rewrite from scratch. Note that If you are just starting to learn React it will probably be difficult to think about migration.
For Javascript, I expect all of them must be rewritten.; although the core idea remains similar, you are using a different framework afterall.
For CSS, you can simply leave it until the JS part is done and decide whether your CSS will live as monolithic file or with other react components.
Most of the animation code that simply controls visibility will likely be gone.
I’ve never looked at your CSS code while answering your post, so I can’t really say much. Just know that using animation in React will involve more prep work than jQuery. You might want to look at specialized React animation libraries.
For html, you will probably delete all the content in the body except for one div element for app container.
Yes, I’ve been doing some reading and all the html will be gone except for the div app container, but maybe (and this is me just talking about some I don’t know) I could still be able to re-use the “components” when writing React. I made sure to write the code as components for maintainability.
I don’t care about rewriting JS honestly, I’m ok with that. I just wish I can save the CSS because it’s a lot of code. This is the repository just in case you guys want to take a look https://github.com/Gilbert1391/Chels
BTW, I value time, I am currently following Stephen Grider udemy course Modern React with Redux, have you heard any positive feedback from this course, like being a good material for beginner?
I actually have that course in my library, but I haven’t checked into it yet. I have two other courses from the same instructor, and he explains most stuff clearly. However, integrating Redux might be little too much for you. Try looking for a course that doesn’t involve Redux or dozens of React tools. The core idea of React is very simple, but it is tooling and a ton of libraries that complicates stuff.
I learned both React and Redux from the official site, and it is good for building foundation and getting taste on what they can do.
That’s probably going to be the hardest part of learning React 
However I do want to learn Redux, or at least have an idea of it, I’m also a bit familiar with Babel and Webpack, so I hope that makes things easier. All in all it could be good for me to finally be able to learn those tools.
Just wanted to know I am not wasting my time with this course.