├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── views
    │   ├── AboutView.vue
    │   ├── payment
    │   │   ├── FailedView.vue
    │   │   └── SuccessView.vue
    │   ├── AdminView.vue
    │   ├── Product
    │   │   ├── ProductView.vue
    │   │   ├── WishList.vue
    │   │   ├── AddProduct.vue
    │   │   ├── EditProduct.vue
    │   │   ├── ShowDetails.vue
    │   │   └── CartView.vue
    │   ├── Category
    │   │   ├── CategoryView.vue
    │   │   ├── ListProducts.vue
    │   │   ├── AddCategory.vue
    │   │   └── EditCategory.vue
    │   ├── SignIn.vue
    │   ├── HomeView.vue
    │   ├── Checkout
    │   │   └── CheckOut.vue
    │   └── SignUp.vue
    ├── main.js
    ├── components
    │   ├── ProductBox.vue
    │   ├── Category
    │   │   └── CategoryBox.vue
    │   ├── FooterOne.vue
    │   └── NavbarOne.vue
    ├── App.vue
    └── router
    │   └── index.js
├── babel.config.js
├── vue.config.js
├── .gitignore
├── jsconfig.json
├── README.md
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neto112/ecommerce-ui/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neto112/ecommerce-ui/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/views/AboutView.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('@vue/cli-service')
2 | module.exports = defineConfig({
3 |   transpileDependencies: true
4 | })
5 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import router from './router'
4 | 
5 | createApp(App).use(router).mount('#app')
6 | 


--------------------------------------------------------------------------------
/src/views/payment/FailedView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="text-center">
 3 |     <h1>Failed</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   
10 | }
11 | </script>


--------------------------------------------------------------------------------
/src/views/payment/SuccessView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="text-center">
 3 |     <h1>Success</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   
10 | }
11 | </script>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ecommerce-ui
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/src/views/AdminView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container py-4">
 3 |     <router-link :to="{ name: 'Category' }">
 4 |       <button class="btn btn-primary btn-lg">Admin Category</button>
 5 |     </router-link>
 6 |     <router-link :to="{ name: 'AdminProduct' }">
 7 |       <button class="btn btn-primary btn-lg">Admin Product</button>
 8 |     </router-link>
 9 |   </div>
10 |   <!-- <button class="btn btn-primary btn-lg"> Admin Gallery</button> -->
11 | </template>
12 | 
13 | <script>
14 | export default {};
15 | </script>
16 | 
17 | <style>
18 | .btn {
19 |   margin-bottom: 20px;
20 | }
21 | </style>


--------------------------------------------------------------------------------
/src/views/Product/ProductView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <div class="row">
 4 |       <div class="col-12 text-center">
 5 |         <h4>Our Products</h4>
 6 |         <router-link :to="{ name: 'AddProduct' }" style="float: right">
 7 |           <button class="btn">Add Product</button>
 8 |         </router-link>
 9 |       </div>
10 |     </div>
11 |     <div class="row">
12 |       <!-- display all the products in productbox component -->
13 |       <div
14 |         v-for="product of products"
15 |         :key="product.id"
16 |         class="col-md-6 col-xl-4 col-12 pt-3 d-flex"
17 |       >
18 |         <ProductBox :product="product" />
19 |       </div>
20 |     </div>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | import ProductBox from "../../components/ProductBox.vue";
26 | export default {
27 |   components: { ProductBox },
28 |   props: ["products"],
29 | };
30 | </script>
31 | 
32 | <style>
33 | </style>


--------------------------------------------------------------------------------
/src/views/Category/CategoryView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <div class="row">
 4 |       <div class="col-12 text-center">
 5 |         <h3 class="pt-3">Our Categories</h3>
 6 |         <router-link :to="{ name: 'AddCategory' }">
 7 |           <button class="btn" style="float: center">Add Category</button>
 8 |         </router-link>
 9 |       </div>
10 |     </div>
11 |     <div class="row">
12 |       <div
13 |         v-for="category of categories"
14 |         :key="category.id"
15 |         class="col-xl-4 col-md-6 col-12 pt-3 d-flex"
16 |       >
17 |         <CategoryBox :category="category"> </CategoryBox>
18 |       </div>
19 |     </div>
20 |   </div>
21 | </template>
22 | <script>
23 | import CategoryBox from "../../components/Category/CategoryBox.vue";
24 | export default {
25 |   name: "CategoryView",
26 |   props: ["categories"],
27 |   components: { CategoryBox },
28 |   data() {
29 |     return {
30 |       baseURL: "https://limitless-lake-55070.herokuapp.com",
31 |     };
32 |   },
33 |   methods: {},
34 |   mounted() {},
35 | };
36 | </script>
37 | <style scoped></style>


--------------------------------------------------------------------------------
/src/components/ProductBox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="card h-100 w-100">
 3 |     <div class="embed-responsive embed-responsive-16by9">
 4 |       <img
 5 |         class="card-img-top embed-responsive-item"
 6 |         :src="product.imageURL"
 7 |         alt="Card image cap"
 8 |       />
 9 |     </div>
10 |     <div class="card-body">
11 |       <router-link :to="{name: 'ShowDetails', params: {id: product.id}}">
12 |         <h5 class="card-title">{{ product.name }}</h5>
13 |       </router-link>
14 |       <p class="card-text">{{ product.description.substring(0, 65) }}...</p>
15 |       <router-link
16 |         v-show="$route.name == 'AdminProduct'"
17 |         :to="{ name: 'EditProduct', params: { id: product.id } }"
18 |       >
19 |         <button class="btn btn-primary">Edit</button>
20 |       </router-link>
21 |     </div>
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 | export default {
27 |   name: "ProductBox",
28 |   props: ["product"],
29 | };
30 | </script>
31 | 
32 | <style scoped>
33 | .card-img-top {
34 |   object-fit: cover;
35 | }
36 | a {
37 |   text-decoration: none;
38 | }
39 | </style>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ecommerce-ui",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.27.2",
12 |     "core-js": "^3.8.3",
13 |     "stripe": "^9.14.0",
14 |     "sweetalert": "^2.1.2",
15 |     "vue": "^3.2.13",
16 |     "vue-router": "^4.0.3"
17 |   },
18 |   "devDependencies": {
19 |     "@babel/core": "^7.12.16",
20 |     "@babel/eslint-parser": "^7.12.16",
21 |     "@vue/cli-plugin-babel": "~5.0.0",
22 |     "@vue/cli-plugin-eslint": "~5.0.0",
23 |     "@vue/cli-plugin-router": "~5.0.0",
24 |     "@vue/cli-service": "~5.0.0",
25 |     "eslint": "^7.32.0",
26 |     "eslint-plugin-vue": "^8.0.3"
27 |   },
28 |   "eslintConfig": {
29 |     "root": true,
30 |     "env": {
31 |       "node": true
32 |     },
33 |     "extends": [
34 |       "plugin:vue/vue3-essential",
35 |       "eslint:recommended"
36 |     ],
37 |     "parserOptions": {
38 |       "parser": "@babel/eslint-parser"
39 |     },
40 |     "rules": {}
41 |   },
42 |   "browserslist": [
43 |     "> 1%",
44 |     "last 2 versions",
45 |     "not dead",
46 |     "not ie 11"
47 |   ]
48 | }
49 | 


--------------------------------------------------------------------------------
/src/components/Category/CategoryBox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="card h-100 w-100">
 3 |     <div class="embed-responsive embed-responsive-16by9">
 4 |       <img
 5 |         class="card-img-top embed-responsive-item"
 6 |         :src="category.imageUrl"
 7 |         alt="Category Image"
 8 |       />
 9 |     </div>
