- General information
- Project setup
- Navigation
- Product page
- Cart page
- Responsive design
The project shop-app-k24 is a fully responsive web shop application. All functionalities are going to be presented in the further course of the documentation.
Author: Maximilian Frauscher
Framework: Vue.js
Plugins: Vuex, Vue Router
Icon Library: Primeicons
npm install
npm run serve
npm run build
npm run lint
npm run test:unit
Home: Navigates to the homepage (placeholder).
Products: Navigates to the products page.
Offers: Navigates to the offers page (placeholder).
Service: Navigates to the service page (placeholder).
Cart (Icon): Navigates to the shopping cart.
Hovering with the mouse over the menu point "Products" highlights its top line with the highlight color orange.
A left mouse click on a menu point selects it. If a menu point is selected it changes the background color to dark gray.
The number next to the cart shows the amount of products in the cart. It counts each product group without adding the quantity of each product.
The available products are listed on the product page in a grid layout (which changes depending on the width of the client device).
The single product card holds the name, the price and a short description of the product. Below the description there is also a highlighted number of how many products are left in stock and the "Add to Cart" button.
A left mouse click on the "Add to Cart" button adds the product to the cart. There are three states of the button.
normal state: No actions.
hover state: After hovering with the mouse the background color changes to orange.
disabled state: The text changes to "Sold Out" if there are no products left in stock. The button can't be clicked in this state.
The in stock field highlights how many products are left in stock. It has two states.
normal state: It shows the number of the remaining pieces.
disabled state: It changes its background color if there are no more products in stock.
The cart page shows a table of all products added to the cart.
The column holds the information of a single product with its quantity and the price (dependent on the quantity). Also there is the price of each piece in brackets and a remove button to remove each piece from the cart.
The table combines the different products and calculates the total price.
The "remove" button removes a product from the cart. If the amount is one the product will be removed completely from the cart. Otherwise if the amount is greater than one the product stays in the cart but the amount will be reduced by one. There are two states of the "remove" button.
normal state: No actions.
hover state: After hovering with the mouse the background color changes to orange.
If there is no product in the cart a white bar with the text "The cart is empty" will be shown.
The layout of the product page and the cart page will change depending on the device width.
Thanks in advance!
Maximilian Frauscher