Here I made a complete Ecommerce website/application from scratch using basic HTML, JS, CSS, and client-side Php. For more details on what my ecommerce website can offer, please read the README.
Customer Features
Login
- System only allows registered users to make purchases, therefore the user must login/register.
- You can access the registration page using the login page.
- Once the user logs in, a cookie is saved on the browser, therefore user can access the same account as long as they did not logout.
- If the user clicks logout, the cookie is destroyed, and the user must log in next time.
Navigation Menu
- Using the top horizontal navigation bar, the user is able to filter categories (Ex: Sports, Clothes, Shoes, etc..)
- To return to homepage, click on the home page.
- The navigation menu also has an option to search/filter items with specific keywords.
- User can also change their password or logout using a drop down under this navigation menu.
- Lastly, user can navigate to their cart.
Item Details Modal
- Featured items will be displayed on the homepage, other items are displayed on their respective pages (EX: Discounted items are on homepage).
- Once the user clicks on details for their desired item, a detail modal will pop up with all details about the item. Through this modal, the user can select quantity and add this item to cart.
Add to Cart
- Through the detail modal, the user is able to add the item to cart, the system will then add this item to cart with the quantitiy selected, and will also display a message for the user so that they can confirm their item has been added to the cart.
(CRUD) Cart Item Add/Remove/Update quantity
- Once the user navigates to their cart, they are able to remove the item which they had added throughout their surfing.
- The cart page will sum up total of all items with respect to their quantities. This total is displayed on the bottom of the page.
- The user can purchase all the items they've added to their cart by clicking 'Buy' button.
Purchase Receipt
- We are not collecting any payment information from the user since this is a non-profitable personal project. Therefore, on click of the buy button, the user is directly redirected to their purchase receipt which has a summary of the items they purchased and has a unique confirmation number to track their purchase.
Admin Features
- Admin users have access to all resources of guest/customer user. However, they are also able to add items/remove items from and to the inventory. Admin users can control all items/products displayed on the website.
- User: Admin
- Password: Admin
Potential Changes in Future Versions
- Customer Support/Contact Us
- Favorites
- Customer Review (rating)
Author