10 |     <div class="card-body">
11 |       <router-link :to="{ name: 'ListProducts', params: { id: category.id } }">
12 |         <h5 class="card-title">{{ category.categoryName }}</h5>
13 |       </router-link>
14 |       <p class="card-text font-italic">
15 |         {{ category.description.substring(0, 65) }}...
16 |       </p>
17 |       <router-link
18 |         id="edit-category"
19 |         :to="{ name: 'EditCategory', params: { id: category.id } }"
20 |         v-show="$route.name == 'AdminCategory'"
21 |       >
22 |         Edit
23 |       </router-link>
24 |     </div>
25 |   </div>
26 | </template>
27 | 
28 | <script>
29 | export default {
30 |   name: "CategoryBox",
31 |   props: ["category"],
32 |   methods: {
33 |     listProducts() {
34 |       this.$router.push({
35 |         name: "ListProducts",
36 |         params: { id: this.category.id },
37 |       });
38 |     },
39 |   },
40 | };
41 | </script>
42 | 
43 | <style scoped>
44 | .card-img-top {
45 |   object-fit: cover;
46 | }
47 | </style>


--------------------------------------------------------------------------------
/src/views/Product/WishList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <div class="row">
 4 |       <div class="col-12 text-center">
 5 |         <h4 class="pt-3">Your Wishlist</h4>
 6 |       </div>
 7 |     </div>
 8 | 
 9 |     <!-- display products -->
10 |     <div class="row">
11 |       <div
12 |         v-for="product of products"
13 |         :key="product.id"
14 |         class="mol-md-6 col-xl-4 col-12 pt-3 justify-content-around d-flex"
15 |       >
16 |         <ProductBox :product="product" />
17 |       </div>
18 |     </div>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | import axios from "axios";
24 | import ProductBox from "@/components/ProductBox.vue";
25 | export default {
26 |   components: { ProductBox },
27 |   data() {
28 |     return {
29 |       token: null,
30 |       products: null,
31 |     };
32 |   },
33 |   props: ["baseURL"],
34 |   methods: {
35 |     fetchWishList() {
36 |       axios
37 |         .get(`${this.baseURL}wishlist/${this.token}`)
38 |         .then((data) => {
39 |           this.products = data.data;
40 |         })
41 |         .catch((err) => {
42 |           console.log("err", err);
43 |         });
44 |     },
45 |   },
46 |   mounted() {
47 |     this.token = localStorage.getItem("token");
48 |     this.fetchWishList();
49 |   },
50 | };
51 | </script>
52 | 
53 | <style>
54 | </style>


--------------------------------------------------------------------------------
/src/views/Category/ListProducts.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <div class="row">
 4 |       <div class="col-12 text-center">
 5 |         <h4 class="pt-3">{{ category.categoryName }}</h4>
 6 |         <h5 style="font-weight: 300; color: #686868">{{ msg }}</h5>
 7 |       </div>
 8 |     </div>
 9 | 
10 |     <div class="row">
11 |       <div
12 |         v-for="product of category.products"
13 |         :key="product.id"
14 |         class="col-md-6 col-xl-4 col-12 pt-3 justify-content-around d-flex"
15 |       >
16 |         <ProductBox :product="product" />
17 |       </div>
18 |     </div>
19 |   </div>
20 | </template>
21 | <script>
22 | import ProductBox from "../../components/ProductBox";
23 | export default {
24 |   components: { ProductBox },
25 |   data() {
26 |     return {
27 |       id: null,
28 |       category: {},
29 |       msg: "",
30 |     };
31 |   },
32 |   props: ["categories"],
33 |   mounted() {
34 |     this.id = this.$route.params.id;
35 |     this.category = this.categories.find((category) => category.id == this.id);
36 |     if (this.category.products.length == 0) {
37 |       this.msg = "no products found";
38 |     } else if (this.category.products.length == 1) {
39 |       this.msg = "Only 1 product found";
40 |     } else {
41 |       this.msg = this.category.products.length + " products found";
42 |     }
43 |   },
44 | };
45 | </script>


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="nav">
 3 |     <NavbarOne :cartCount="cartCount" @resetCartCount="resetCartCount" />
 4 |   </div>
 5 |   <router-view
 6 |     v-if="categories && products"
 7 |     style="min-height: 60vh"
 8 |     :baseURL="baseURL"
 9 |     :categories="categories"
10 |     :products="products"
11 |     @fetchData="fetchData"
12 |   >
13 |   </router-view>
14 |   <FooterOne />
15 | </template>
16 | <script>
17 | import NavbarOne from "./components/NavbarOne.vue";
18 | import FooterOne from "./components/FooterOne.vue";
19 | import axios from "axios";
20 | export default {
21 |   components: { NavbarOne, FooterOne },
22 |   data() {
23 |     return {
24 |       baseURL: "https://limitless-lake-55070.herokuapp.com/",
25 |       products: null,
26 |       categories: null,
27 |       cartCount: 0,
28 |     };
29 |   },
30 |   methods: {
31 |     async fetchData() {
32 |       await axios
33 |         .get(this.baseURL + "category/")
34 |         .then((res) => {
35 |           this.categories = res.data;
36 |         })
37 |         .catch((err) => console.log("err", err));
38 | 
39 |       await axios
40 |         .get(this.baseURL + "product/")
41 |         .then((res) => {
42 |           this.products = res.data;
43 |         })
44 |         .catch((err) => console.log("err", err));
45 | 
46 |       if (this.token) {
47 |         axios
48 |           .get(`${this.baseURL}cart/?token=${this.token}`)
49 |           .then((res) => {
50 |             const result = res.data;
51 |             this.cartCount = result.cartItems.length;
52 |           })
53 |           .catch((err) => console.log("err", err));
54 |       }
55 |     },
56 |     resetCartCount() {
57 |       this.cartCount = 0;
58 |     },
59 |   },
60 |   mounted() {
61 |     this.token = localStorage.getItem("token");
62 |     this.fetchData();
63 |   },
64 | };
65 | </script>
66 | 
67 | <style>
68 | html {
69 |   overflow-y: scroll;
70 | }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/src/views/SignIn.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="conatiner">
 3 |     <div class="row">
 4 |       <div class="col-12 justify-content-center d-flex flex-row pt-5">
 5 |         <div id="signin" class="flext-item border">
 6 |           <h2 class="pt-4">Sign-In</h2>
 7 |           <form @submit="signin" class="form-group pt-4 pl-4 pr-4">
 8 |             <div class="form-group">
 9 |               <label>Email </label>
10 |               <input v-model="email" type="email" class="form-control" />
11 |             </div>
12 |             <div class="form-group">
13 |               <label>Password </label>
14 |               <input v-model="password" type="password" class="form-control" />
15 |             </div>
16 |             <button class="btn btn-primary mt-2 py-0">Continue</button>
17 |           </form>
18 |         </div>
19 |       </div>
20 |     </div>
21 |   </div>
22 | </template>
23 | <script>
24 | import axios from "axios";
25 | import swal from "sweetalert";
26 | export default {
27 |   props: ["baseURL"],
28 |   data() {
29 |     return {
30 |       email: null,
31 |       password: null,
32 |     };
33 |   },
34 |   methods: {
35 |     async signin(e) {
36 |       e.preventDefault();
37 |       const body = {
38 |         email: this.email,
39 |         password: this.password,
40 |       };
41 |       await axios
42 |         .post(`${this.baseURL}user/signIn`, body)
43 |         .then((res) => {
44 |           localStorage.setItem("token", res.data.token);
45 |           swal({
46 |             text: "Login successful",
47 |             icon: "success",
48 |           });
49 |           this.$emit("fetchData");
50 |           this.$router.push({ name: "Home" });
51 |         })
52 |         .catch((err) => console.log("err", err));
53 |     },
54 |   },
55 | };
56 | </script>
57 | <style scoped>
58 | .btn-primary {
59 |   background-color: #f0c14b;
60 |   color: black;
61 | }
62 | 
63 | @media screen and (min-width: 992px) {
64 |   #signin {
65 |     width: 40%;
66 |   }
67 | }
68 | </style>


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 8 |     <title>Demo Eccomerce App</title>
 9 | 
