Create Shopping Cart And Checkout using HTML CSS & Javascript

Показать описание

Creating a Shopping Cart and Checkout using HTML, CSS, and JavaScript involves building a web page that allows users to select products, add them to a cart, view the cart contents, and proceed to checkout.

Important steps in this video:
01:40 Add extension Live Server in VS Code.
02:00 Setup template Shopping Cart page.
09:40 Create data Product with file JSON.
13:28 Save cart with Cookie.
14:30 Get datas Cart from Cookie.
18:30 Create function change quantity Cart.
20:15 Setup template Checkout page.
25:50 Get datas Cart from cookie and add it in Checkout page.

Why use Live Server extension for this project?
The project Add Cart and Checkout using Cookie and get "fetch" data from JSON file. If the default is to run the web with the file:// path, it will not work. Live server extension helps us to create a virtual domain name, so that the functions work well.

Why store cart in cookies ?
Saving the Shopping Cart in a Cookie helps the user's data to be saved even when the machine is turned off when the page is refreshed, more importantly, we can get the cart data anywhere to display.

The channel is building full series learning HTML CSS and Javascript
-----------------
-----------------
-----------------
-----------------
-----------------
-----------------
-----------------
Follow me and the content I build to gain more useful HTML, CSS and Javascript knowledge and skills to build your website.

Рекомендации по теме

Комментарии

This Shopping Cart project has improved several functions such as:
1. Add a checkout page.
2. Cart data will not be lost even after shutdown.
3. Send the data cart to the checkout page to process the order payment.

Some important questions are answered in the description of the video.

lundeveloper

how do i clear the data after checking out (please answer soon)

woolwheat

11:50 How would I display like only 6 data-id's from json file. I would like to stop adding child elements after the id 6 so that I display other 6-12 id on another page ( I have 3 pages with different products ). Is it possible to load two seprate products.json files for each section or can I set the limit to display from 1-6, 7-13, 14-20.
I would appricate the answer If you need more info on this problem ask. Thanks

aldin.suljic.

Hay quá a, cám ơn anh nhiều a. Anh làm thêm phần hướng dẫn gửi thông tin giỏ hàng về email đi a.

haunguyen-mibt

Bro my cart is getting automatically filled with items some. Are undefined and some are the products that are availaible and get added 100 times, how to fix

InsecretOutlets

When I put the image, it appears above the entire shopping card, but the shopping card does not appear. What is the solution? Is there a code that makes the shopping card appear, and then the image appears on it?

Omar_MostafaTech

i had editing the source code, but after i add product to cart, the checkout page did not show any product for me.. any solution??

shiuanliang

hiii I need help, i am stuck at 17:00 mins, I copied the code exactly but it is not showing in the cart? Thank You

Elizabeth-kqwm

I pointed the way to js but it doesn't work everything was written correctly but it doesn't work why?🤔🤔🤔🤔

daniyardi

Why do my close button placed on the right side vertically instead it should've be on bottom

kofieynmikhs

Mine not workin in js add event cart.style.right?

rawshan.n

Hi Lun, Need help, I got stuck at 7:17 mint, I copied the code exactly but it is not showing any error but con't get the cart? Please advise accordingly. Thank You

anamulhaque

I just wrote the code 10:37. I don't understand how I wrote this code in js to the word "response" in italics. And it doesn't work for me because of this.

daniyardi