GadgetOne

Ecommerce Website
Documentation

Web Development

Submitted by: Justine Basibas

Submitted to: Gideon Castillo
 View All Products Page Navigate to Categories Page
Navigate to Home Page

Cart

Account Page

Read More
Button

New listed Products

Add to cart
Button

Home Page – This is the landing page where you can see all the newest products and the featured product.

All Products Page – You can see all the products listed on this page.

Categories Page – In this page, you can see all the different product categories like different brands (Apple,
Android, Laptops etc.) and also you can see filter different variants here.

Account Page – The user information can be saved and edited on this page. The user information will be used
for the shipment of the product on the website.

Cart Page – All products added by the user will go here.

Read More Button – After clicking this button in the featured product, it will go to that featured product where
you can read the whole product information.

Add to Cart Button – It allows users to select products they wish to purchase and adds them to their shopping
cart for checkout.

2
 All Listed
Products
Wishlist Button

Add to Cart
Button
View Product
Button

Add to Cart Button – It allows users to select products they wish to purchase and adds them to their shopping
cart for checkout.

View Product Button – The view product button allows the user to view the whole product into a single page
and on this page, the user can see the whole product description and all reviews of the product.

Wishlist Button - The Wishlist button provides users with the ability to save products they are interested in for
future reference. It allows users to create a curated list of desired items separate from their shopping cart.

3
 Product
Product Image Description

Title textbox

Review Form All Reviews

Review textbox

Review Button

Product Image – It contains the image of the product selected. It is the visual representations of products to
users, providing them with a clear view of the item they are considering purchasing. It plays a crucial role in
attracting users' attention and conveying information about the product's appearance.

Product Description - It provides users with detailed information about a product, including its features,
specifications, dimensions, materials, and any other relevant details.

Review Form - The Review Form allows users to submit their feedback and opinions about a product, service,
or content on the website. It serves as a mechanism for user-generated content and helps other users make
informed decisions.

Review Button – This button will send the review from the Review form.

All Reviews – It contains the list of all the reviews of a specific product.

4
 Show all text

Mobiles Category

Headphones Show all

Category button

Laptops Category

Mobile Category – It contains all the products that are listed as mobile or phone. The first 3 products on the
Mobile category are listed here on this page.

Headphones Category - The Headphones Category feature organizes headphones products into a dedicated
category, providing users with a focused browsing experience specifically tailored to headphones. It enables
users to explore and compare different headphone options conveniently within a single category. The first 3
products in the Headphones category are listed here on this page.

Laptops Category - The Laptop Category feature organizes laptops into a dedicated category, offering users a
focused browsing experience specifically tailored to laptops. It enables users to explore various laptop options
conveniently within a single category, facilitating comparison and selection based on their preferences and
requirements. The first 3 products in the laptops category are listed here on this page.

Show All text – It enables the user to explore the specific category and show all the products listed in that
category, for example the mobile category. It will expand into a more detailed category page where the user can
filter out different options in the Mobile category.

Show All Button – It has the same functionality of Show all text, by clicking this button the user will go into the
specific category where the user can see all the products on that category and filter out different options like
brand, color, size etc.

5
 Category Name Product Filters

Category Name – The name of the category where the user navigated.

Product Filters - Product Filters allow users to refine their search results based on specific criteria, such as
price, brand, category, color, size, and more. They enhance the user experience by enabling users to narrow
down their options and find products that meet their preferences and requirements more efficiently.

Wishlist Tab
Orders Tab

Account details
form

Orders List

Save Button

Login/Logout
Button

Orders Tab – It contains all the information about all the products that the user ordered.

Orders List – It contains the list of all the products that user ordered in the past, it lists what is the name of the
product, when the order is created, the quantity of the product, and the shipping information.

6
Wishlist Tab - The Wishlist Tab provides users with a personalized space where they can save and manage
items, they are interested in purchasing in the future. It serves as a convenient way for users to keep track of
products they like or intend to buy later, facilitating easier browsing and purchasing decisions.

Account Details Form – It contains all the information of the user; they can edit their personal information and
this information will be the basis for the shipping information if they order a product.

Save Button – This button will allow the user to save all their personal information on the account details form.

Login/Logout Button - The Login/Logout Button provides users with a convenient way to access their account
or sign out from the website.

Order Information
Form
Cart
Information

Add button

Payment button

Subtract button Total Bill