10 |     <!-- Bootstrap CSS -->
11 |     <link
12 |       rel="stylesheet"
13 |       href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
14 |       integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
15 |       crossorigin="anonymous"
16 |     />
17 | 
18 |     <!-- Bootstrap Icons -->
19 |     <link
20 |       rel="stylesheet"
21 |       href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"
22 |     />
23 |     <link
24 |       rel="stylesheet"
25 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
26 |     />
27 |   </head>
28 |   <body>
29 |     <noscript>
30 |       <strong
31 |         >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
32 |         properly without JavaScript enabled. Please enable it to
33 |         continue.</strong
34 |       >
35 |     </noscript>
36 |     <div id="app"></div>
37 |     <!-- built files will be auto injected -->
38 |     <!-- Bootstrap JS Scripts -->
39 |     <script
40 |       src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
41 |       integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
42 |       crossorigin="anonymous"
43 |     ></script>
44 |     <script
45 |       src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
46 |       integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
47 |       crossorigin="anonymous"
48 |     ></script>
49 |     <script
50 |       src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
51 |       integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
52 |       crossorigin="anonymous"
53 |     ></script>
54 |     <script src="https://js.stripe.com/v3/"></script>
55 |   </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/src/views/Category/AddCategory.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <div class="row">
 4 |       <div class="col-12 text-center">
 5 |         <h3 class="pt-3">Add Category</h3>
 6 |       </div>
 7 |     </div>
 8 |     <div class="row">
 9 |       <div class="col-3"></div>
10 |       <div class="col-6">
11 |         <form>
12 |           <div class="form-group">
13 |             <label>Name</label>
14 |             <input type="text" class="form-control" v-model="categoryName" />
15 |           </div>
16 |           <div class="form-group">
17 |             <label>Description</label>
18 |             <textarea type="text" class="form-control" v-model="description" />
19 |           </div>
20 |           <div class="form-group">
21 |             <label>ImageURL</label>
22 |             <input type="url" class="form-control" v-model="imageURL" />
23 |           </div>
24 |           <button type="button" class="btn btn-primary" @click="addCategory">
25 |             Submit
26 |           </button>
27 |         </form>
28 |       </div>
29 |       <div class="col-9"></div>
30 |     </div>
31 |   </div>
32 | </template>
33 | <script>
34 | const axios = require("axios");
35 | const sweetalert = require("sweetalert");
36 | export default {
37 |   props: ["baseURL", "categories"],
38 |   data() {
39 |     return {
40 |       categoryName: null,
41 |       description: null,
42 |       imageURL: null,
43 |     };
44 |   },
45 |   methods: {
46 |     addCategory() {
47 |       const newCategory = {
48 |         categoryName: this.categoryName,
49 |         description: this.description,
50 |         imageUrl: this.imageUrl,
51 |       };
52 | 
53 |       const baseURL = "https://limitless-lake-55070.herokuapp.com";
54 | 
55 |       axios({
56 |         method: "post",
57 |         url: `${baseURL}/category/create`,
58 |         data: JSON.stringify(newCategory),
59 |         headers: {
60 |           "Content-Type": "application/json",
61 |         },
62 |       })
63 |         .then(() => {
64 |           sweetalert({
65 |             text: "Category added successfully",
66 |             icon: "success",
67 | 
68 |           });
69 |         })
70 |         .catch((err) => {
71 |           console.log(err);
72 |         });
73 |     },
74 |   },
75 | };
76 | </script>


--------------------------------------------------------------------------------
/src/views/Category/EditCategory.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <div class="row">
 4 |       <div class="col-12 text-center">
 5 |         <h4 class="pt-3">Edit Category</h4>
 6 |       </div>
 7 |     </div>
 8 |     <div class="row">
 9 |       <div class="col-3"></div>
10 |       <div class="col-6">
11 |         <form v-if="category">
12 |           <div class="form-group">
13 |             <label>Category Name</label>
14 |             <input
15 |               type="text"
16 |               class="form-control"
17 |               v-model="category.categoryName"
18 |               required
19 |             />
20 |           </div>
21 |           <div class="form-group">
22 |             <label>Description</label>
23 |             <input
24 |               type="text"
25 |               class="form-control"
26 |               v-model="category.description"
27 |               required
28 |             />
29 |           </div>
30 |           <div class="form-group">
31 |             <label>Image URL</label>
32 |             <input
33 |               type="text"
34 |               class="form-control"
35 |               v-model="category.imageUrl"
36 |               required
37 |             />
38 |           </div>
39 |           <button type="button" class="btn btn-primary" @click="editCategory">
40 |             Submit
41 |           </button>
42 |         </form>
43 |       </div>
44 |       <div class="col-3"></div>
45 |     </div>
46 |   </div>
47 | </template>
48 | <script>
49 | import axios from "axios";
50 | import swal from "sweetalert";
51 | export default {
52 |   data() {
53 |     return {
54 |       category: null,
55 |       id: null,
56 |     };
57 |   },
58 |   props: ["baseURL", "categories"],
59 |   methods: {
60 |     async editCategory() {
61 |       delete this.category["products"];
62 |       await axios
63 |         .post(`${this.baseURL}category/update/${this.id}`, this.category)
64 |         .then(() => {
65 |           this.$emit("fetchData");
66 |           this.$router.push({ name: "Category" });
67 |           swal({
68 |             text: "category has been updated successfully",
69 |             icon: "success",
70 |           });
71 |         })
72 |         .catch((err) => console.log("err", err));
73 |     },
74 |   },
75 |   mounted() {
76 |     this.id = this.$route.params.id;
77 |     this.category = this.categories.find((category) => category.id == this.id);
78 |   },
79 | };
80 | </script>


--------------------------------------------------------------------------------
/src/views/HomeView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="home">
 3 |     <div id="background-div" class="page-holder bg-cover">
 4 |       <div class="container py-5">
 5 |         <header class="text-left text-white py-5">
 6 |           <h3 class="mb-4 rounded" id="heading">
 7 |             <a href="#start-shopping" class="bg-white px-2 py-2 rounded"> Start shopping</a> </h3>
 8 |             <p class="lead mb-0 bg-dark p-1 rounded"> Demo Ecommerce</p>
 9 |         </header>
