Create a Dynamic E-Commerce Shopping Cart in Javascript

[@sainsolution751]

Good Work 👍🏻

[@IskeenX]

Hey. Nice work. Quick question. How can I import items from my own database instead of API? Let's say SQL or PostgreSQL. I am importing to database through Excel CSV and then i have to connect the database to the website.

[@refinedguides]

Hi, the database is on the backend, it's insecure to directly access from the frontend as it exposes your DB credentials. You need to create a server side script (like NodeJS or PHP) that query the database and send the result to your frontend (usually via API endpoints in a JSON format). If your frontend is rendered from the server, then no need for API.

[@zikas-dev]

Great

[@sab8977]

Can I use the same structure, but declaring the itens in php or js with an array?

[@refinedguides]

If you prefer php, you can convert json to array and display the products using php syntax. But you still need JS for page interaction like open/close cart, etc

[@jojofirdaus]

i want to change image where sir?

[@refinedguides]

Greetings! With Fakestore API you can' t but you can copy the result of the API and save to a JSON file. From there, you can change the image path then update the initStore() code like this:
loadProducts('./path/to/file.json').then(renderProducts);
Hope that helps! 😉

[@chukwunweikeodue3736]

please , i want to the user to be able to add an item to the cart the second time if when he clicks on "addToCart"

[@refinedguides]

Sure! You can check this and replace the scripts.js file: gist.github.com/refinedguides/4cd12f5d5e51ccf249621ba4816ce7ba

[@RyouX_Flow33]

how do you change the image?

[@refinedguides]

I have replied to another user the answer to the same question before. Pls check other comments.

[@zikas-dev]

what is your vs code theme / font?

[@refinedguides]

One Dark Pro and Jetbrains Mono :)

[@ok_e3w]

does this video cover the front and back end of the cart

[@refinedguides]

Just the front end side

[@savitrik3596]

@@refinedguides what would be the backend for this ? what will it do

[@refinedguides]

​@@savitrik3596 The backend can be made with nodejs, php, or any server side language. It's the bridge between the frontend and your database.

[@savitrik3596]

@@refinedguides will it be storing the cart details instead of the local storage? in this context.

[@refinedguides]

​@@savitrik3596 If you want to shop across devices, pause/continue later, get analytics, then you can save the cart in the db.