Filter card items of shoes


I am trying to build an e-commerce website using pure javascript Css and Html. I am actually struggling to generate a nice filter that includes different options (specific brand, colour etc). Example of what I want to do is:

  • If I click to one chosen specific Brand, I have this specific brand shoe that appears.
  • If I click to one chosen specific colour my page is filtered upon the colour chosen.

Every time that I click on one brand button, the event that I have associated will: (FIRST instruction) add a class “close_card” to all items in order to have the page empty. Then (SECOND instruction) will check which brand has been cliqued and display the array of items of this specific Brand by toggle a class “open_cards”.

So, when you go to the page you see all the shoes with different brands. You click one brand, my function will close automatically all shoes and display your shoes of the brand chosen.

But, what happens if the user has already clicked to one button brand to pick one specific brand? Because of the FIRST action, automatically the first brand will close as class= close_card is added. So, How did I tackle this issue? In the FIRST instruction, I said: If some of my cards item have already the class"open_card" (it means one of the buttons selector brands is on) don’t close it but close the rest. So, cool now, you can click to one of the brand it appears and another one it appears, as well etc.

Here is my issue.
When you first enter in the page, you see all shoes appeared (the FIRST instruction that close all items has not been fired yet as no buttons have been clicked). But, once you click to one of the button brand filter, the FIRST instruction of the event (function) attached fires, all cards are closed to display the brand cards selected. But, if you re-click to the button already chosen to deselect the brand, you end up with an empty page if no other buttons are selected. Why you have an empty page? Because when you click again to the same brand already selected, you prevent the class from happening. So, the brand cards do not appear but the FIRST action still fires anyway as you click to the button and the event is triggered.

I do not know how to tackle this issue. I tried to play with the window. object by analysing the page but because the page is not reloaded, It not worth.

So my question is: Am I wrong in my algorithm so, I need to work on it. Or, do I need something else like AJAX to have control directly about what is going on in my page.

I just need to empty my page when a button is clicked and a default page when nothing is clicked.
I did try after my function attached to the event to add an other function saying if “no buttons are on (true)” Add open_cards to all items but after it clashes with My FIRST instruction in the function.
Because all items will have open_cards so, nothing will be closed when I will choose my brand (FIRST instruction will consider that all have the right class so, nothing will be closed). Then, when you click to any brand you won’t see the difference as they all have the class open_card.

This is my first project. And my goal is to do it without having to use any library. Any advices? I do not need a solution that will take all of your time I just need some guidance like "no you cannot do it if you don’t use ajax or whatever " or “you can do it using only js vanilla but rethink your algorithm, try to think about…”

Thank you.

Assuming this is a practice project and not actually going to be a functional store, you should be able to do this with vanilla javascript and not need AJAX.

I don’t entirely follow the current algorithm you are working with, in the future I think you will get faster/better responses if you share code / isolate the issue you are trying to fix rather than writing a ton.

As for a tip for adjusting algorithm, it might be helpful to store the data related to products inside of an array in javascript and create the elements for them dynamically.

1 Like