10 |       </div>
11 |       <hr />
12 |     </div>
13 | 
14 |     <!--    display categories-->
15 |     <div class="container">
16 |       <div class="row">
17 |         <div class="col-12 text-center">
18 |           <h2 class="pt-3"> Top Categories</h2>
19 |         </div>
20 |       </div>
21 |       <div class="row">
22 |         <div v-for="index in this.categorySize" :key="index"
23 |              class="col-md-6 col-xl-4 col-12 pt-3 justify-content-around d-flex">
24 |           <CategoryBox :category="categories[index-1]" />
25 |         </div>
26 |       </div>
27 |     </div>
28 | 
29 |   <!--    display top products-->
30 |     <div class="container py-2">
31 |       <div class="row">
32 |         <div class="col-12 text-center">
33 |           <h2 class="pt-3"> Top Products</h2>
34 |         </div>
35 |       </div>
36 | 
37 |       <!--      display products-->
38 |       <div class="row">
39 |         <div v-for="index in this.productSize" :key="index"
40 |              class="col-md-6 col-xl-4 col-12 pt-3 justify-content-around d-flex">
41 |           <ProductBox :product="products[index-1]" />
42 |         </div>
43 |       </div>
44 |     </div>
45 |   </div>
46 | </template>
47 | 
48 | <script>
49 | import CategoryBox from "../components/Category/CategoryBox";
50 | import ProductBox from "../components/ProductBox";
51 | export default {
52 |   name: "HomeView",
53 |   components: {ProductBox, CategoryBox},
54 |   props: ["categories", "products"],
55 |   data() {
56 |     return {
57 |       categorySize: 0,
58 |       productSize: 0
59 |     }
60 |   },
61 |   mounted() {
62 |     this.categorySize = Math.min(6, this.categories.length);
63 |     this.productSize = Math.min(8, this.products.length);
64 |   }
65 | };
66 | </script>
67 | 
68 | <style>
69 | .page-holder {
70 |   min-height: 100vh;
71 | }
72 | .bg-cover {
73 |   background-size: cover !important;
74 | }
75 | #background-div {
76 |   background: url(https://simplecoding-ecommerce.netlify.app/img/home.af78af94.png);
77 | }
78 | #heading {
79 |   font-weight: 100;
80 | }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/src/views/Checkout/CheckOut.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="div_class">
 3 |     <h3>You will be redirected to payment page</h3>
 4 |     <div class="alert alert-primary">
 5 |       While making payment use card number 4242 4242 4242 4242 and enter random
 6 |       date and cvv (3 digit)
 7 |     </div>
 8 |     <button class="btn btn-primary" @click="goToCheckout">Make Payment</button>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import axios from "axios";
14 | export default {
15 |   data() {
16 |     return {
17 |       stripeAPIToken: process.env.VUE_APP_STRIPETOKEN,
18 |       stripe: "",
19 |       token: null,
20 |       sessionId: null,
21 |       checkoutBodyArray: [],
22 |     };
23 |   },
24 |   name: "CheckOut",
25 |   props: ["baseURL"],
26 |   methods: {
27 |     configureStripe() {},
28 | 
29 |     getAllItems() {
30 |       axios
31 |         .get(`${this.baseURL}cart/?token=${this.token}`)
32 |         .then((res) => {
33 |           if (res.status == 200) {
34 |             let products = res.data;
35 |             for (let i = 0; i < products.cartItems.length; i++) {
36 |               this.checkoutBodyArray.push({
37 |                 price: products.cartItems[i].product.price,
38 |                 quantity: products.cartItems[i].quantity,
39 |                 productName: products.cartItems[i].product.name,
40 |                 productId: products.cartItems[i].productId,
41 |               });
42 |             }
43 |           }
44 |         })
45 |         .catch((err) => console.log("err", err));
46 |     },
47 |     goToCheckout() {
48 |       console.log("checkoutBodyArray", this.checkoutBodyArray);
49 |       axios
50 |         .post(
51 |           `${this.baseURL}order/create-checkout-session`,
52 |           this.checkoutBodyArray
53 |         )
54 |         .then((res) => {
55 |           localStorage.setItem("sessionId", res.data.sessionId);
56 |           console.log("session", res.data);
57 |           this.stripe.redirectToCheckout({
58 |             sessionId: res.data.sessionId,
59 |           });
60 |         })
61 |         .catch((err) => console.log("err", err));
62 |     },
63 |   },
64 |   mounted() {
65 |     this.token = localStorage.getItem("token");
66 |     this.stripe = window.Stripe(this.stripeAPIToken);
67 |     this.getAllItems();
68 |     this.goToCheckout();
69 |   },
70 | };
71 | </script>
72 | 
73 | <style scoped>
74 | .alert {
75 |   width: 50%;
76 | }
77 | 
78 | .div_class {
79 |   margin-top: 5%;
80 |   margin-left: 30%;
81 | }
82 | 
83 | .checkout_button {
84 |   background-color: #5d3dec;
85 |   margin: 10px;
86 | }
87 | </style>


--------------------------------------------------------------------------------
/src/views/Product/AddProduct.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <div class="row">
 4 |       <div class="col-12 text-center">
 5 |         <h4>Add New Product</h4>
 6 |       </div>
 7 |     </div>
 8 |     <div class="row">
 9 |       <div class="col-3"></div>
10 |       <div class="col-6">
11 |         <form>
12 |           <div class="form-group">
13 |             <label>Category</label>
14 |             <select class="form-control" v-model="categoryId" required>
15 |               <option
16 |                 v-for="category in categories"
17 |                 :key="category.id"
18 |                 :value="category.id"
19 |               >
20 |                 {{ category.categoryName }}
21 |               </option>
22 |             </select>
23 |           </div>
24 |           <div class="form-group">
25 |             <label>Name</label>
26 |             <input type="text" v-model="name" class="form-control" />
27 |           </div>
28 |           <div class="form-group">
29 |             <label>Description</label>
30 |             <input type="text" v-model="description" class="form-control" />
31 |           </div>
32 |           <div class="form-group">
33 |             <label>Image Url</label>
34 |             <input type="text" v-model="imageURL" class="form-control" />
35 |           </div>
36 |           <div class="form-group">
37 |             <label>Price</label>
38 |             <input type="number" v-model="price" class="form-control" />
39 |           </div>
40 |           <button type="button" class="btn btn-primary" @click="addProduct">
41 |             Add Product
42 |           </button>
43 |         </form>
44 |       </div>
45 |       <div class="col-3"></div>
46 |     </div>
47 |   </div>
48 | </template>
49 | 
50 | <script>
51 | import axios from "axios";
52 | import swal from "sweetalert";
53 | export default {
54 |   props: ["baseURL", "products", "categories"],
55 |   data() {
56 |     return {
57 |       id: null,
58 |       categoryId: null,
59 |       name: null,
60 |       description: null,
61 |       imageURL: null,
62 |       price: null,
63 |     };
64 |   },
65 |   methods: {
66 |     addProduct() {
67 |       const newProduct = {
68 |         categoryId: this.categoryId,
69 |         description: this.description,
70 |         name: this.name,
71 |         imageURL: this.imageURL,
72 |         price: this.price,
73 |       };
74 |       axios.post(this.baseURL + "product/add", newProduct).then(() => {
75 |         this.$router.push({ name: "AdminProduct" });
76 |         swal({
77 |           text: "Product added",
78 |           icon: "success",
79 |         }).catch((err) => {
80 |           console.log("err", err);
81 |         });
82 |       });
83 |     },
84 |   },
85 | };
86 | </script>
87 | 
88 | <style>
89 | </style>


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
  1 | import { createRouter, createWebHistory } from 'vue-router'
  2 | import HomeView from '../views/HomeView.vue'
  3 | import AddCategory from '../views/Category/AddCategory.vue'
  4 | import CategoryView from '../views/Category/CategoryView.vue'
  5 | import ProductView from '../views/Product/ProductView.vue'
  6 | import AdminView from '../views/AdminView.vue'
  7 | import AddProduct from '../views/Product/AddProduct.vue'
  8 | import EditCategory from '../views/Category/EditCategory.vue'
  9 | import EditProduct from '../views/Product/EditProduct.vue'
 10 | import ListProducts from '../views/Category/ListProducts.vue'
 11 | import ShowDetails from '../views/Product/ShowDetails.vue'
 12 | import WishList from '../views/Product/WishList.vue'
 13 | import SignUp from '../views/SignUp.vue'
 14 | import SignIn from '../views/SignIn.vue'
 15 | import CartView from '../views/Product/CartView.vue'
 16 | import SuccessView from '../views/payment/SuccessView.vue'
 17 | import FailedView from '../views/payment/FailedView.vue'
 18 | import CheckOut from '../views/Checkout/CheckOut.vue'
 19 | 
 20 | const routes = [
 21 |   {
 22 |     path: '/',
 23 |     name: 'Home',
 24 |     component: HomeView
 25 |   },
 26 |   {
 27 |     path: '/category/show/:id',
 28 |     name: 'ListProducts',
 29 |     component: ListProducts
 30 |   },
 31 |   {
 32 |     path: '/admin/category/add',
 33 |     name: 'AddCategory',
 34 |     component: AddCategory
 35 |   },
 36 |   {
 37 |     path: '/admin/category',
 38 |     name: 'Category',
 39 |     component: CategoryView
 40 |   },
 41 |   {
 42 |     path: '/admin/category/:id',
 43 |     name: 'EditCategory',
 44 |     component: EditCategory
 45 |   },
 46 |   {
 47 |     path: '/admin',
 48 |     name: 'Admin',
 49 |     component: AdminView
 50 |   },
 51 |   {
 52 |     path: '/admin/product',
 53 |     name: 'AdminProduct',
 54 |     component: ProductView
 55 |   },
 56 |   {
 57 |     path: '/admin/product/new',
 58 |     name: 'AddProduct',
 59 |     component: AddProduct
 60 |   },
 61 |   {
 62 |     path: '/admin/product/:id',
 63 |     name: 'EditProduct',
 64 |     component: EditProduct
 65 |   },
 66 |   {
 67 |     path: '/product/show/:id',
 68 |     name: 'ShowDetails',
 69 |     component: ShowDetails
 70 |   },
 71 |   {
 72 |     path: '/signup',
 73 |     name: 'Signup',
 74 |     component: SignUp
 75 |   },
 76 |   {
 77 |     path: '/signin',
 78 |     name: 'Signin',
 79 |     component: SignIn
 80 |   },
 81 |   {
 82 |     path: '/wishlist',
 83 |     name: 'WishList',
 84 |     component: WishList
 85 |   },
 86 |   {
 87 |     path: '/cart',
 88 |     name: 'Cart',
 89 |     component: CartView
 90 |   },
 91 |   {
 92 |     path: '/payment/success',
 93 |     name: 'PaymentSuccess',
 94 |     component: SuccessView
 95 |   },
 96 |   {
 97 |     path: '/payment/failed',
 98 |     name: 'PaymentFailed',
 99 |     component: FailedView
100 |   },
101 |   {
102 |     path: '/checkout',
103 |     name: 'Checkout',
104 |     component: CheckOut
105 |   },
106 | ]
107 | 
108 | const router = createRouter({
109 |   history: createWebHistory(process.env.BASE_URL),
110 |   routes
111 | })
112 | 
113 | export default router
114 | 


