In development: A little store made with Hype!

Okay, let's start with a premise: I've been getting into JavaScript for a few weeks now, and I'm already looking forward to running! I got the unhealthy idea to create a small online store. More for practice than anything else. Who knows, though, that I might need it to empty my basement of junk that I no longer need.

The app keeps in memory what item you put in your cart, the quantities and the number of pieces. If it has been relatively difficult for me up to this point,I have realized that I could replicate the pieces of code for each product I want to sell, but this does not seem to me to be a correct way to go. If I have 10 products maybe it goes. But what if I have 100? Should I repeat and customize the code for each product? What if I then want to add more? Madness! :shushing_face:
What SIMPLE (mind you) methods exist to set up a small database and avoid writing custom codes each time? Are there any viable ways without me having to become a software engineer? :slight_smile:
Other thing, the pare I'm developing where the user views the whole cart and clears the various items or updates the quantities is missing. But this I don't WANT to implement yet until I figure out how to optimize with your advice the code for the various products.
I'm getting good at this, aren't I! :smiley:
con diversi prodotti.zip (1.3 MB)

1 Like

When you're dealing with ~100 of something, the reality is a little code goes a long way over manual methods :slight_smile:.

Just taking a glance at your code, I'd say one key thing you can use greatly to your advantage is the arguments coming into the Hype JavaScript function. Specifically the element represents what was pressed for mouse events. So if you populate this with some bit of data, either in the Unique Element ID, class name, or Additional HTML attributes, then you can extract it in your function and more generalize all functionality.

I'd probably go about a flow like:

  1. Make a basic element that has stuff like the cover, title, add/remove buttons.
  2. Add different class names for all these elements
  3. Put these in a symbol, and then copy so you have a bunch of instances
  4. Write some JSON that represents all the data that is to be populated. This would be an array of objects (aka dictionaries or hash tables) that contain everything like the img url of the poster, title, etc.
  5. At scene load, use the Hype API to get all symbol instances. For each one, get their .element() and then with this as the search scope, you can get at each sub-element by class name. Then you can use the JSON data to populate these subelements.
  6. Also have some sort of unique identifier in the html attributes for the add/remove buttons
  7. When the add/remove buttons are pressed, hava javascript that uses the element argument to determine which item it is. Then you can have some other array that represents your cart/quantities

There's tons of ways to do it, but that would be my basic first approach :slight_smile:.

4 Likes

Thank you Jonathan, always very present and accurate. I will do as you say although I will have to study on it because much of what you write is unfamiliar to me.
But you know, it has to start somewhere.

2 Likes

I think the way I'd start is try just generalizing the shopping cart add/remove part. So instead of using a function for each item, try making it based on the passed in element and store the result in an Object.

Here's an example. Note that it uses the Additional HTML Attributes to store what movie it is, and also the plus/minus buttons have what operation to do. This means you can use one function for both add and subtract. There's some basic setup on scene load to create the object that holds all the info. There's another function that just acts to print it out in the output field so you can see what is happening.

Cart.hype.zip (27.3 KB)

2 Likes

Thank you very much!