Cart Information – It provides an overview of the items they have added to their shopping cart. It serves as a
summary section that displays essential details about the items in the cart.

Order Information – It contains all the user information that will be used as their shipping details.

Total Bill - It calculates the total cost of items selected for purchase, including any applicable taxes, shipping
fees, and discounts. It provides users with an overview of the final amount they will be charged before
completing their transaction, helping them make informed decisions and manage their budget effectively.

Subtract Button - The Subtract Button allows users to decrease the quantity of a specific item in their shopping
cart.

Add Button - The Add Button allows users to increase the quantity of a specific item in their shopping cart.

Payment Button - serves as the final step in the checkout process, allowing users to proceed with payment for
their selected items.

7
 Admin Name

Dashboard Page

Orders Tiles

Products Page

Categories
Page

Orders Page

Admins Page
Logout Button Revenue Tiles

Settings Page

Dashboard Page – It contains a summary of the orders and revenues. It displays the number of orders and
revenues for today, this week and this month.

Products Page – It displays all the product of the website, on this page you can edit and delete a product and
it also contains the form for adding a product on the website.

Categories Page – On this page, the admin can add different categories that will serve as the category and
filters of a product in the front end of the website.

Orders Page – It lists all the orders from the users, it contains the product title, product quantity, the shipping
information of the user and the total amount ordered by the user.

Admins Page – This is where the admin can add the email of the other admins for the website so they can login
to the admin panel.

Settings Page – On the settings page, the admin can select the featured product to be displayed in the front
end and also on this page the admin can set how much the shipping fee is.

Logout Button – It enables the admin to logout from the admin panel.

Orders Tiles – It displays the information of the total number of orders today, this week and this month.

Revenue Tiles – It displays the revenue for today, this week and this month.

Admin Name – It displays the name of the admin that is currently logged in on the admin panel.

8
 Add new product
button

Products List

Edit Button Delete Button

Add new product button – Allows the admin to add a new product to the website that will be displayed in the
front end.

Products List – It contains the list of all the products on the website.

Edit Button – Allows the admin to edit an existing product if they want to change information of a product like
the product title and description.

Delete Button – Allows the user to delete a specific product and it will be removed from the front end of the
website.

Product Name Textbox

Category Dropdown

Add Image Button

Product Description
Price Textbox Textbox

Save Button

9
 Product Name textbox – Allows the admin to input the product name.

Category Dropdown – It contains all the list of available categories that can be added to the product.

Add Image Button – Allows the admin to add an Image to a product that allows the user to view have a clear
view of the product they considering buying.

Product Description textbox – Allows the admin to input a description of the product.

Price textbox – Allows the admin to set the price for the product.

Save Button – It saves all the information about the product from the product form that the admin added.

Category
Name textbox

Category
Dropdown
Add Property
Button

Save Button Categories

Table

Edit Button
Delete Button

Category Name textbox – It allows the admin to input the name of a category that can be used as a property
to a specific product.

Category Drop Down – It allows the admin to select an existing category to be added and be inherited by the
new added category.

Add new property button – It allows the admin to add a property for that category, like colors, size, brand etc.

Save Button – It saves all the information from the category name and category properties.

Edit Button – It allows the admin to edit an existing category.

Delete Button – It allows the admin to delete a category.

Categories Table – It contains the list of all categories that can be used for a product.

10
 Order Date Payment Status Recipient information

Product Name Product Quantity

Order date – It displays when the order is created.

Payment status – It displays if the order placed is paid or it is not yet paid by the user.

Recipient Information – It displays the information of the recipient of the product. It contains the shipping
details like street address, zip code, city, country etc.

Product Name – It displays the name of the product ordered by the user.

Product Quantity – It displays the number of the product the user wants to order.

Admin Email textbox Add Admin Button

Admin Emails Date added

Delete button

11
Admin Email textbox – It allows admin to input a google email and add it to admins list.

Add Admin Button – It adds the email from the text box and adds it to the admins list in the database.

Admin Emails – It contains the list of all the admin emails.

Date Added – It displays when the admin email is added into the database.

Delete Button – It deletes the email of admin and removes the access of that admin to the admin panel.

Featured Product
Dropdown

Save Button Shipping Fee

textbox

Featured Product Dropdown – It allows the admin to select a product to be featured on the front page of the
website.

Shipping Fee textbox – It allows the admin to input how much the shipping fee costs for every product
purchased.

Save Button – It saves all the information from the featured product drop down and the shipping fee textbox.

12