--------------------------------------------------------------------------------
/src/views/Product/EditProduct.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <div class="row">
  4 |       <div class="col-12 text-center">
  5 |         <h4 class="pt-3">Edit Product</h4>
  6 |       </div>
  7 |     </div>
  8 |     <div class="row">
  9 |       <div class="col-3"></div>
 10 |       <div class="col-6">
 11 |         <form v-if="product">
 12 |           <div class="form-group">
 13 |             <label> Category</label>
 14 |             <select class="form-control" v-model="product.categoryId" required>
 15 |               <option
 16 |                 v-for="category of categories"
 17 |                 :key="category.id"
 18 |                 :value="category.id"
 19 |               >
 20 |                 {{ category.categoryName }}
 21 |               </option>
 22 |             </select>
 23 |           </div>
 24 |           <div class="form-group">
 25 |             <label>Name</label>
 26 |             <input
 27 |               type="text"
 28 |               class="form-control"
 29 |               v-model="product.name"
 30 |               required
 31 |             />
 32 |           </div>
 33 |           <div class="form-group">
 34 |             <label>Description</label>
 35 |             <input
 36 |               type="text"
 37 |               class="form-control"
 38 |               v-model="product.description"
 39 |               required
 40 |             />
 41 |           </div>
 42 |           <div class="form-group">
 43 |             <label>Image URL</label>
 44 |             <input
 45 |               type="text"
 46 |               class="form-control"
 47 |               v-model="product.imageURL"
 48 |               required
 49 |             />
 50 |           </div>
 51 |           <div class="form-group">
 52 |             <label>Price</label>
 53 |             <input
 54 |               type="number"
 55 |               class="form-control"
 56 |               v-model="product.price"
 57 |               required
 58 |             />
 59 |           </div>
 60 |           <button type="button" class="btn btn-primary" @click="editProduct">
 61 |             Submit
 62 |           </button>
 63 |         </form>
 64 |       </div>
 65 |       <div class="col-3"></div>
 66 |     </div>
 67 |   </div>
 68 | </template>
 69 | 
 70 | <script>
 71 | import axios from "axios";
 72 | import swal from "sweetalert";
 73 | export default {
 74 |   data() {
 75 |     return {
 76 |       product: null,
 77 |     };
 78 |   },
 79 |   props: ["baseURL", "products", "categories"],
 80 |   methods: {
 81 |     async editProduct() {
 82 |       await axios
 83 |         .post(`${this.baseURL}product/update/${this.id}`, this.product)
 84 |         .then(() => {
 85 |           this.$emit("fetchData");
 86 |           this.$router.push({ name: "AdminProduct" });
 87 |           swal({
 88 |             text: "product has been updated successfully",
 89 |             icon: "success",
 90 |           });
 91 |         })
 92 |         .catch((err) => console.log("err", err));
 93 |     },
 94 |   },
 95 |   mounted() {
 96 |     this.id = this.$route.params.id;
 97 |     this.product = this.products.find((product) => product.id == this.id);
 98 |   },
 99 | };
100 | </script>


--------------------------------------------------------------------------------
/src/components/FooterOne.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer>
 3 |     <div class="container pt-5">
 4 |       <div class="row">
 5 |         <div class="col-md-3 col-6">
 6 |           <ul style="list-style-type: none">
 7 |             <li class="text-light font-weight-bold pb-2">Get to know us</li>
 8 |             <li>
 9 |               <a class="footer-link font-weight-light" href="#"> About us </a>
