The order summary of the shopping cart is created using React.js and the complete workflow is divided in 5 subsections:
- The Main layer (components/Main.js) comprises of all the products/items inside the cart which is taken from JSON data (data.js) using product mapping in Main to Product (components/Product.js).
- The Header layer(components/Header.js)comprises the navbar named order summary.
- The Cart layer(components/Cart.js) comprises of all the items which are added and modified inside the cart.
- The Basket layer(components/Basket.js) comprises of total amount achieved after application of discounts.
The webpage is successful in carrying out the following operations.
- Two-column layout representation of cart items and total cost.
- Data is imported from the JSON data.
- User can update the no. of items of items.
- Toast message notification when any item is deleted from cart (using React Toastify).
- Dynamic updation of total costs and discounts with change in number of items (without refreshing of page).
- Reload/refresh of page maintains the items in the cart (due to React useState() property and JSON stringify function used to store and parse data values from local storage).
- Product add to cart button to get the items loaded to cart from JSON data when no item is present in cart.
- Responsiveness of page accross various devices is taken care of.
- The change in total cost, product type discount and normal discount with change in items and its quantity is implemented dynamically.
-
Create a folder with name Shopping_Cart.
-
Launch Visual Studio Code and open the folder you recently created.
-
Inside the terminal window type:
npx create-react-app order_summary -
A folder named order_summary comprising of nodemodules will be created
-
After the completion of process type
cd order_summary -
Now, unzip the src folder and replace it with the src folder inside order_summary and inside terminal window type
npm start -
The output will now be available in your browser window.