10 |             </li>
11 |             <li>
12 |               <a class="footer-link font-weight-light" href="#">
13 |                 Android App
14 |               </a>
15 |             </li>
16 |             <li>
17 |               <a class="footer-link font-weight-light" href="#"> iOS App </a>
18 |             </li>
19 |           </ul>
20 |         </div>
21 |         <div class="col-md-3 col-6">
22 |           <ul style="list-style-type: none">
23 |             <li class="text-light font-weight-bold pb-2">Connect With Us</li>
24 |             <li>
25 |               <a class="footer-link font-weight-light" href="#">Facebook</a>
26 |             </li>
27 |             <li>
28 |               <a class="footer-link font-weight-light" href="#">Twitter</a>
29 |             </li>
30 |             <li>
31 |               <a class="footer-link font-weight-light" href="#">Instagram</a>
32 |             </li>
33 |           </ul>
34 |         </div>
35 |         <div class="col-md-3 col-6">
36 |           <ul style="list-style-type: none">
37 |             <li class="text-light font-weight-bold pb-2">Make Money with us</li>
38 |             <li>
39 |               <a class="footer-link font-weight-light" href="#">Sell with us</a>
40 |             </li>
41 |             <li>
42 |               <a class="footer-link font-weight-light" href="#"
43 |                 >Become an Affiliate</a
44 |               >
45 |             </li>
46 |             <li>
47 |               <a class="footer-link font-weight-light" href="#"
48 |                 >Advertise Your Products</a
49 |               >
50 |             </li>
51 |           </ul>
52 |         </div>
53 |         <div class="col-md-3 col-6">
54 |           <ul style="list-style-type: none">
55 |             <li class="text-light font-weight-bold pb-2">Let us help you</li>
56 |             <li>
57 |               <a class="footer-link font-weight-light" href="#"
58 |                 >Return Centre</a
59 |               >
60 |             </li>
61 |             <li>
62 |               <a class="footer-link font-weight-light" href="#"
63 |                 >100% Purchase Protection</a
64 |               >
65 |             </li>
66 |             <li>
67 |               <a class="footer-link font-weight-light" href="#">Help</a>
68 |             </li>
69 |             <li>
70 |               <a class="footer-link font-weight-light" href="#">App Download</a>
71 |             </li>
72 |           </ul>
73 |         </div>
74 |       </div>
75 |     </div>
76 |   </footer>
77 | </template>
78 | 
79 | <script>
80 | export default {};
81 | </script>
82 | 
83 | <style>
84 | footer {
85 |   margin-top: 100px;
86 |   background-color: #232f3e;
87 |   font-size: 16px;
88 | }
89 | a {
90 |   text-decoration: none;
91 | }
92 | .footer-link {
93 |   color: #ddd;
94 | }
95 | li {
96 |   padding-bottom: 10px;
97 | }
98 | </style>


--------------------------------------------------------------------------------
/src/views/SignUp.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <div class="row">
  4 |       <div class="col-12 text-center pt-3">
  5 |         <!-- display logo -->
  6 |       </div>
  7 |     </div>
  8 | 
  9 |     <!-- header -->
 10 | 
 11 |     <div class="row">
 12 |       <div class="col-12 justify-content-center d-flex pt-3">
 13 |         <div id="signup" class="flex-item border">
 14 |           <h2 class="pt-4 pl-4">Create Account</h2>
 15 |           <form @submit="signup" class="pt-4 pl-4 pr-4">
 16 |             <div class="form-group">
 17 |               <label for="Email">Email</label>
 18 |               <input
 19 |                 type="email"
 20 |                 v-model="email"
 21 |                 class="form-control"
 22 |                 required
 23 |               />
 24 |             </div>
 25 |             <div class="form-row">
 26 |               <div class="col">
 27 |                 <div class="form-group">
 28 |                   <label> First Name</label>
 29 |                   <input
 30 |                     type="text"
 31 |                     v-model="firstName"
 32 |                     class="form-control"
 33 |                     required
 34 |                   />
 35 |                 </div>
 36 |               </div>
 37 |               <div class="col">
 38 |                 <div class="form-group">
 39 |                   <label> Last Name</label>
 40 |                   <input
 41 |                     type="text"
 42 |                     v-model="lastName"
 43 |                     class="form-control"
 44 |                     required
 45 |                   />
 46 |                 </div>
 47 |               </div>
 48 |             </div>
 49 | 
 50 |             <!-- password -->
 51 |             <div class="form-group">
 52 |               <label for="Password"> Password</label>
 53 |               <input
 54 |                 type="password"
 55 |                 v-model="password"
 56 |                 class="form-control"
 57 |                 required
 58 |               />
 59 |             </div>
 60 | 
 61 |             <!-- confirm password -->
 62 |             <div class="form-group">
 63 |               <label for="Password"> Confirm password</label>
 64 |               <input
 65 |                 type="password"
 66 |                 v-model="confirmPassword"
 67 |                 class="form-control"
 68 |                 required
 69 |               />
 70 |             </div>
 71 | 
 72 |             <button class="btn btn-primary mt-2">Create Account</button>
 73 |           </form>
 74 |         </div>
 75 |       </div>
 76 |     </div>
 77 | 
 78 |     <!-- form -->
 79 |   </div>
 80 | </template>
 81 | <script>
 82 | import axios from "axios";
 83 | import swal from "sweetalert";
 84 | export default {
 85 |   props: ["baseURL"],
 86 |   data() {
 87 |     return {
 88 |       email: null,
 89 |       firstName: null,
 90 |       lastName: null,
 91 |       password: null,
 92 |       confirmPassword: null,
 93 |     };
 94 |   },
 95 |   methods: {
 96 |     async signup(e) {
 97 |       e.preventDefault();
 98 |       if (this.password === this.confirmPassword) {
 99 |         // call signup api
100 |         const user = {
101 |           email: this.email,
102 |           firstName: this.firstName,
103 |           lastName: this.lastName,
104 |           password: this.password,
105 |         };
106 |         console.log("user", user);
107 |         await axios
108 |           .post(`${this.baseURL}user/signup`, user)
109 |           .then(() => {
110 |             this.$router.replace("/");
111 |             swal({
112 |               text: "User signup successful, please login",
113 |               icon: "success",
114 |             });
115 |           })
116 |           .catch((err) => console.log("err", err));
117 |       } else {
118 |         // show some error
119 |         swal({
120 |           text: "passwords dont match",
121 |           icon: "error",
122 |         });
123 |       }
124 |     },
125 |   },
126 | };
127 | </script>
128 | <style scoped>
129 | .btn-primary {
130 |   background-color: #f0c14b;
131 |   color: #000;
132 | }
133 | 
134 | @media screen and (min-width: 992 px) {
135 |   #signup {
136 |     width: 40%;
137 |   }
138 | }
139 | </style>


--------------------------------------------------------------------------------
/src/views/Product/ShowDetails.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <div class="row pt-5">
  4 |       <div class="col-md-1"></div>
  5 |       <div class="col-md-4 col-12">
  6 |         <img :src="product.imageURL" class="img-fluid" />
  7 |       </div>
  8 |       <div class="col-md-6 col-12 pt-3 pt-md-0">
  9 |         <h4>{{ product.name }}</h4>
 10 |         <h6 class="category font-italic">{{ category.categoryName }}</h6>
 11 |         <h6 class="font-weight-bold">$ {{ product.price }}</h6>
 12 |         <p>{{ product.description }}</p>
 13 |         <div class="d-flex flex-row justify-content-between">
 14 |           <div class="input-group col-md-3 col-4 p-0">
 15 |             <div class="input-group-prepend">
 16 |               <span class="input-group-tex"> Quantity </span>
 17 |             </div>
 18 |             <input type="number" class="form-cont" v-model="quantity" />
 19 |           </div>
 20 |           <div class="input-group col-md-3 col-4 p-0">
 21 |             <button class="btn" id="add-to-cart-button" @click="addToCart">
 22 |               Add to Cart
 23 |             </button>
 24 |           </div>
 25 |         </div>
 26 |         <div class="features pt-3">
 27 |           <h5><strong>Features</strong></h5>
 28 |           <ul>
 29 |             <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
 30 |             <li>Officia quas, officiis eius magni error magnam voluptatem</li>
 31 |             <li>nesciunt quod! Earum voluptatibus quaerat dolorem doloribus</li>
 32 |             <li>molestias ipsum ab, ipsa consectetur laboriosam soluta et</li>
 33 |             <li>ut doloremque dolore corrupti, architecto iusto beatae.</li>
 34 |           </ul>
 35 |         </div>
 36 |         <button
 37 |           id="wishlist-button"
 38 |           class="btn mr-3 p-1 py-0"
 39 |           @click="addToWishList()"
 40 |         >
 41 |           {{ wishListString }}
 42 |         </button>
 43 |       </div>
 44 |     </div>
 45 |   </div>
 46 | </template>
 47 | 
 48 | <script>
 49 | import swal from "sweetalert";
 50 | import axios from "axios";
 51 | export default {
 52 |   data() {
 53 |     return {
 54 |       product: {},
 55 |       category: {},
 56 |       quantity: 1,
 57 |       wishListString: "Add to wishlist",
 58 |     };
 59 |   },
 60 |   props: ["baseURL", "products", "categories"],
 61 |   methods: {
 62 |     addToWishList() {
 63 |       if (!this.token) {
 64 |         // user is not logged in
 65 |         // show some error
 66 |         swal({
 67 |           text: "please login to add item in wishlist",
 68 |           icon: "error",
 69 |         });
 70 |         return;
 71 |       }
 72 |       // add item to wishlist
 73 |       axios
 74 |         .post(`${this.baseURL}wishlist/add?token=${this.token}`, {
 75 |           id: this.product.id,
 76 |         })
 77 |         .then((res) => {
 78 |           if (res.status === 201) {
 79 |             (this.wishListString = "Added to Wishlist"),
 80 |               swal({
 81 |                 text: "Added to Wishlist",
 82 |                 icon: "success",
 83 |               });
 84 |           }
 85 |         })
 86 |         .catch((err) => {
 87 |           console.log("err", err);
 88 |         });
 89 |     },
 90 | 
 91 |     addToCart() {
 92 |       if (!this.token) {
 93 |         // user is not logged in
 94 |         // show some error
 95 |         swal({
 96 |           text: "please login to add item in cart",
 97 |           icon: "error",
 98 |         });
 99 |         return;
100 |       }
101 | 
102 |       axios
103 |         .post(`${this.baseURL}/cart/add?token=${this.token}`, {
104 |           productId: this.id,
105 |           quantity: this.quantity,
106 |         })
107 |         .then((res) => {
108 |           if (res.status == 201) {
109 |             swal({
110 |               text: "Product added in cart",
111 |               icon: "success",
112 |             });
113 |             this.$emit("fetchData");
114 |           }
115 |         })
116 |         .catch((err) => console.log("err", err));
117 |     },
118 |   },
119 |   mounted() {
120 |     this.id = this.$route.params.id;
121 |     this.product = this.products.find((product) => product.id == this.id);
122 |     this.category = this.categories.find(
123 |       (category) => category.id == this.product.categoryId
124 |     );
125 |     this.token = localStorage.getItem("token");
126 |   },
127 | };
128 | </script>
129 | 
130 | <style>
131 | .category {
132 |   font-weight: 400;
133 | }
134 | 
135 | #wishlist-button {
136 |   background-color: #b9b9b9;
137 | }
138 | 
139 | #add-to-cart-button {
140 |   background-color: #febd69;
141 | }
142 | </style>


--------------------------------------------------------------------------------
/src/views/Product/CartView.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <div class="row">
  4 |       <div class="col-12 text-center">
  5 |         <h3 class="pt-3">Shopping cart</h3>
  6 |       </div>
  7 |     </div>
  8 |     <!-- loop over the cart items and dispaly -->
  9 |     <div
 10 |       v-for="cartItem in cartItems"
 11 |       :key="cartItem.product.id"
 12 |       class="row mt-2 pt-3 justify-content-around"
 13 |     >
 14 |       <div class="col-2"></div>
 15 |       <!-- display image -->
 16 |       <div class="col-md-3 embed-responsive embed-responsive-16by9">
 17 |         <router-link
 18 |           :to="{ name: 'ShowDetails', params: { id: cartItem.product.id } }"
 19 |         >
 20 |           <img
 21 |             v-bind:src="cartItem.product.imageURL"
 22 |             class="w-100 card-image-top embed-responsive-item"
 23 |           />
 24 |         </router-link>
 25 |       </div>
 26 |       <!-- display product name, quantity and price -->
 27 |       <div class="col-md-5 px-3">
 28 |         <div class="card-block px-3">
 29 |           <h6 class="card-title">
 30 |             <router-link
 31 |               :to="{ name: 'ShowDetails', params: { id: cartItem.product.id } }"
 32 |               >{{ cartItem.product.name }}
 33 |             </router-link>
 34 |           </h6>
 35 |           <p class="mb-0 font-weight-bold" id="item-price">
 36 |             $ {{ cartItem.product.price }} per unit
 37 |           </p>
 38 |           <p id="item-quantity" class="mb-0" style="float: left">
 39 |             Quantity:
 40 |             <input
 41 |               size="1"
 42 |               class="
 43 |                 p-0
 44 |                 h-25
 45 |                 border-bottom border-top-0 border-left-0 border-right-0
 46 |               "
 47 |               v-model="cartItem.quantity"
 48 |             />
 49 |           </p>
 50 |           <p class="p-mb-0" style="float: right">
 51 |             Total Price:
 52 |             <span class="font-weight-bold">
 53 |               $ {{ cartItem.product.price * cartItem.quantity }}</span
 54 |             >
 55 |           </p>
 56 |           <br /><a href="#" class="text-right" @click="deleteItem(cartItem.id)"
 57 |             >Remove from cart</a
 58 |           >
 59 |         </div>
 60 |       </div>
 61 |       <div class="col-2"></div>
 62 |       <div class="col-12"><hr /></div>
 63 |     </div>
 64 | 
 65 |     <!-- display total price -->
 66 |     <div class="total-cost pt-2 text-right">
 67 |       <h5>Total: ${{ totalcost.toFixed(2) }}</h5>
 68 |       <button
 69 |         :disabled="isDisabled()"
 70 |         type="button"
 71 |         class="btn btn-primary confirm"
 72 |         @click="checkout"
 73 |       >
 74 |         Confirm Order
 75 |       </button>
 76 |     </div>
 77 |   </div>
 78 | </template>
 79 | 
 80 | <script>
 81 | const axios = require("axios");
 82 | export default {
 83 |   data() {
 84 |     return {
 85 |       cartItems: [],
 86 |       token: null,
 87 |       totalcost: 0,
 88 |     };
 89 |   },
 90 |   props: ["baseURL"],
 91 |   methods: {
 92 |     isDisabled() {
 93 |       if (this.cartItems.length === 0) {
 94 |         return true;
 95 |       }
 96 |       return false;
 97 |     },
 98 |     // fetch All items in cart
 99 |     listCartItems() {
100 |       axios.get(`${this.baseURL}cart/?token=${this.token}`).then(
101 |         (response) => {
102 |           if (response.status == 200) {
103 |             const result = response.data;
104 |             // store cartitems and total price in two variables
105 |             this.cartItems = result.cartItems;
106 |             this.totalcost = result.totalCost;
107 |           }
108 |         },
109 |         (error) => {
110 |           console.log(error);
111 |         }
112 |       );
113 |     },
114 |     checkout() {
115 |       this.$router.push({ name: "Checkout" });
116 |     },
117 |     deleteItem(itemId) {
118 |       axios
119 |         .delete(`${this.baseURL}cart/delete/${itemId}/?token=${this.token} `)
120 |         .then(
121 |           (response) => {
122 |             if (response.status == 200) {
123 |               this.$router.go(0);
124 |             }
125 |             this.$emit("fetchData");
126 |           },
127 |           (error) => {
128 |             console.log(error);
129 |           }
130 |         );
131 |     },
132 |     showDetails(productId) {
133 |       this.$router.push({
134 |         name: "ShowDetails",
135 |         params: { id: productId },
136 |       });
137 |     },
138 |   },
139 |   mounted() {
140 |     this.token = localStorage.getItem("token");
141 |     this.listCartItems();
142 |   },
143 | };
144 | </script>
145 | 
146 | <style scoped>
147 | h4,
148 | h5 {
149 |   color: #484848;
150 |   font-size: 700;
151 | }
152 | .embed-responsive .card-img-top {
153 |   object-fit: cover;
154 | }
155 | #item-price {
156 |   color: #232f3e;
157 | }
158 | #item-quantity {
159 |   float: left;
160 | }
161 | #item-total-price {
162 |   float: right;
163 | }
164 | .confirm {
165 |   font-weight: bold;
166 |   font-size: larger;
167 | }
168 | </style>


--------------------------------------------------------------------------------
/src/components/NavbarOne.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  3 |     <!--    Logo-->
  4 |     <router-link class="navbar-brand" :to="{ name: 'Home' }">
  5 |       <img
  6 |         id="logo"
  7 |         src="https://raw.githubusercontent.com/webtutsplus/ecommerce-vuejs/master/src/assets/icon.png"
  8 |       />
  9 |     </router-link>
 10 | 
 11 |     <!--    Burger Button-->
 12 |     <button
 13 |       class="navbar-toggler"
 14 |       type="button"
 15 |       data-toggle="collapse"
 16 |       data-target="#navbarSupportedContent"
 17 |       aria-controls="navbarSupportedContent"
 18 |       aria-expanded="false"
 19 |       aria-label="Toggle navigation"
 20 |     >
 21 |       <span class="navbar-toggler-icon"></span>
 22 |     </button>
 23 |     <div class="collapse navbar-collapse" id="navbarSupportedContent">
 24 |       <!--      Search Bar-->
 25 |       <form class="form-inline ml-auto mr-auto">
 26 |         <div class="input-group">
 27 |           <input
 28 |             size="100"
 29 |             type="text"
 30 |             class="form-control"
 31 |             placeholder="Search Items"
 32 |             aria-label="Username"
 33 |             aria-describedby="basic-addon1"
 34 |           />
 35 |           <div class="input-group-prepend">
 36 |             <span class="input-group-text" id="search-button-navbar">
 37 |               <svg
 38 |                 xmlns="http://www.w3.org/2000/svg"
 39 |                 width="16"
 40 |                 height="16"
 41 |                 fill="currentColor"
 42 |                 class="bi bi-search"
 43 |                 viewBox="0 0 16 16"
 44 |               >
 45 |                 <path
 46 |                   d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
 47 |                 />
 48 |               </svg>
 49 |             </span>
 50 |           </div>
 51 |         </div>
 52 |       </form>
 53 | 
 54 |       <!--      DropDowns-->
 55 |       <ul class="navbar-nav ml-auto">
 56 |         <li class="nav-item dropdown">
 57 |           <a
 58 |             class="nav-link text-light dropdown-toggle"
 59 |             href="#"
 60 |             id="navbarDropdown"
 61 |             role="button"
 62 |             data-toggle="dropdown"
 63 |             aria-haspopup="true"
 64 |             aria-expanded="false"
 65 |           >
 66 |             Browse
 67 |           </a>
 68 |           <div class="dropdown-menu" aria-labelledby="navbarDropdown">
 69 |             <router-link class="dropdown-item" :to="{ name: 'Home' }"
 70 |               >Home</router-link
 71 |             >
 72 |             <router-link class="dropdown-item" :to="{ name: 'AdminProduct' }"
 73 |               >Product</router-link
 74 |             >
 75 |             <router-link class="dropdown-item" :to="{ name: 'Category' }"
 76 |               >Category</router-link
 77 |             >
 78 |           </div>
 79 |         </li>
 80 | 
 81 |         <li class="nav-item dropdown">
 82 |           <a
 83 |             class="nav-link text-light dropdown-toggle"
 84 |             href="#"
 85 |             id="navbarDropdown"
 86 |             role="button"
 87 |             data-toggle="dropdown"
 88 |             aria-haspopup="true"
 89 |             aria-expanded="false"
 90 |           >
 91 |             Accounts
 92 |           </a>
 93 |           <div class="dropdown-menu" aria-labelledby="navbarDropdown">
 94 |             <!-- <router-link
 95 |               class="dropdown-item"
 96 |               v-if="!token"
 97 |               :to="{ name: 'Signin' }"
 98 |               >Wishlist</router-link
 99 |             > -->
100 |             <router-link
101 |               v-if="token"
102 |               class="dropdown-item"
103 |               :to="{ name: 'WishList' }"
104 |               >Wishlist
105 |             </router-link>
106 |             <!-- <router-link class="dropdown-item" :to="{ name: 'Admin' }"
107 |               >Admin</router-link
108 |             >  -->
109 |             <router-link
110 |               v-if="!token"
111 |               class="dropdown-item"
112 |               :to="{ name: 'Signup' }"
113 |               >Sign Up
114 |             </router-link>
115 |             <router-link
116 |               v-if="!token"
117 |               class="dropdown-item"
118 |               :to="{ name: 'Signin' }"
119 |               >Sign In
120 |             </router-link>
121 |             <a class="dropdown-item" v-if="token" href="#" @click="signout"
122 |               >Sign Out
123 |             </a>
124 |           </div>
125 |         </li>
126 | 
127 |         <!-- <li class="nav-item">
128 |           <router-link class="nav-link text-light" :to="{ name: 'Order' }"
129 |             >Orders</router-link
130 |           >
131 |         </li> -->
132 |         <li class="nav-item">
133 |           <div id="cart" style="position: relative">
134 |             <span id="nav-cart-count">{{ cartCount }}</span>
135 |             <router-link class="text-light" :to="{ name: 'Cart' }"
136 |               ><i class="fa fa-shopping-cart" style="font-size: 36px"></i
137 |             ></router-link>
138 |           </div>
139 |         </li>
140 |       </ul>
141 |     </div>
142 |   </nav>
143 | </template>
144 | 
145 | <script>
146 | import swal from "sweetalert";
147 | export default {
148 |   name: "NavbarOne",
149 |   props: ["cartCount"],
150 |   data() {
151 |     return {
152 |       token: null,
153 |     };
154 |   },
155 |   methods: {
156 |     signout() {
157 |       localStorage.removeItem("token");
158 |       this.token = null;
159 |       swal({
160 |         text: "Logged you out. Visit again",
161 |         icon: "success",
162 |       });
163 |       this.$emit("resetCartCount");
164 |       this.$router.push({ name: "Home" });
165 |     },
166 |   },
167 |   mounted() {
168 |     this.token = localStorage.getItem("token");
169 |   },
170 | };
171 | </script>
172 | 
173 | <style scoped>
174 | #logo {
175 |   width: 150px;
176 |   margin-left: 20px;
177 |   margin-right: 20px;
178 | }
179 | .nav-link {
180 |   color: rgba(255, 255, 255);
181 | }
182 | 
183 | #search-button-navbar {
184 |   background-color: #febd69;
185 |   border-color: #febd69;
186 |   border-top-right-radius: 2px;
187 |   border-bottom-right-radius: 2px;
188 | }
189 | 
190 | #nav-cart-count {
191 |   background-color: red;
192 |   color: white;
193 |   border-radius: 50%;
194 |   height: 15px;
195 |   width: 15px;
196 |   font-size: 15px;
197 |   align-items: center;
198 |   display: flex;
199 |   justify-content: center;
200 |   position: absolute;
201 |   margin-left: 10px;
202 | }
203 | </style>


--------------------------------------------------------------------------------