├── .gitignore
├── README.md
├── babel.config.js
├── custom.scss
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── Pages
    │   ├── Home.vue
    │   ├── ProductDetailPage.vue
    │   └── ShoppingCartPage.vue
    ├── assets
    │   ├── logo.png
    │   └── ss1.png
    ├── components
    │   ├── HelloWorld.vue
    │   ├── core
    │   │   ├── Footer.vue
    │   │   ├── Header.vue
    │   │   ├── LayoutMode.vue
    │   │   └── PageNotFound.vue
    │   ├── filters
    │   │   ├── BrandFilter.vue
    │   │   └── PriceFilter.vue
    │   ├── pagination
    │   │   └── Pagination.vue
    │   ├── products
    │   │   ├── Product.vue
    │   │   ├── ProductDetail.vue
    │   │   ├── ProductList.vue
    │   │   ├── ProductSlider.vue
    │   │   └── ProductSliderDots.vue
    │   └── shopping-cart
    │   │   ├── ShoppingCartContainer.vue
    │   │   └── ShoppingCartItem.vue
    ├── data
    │   ├── brands.js
    │   └── phones.js
    ├── filters
    │   ├── brandFilter.js
    │   ├── orderByFilter.js
    │   ├── paginationFilter.js
    │   ├── priceFormatter.js
    │   └── shortenTitle.js
    ├── main.js
    ├── store
    │   ├── index.js
    │   └── types.js
    └── utilities
    │   └── cumulativeOffset.js
└── yarn.lock


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Here is the live demo <a href="http://sincere-wind.surge.sh" style="font-size: 40px">CLICK TO SEE DEMO</a>
 2 | 
 3 | ![alt-text](https://github.com/TheCodersDream/React-Ecommerce-App-with-Redux/blob/master/ecm1-1.png)
 4 | ![alt-text](https://github.com/TheCodersDream/React-Ecommerce-App-with-Redux/blob/master/ecm2-2.png)
 5 | ![alt-text](https://github.com/TheCodersDream/React-Ecommerce-App-with-Redux/blob/master/ecm3.png)
 6 | ![alt-text](https://github.com/TheCodersDream/React-Ecommerce-App-with-Redux/blob/master/ecm4.png)
 7 | ![alt-text](https://github.com/TheCodersDream/React-Ecommerce-App-with-Redux/blob/master/ecm5.png)
 8 | ![alt-text](./src/assets/ss1.png)
 9 | 
10 | 
11 | # ecomerce
12 | 
13 | ## Project setup
14 | ```
15 | yarn install
16 | ```
17 | 
18 | ### Compiles and hot-reloads for development
19 | ```
20 | yarn run serve
21 | ```
22 | 
23 | ### Compiles and minifies for production
24 | ```
25 | yarn run build
26 | ```
27 | 
28 | ### Run your tests
29 | ```
30 | yarn run test
31 | ```
32 | 
33 | ### Lints and fixes files
34 | ```
35 | yarn run lint
36 | ```
37 | 
38 | ### Customize configuration
39 | See [Configuration Reference](https://cli.vuejs.org/config/).
40 | 


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


--------------------------------------------------------------------------------
/custom.scss:
--------------------------------------------------------------------------------
 1 | @import 'node_modules/bootstrap/scss/bootstrap';
 2 | @import 'node_modules/bootstrap-vue/src/index.scss';
 3 | 
 4 | 
 5 | html{ height:100%; }
 6 | body{ min-height:100%; padding:0; margin:0; position:relative; }
 7 | 
 8 | body::after{ content:''; display:block; height:100px; }
 9 | 
10 | footer{
11 |   position:absolute;
12 |   bottom:0;
13 |   width:100%;
14 |   height:100px;
15 | }
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ecomerce",
 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 |     "bootstrap": "^4.3.1",
12 |     "bootstrap-vue": "^2.0.0-rc.15",
13 |     "vue": "^2.6.10",
14 |     "vue-fragment": "latest",
15 |     "vue-router": "^3.0.2",
16 |     "vue-swal": "^1.0.0",
17 |     "vuex": "^2.3.1"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "^3.5.0",
21 |     "@vue/cli-plugin-eslint": "^3.5.0",
22 |     "@vue/cli-service": "^3.5.0",
23 |     "babel-eslint": "^10.0.1",
24 |     "eslint": "^5.8.0",
25 |     "eslint-plugin-vue": "^5.0.0",
26 |     "node-sass": "^4.11.0",
27 |     "sass-loader": "^7.1.0",
28 |     "vue-template-compiler": "^2.5.21"
29 |   },
30 |   "eslintConfig": {
31 |     "root": true,
32 |     "env": {
33 |       "node": true
34 |     },
35 |     "extends": [
36 |       "plugin:vue/essential",
37 |       "eslint:recommended"
38 |     ],
39 |     "rules": {},
40 |     "parserOptions": {
41 |       "parser": "babel-eslint"
42 |     }
43 |   },
44 |   "postcss": {
45 |     "plugins": {
46 |       "autoprefixer": {}
47 |     }
48 |   },
49 |   "browserslist": [
50 |     "> 1%",
51 |     "last 2 versions",
52 |     "not ie <= 8"
53 |   ]
54 | }
55 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheCoderDream/Vue-Ecommerce-App-with-Vuex/b44cac2b364c861c8dfc65a538e7c95004d17173/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 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="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 8 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 9 |     <title>ecomerce</title>
10 |   </head>
11 |   <body>
12 |     <noscript>
13 |       <strong>We're sorry but ecomerce doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
14 |     </noscript>
15 |     <div id="app"></div>
16 |     <!-- built files will be auto injected -->
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Fragment>
 3 |     <Header></Header>
 4 |     <transition name="page" mode="out-in">
 5 |       <router-view></router-view>
 6 |     </transition>
 7 |     <Footer></Footer>
 8 |   </Fragment>
 9 | </template>
10 | 
11 | <script>
12 | import Header from "./components/core/Header";
13 | import Footer from "./components/core/Footer";
14 | 
15 | export default {
16 |   name: "app",
17 |   components: {
18 |     Footer,
19 |     Header
20 |   },
21 |   data() {
22 |     return {
23 |       product: {
24 |         title: "Apple iPhone 7 Plus 32 GB (Apple Türkiye Garantili)",
25 |         category: "phone",
26 |         images: [
27 |           "https://productimages.hepsiburada.net/s/18/280-413/9801258663986.jpg?v1",
28 |           "https://productimages.hepsiburada.net/s/18/280-413/9801258696754.jpg?v1",
29 |           "https://productimages.hepsiburada.net/s/18/280-413/9801258729522.jpg?v1",
30 |           "https://productimages.hepsiburada.net/s/18/280-413/9801258762290.jpg?v1"
31 |         ],
32 |         brand: "apple",
33 |         price: 4241.499828399639,
34 |         cpu: "1.3GHz Apple A6",
35 |         camera: "8mp (3264x2448)",
36 |         size: "124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)",
37 |         weight: "132 grams (4.7 ounces) with battery",
38 |         display: "4.0 326 pixel density",
39 |         battery: "1480 mAh",
40 |         memory: "16GB, 32GB and RAM 1 GB",
41 |         id: 0,
42 |         description:
43 |           "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!"
44 |       }
45 |     };
46 |   }
47 | };
48 | </script>
49 | 
50 | <style>
51 | .swal-button {
52 |   background-color: #138496;
53 | }
54 | 
55 | .swal-button:hover {
56 |   background-color: #036979 !important;
57 | }
58 | 
59 | .page-enter-active {
60 |   animation: slide-in 0.3s ease-out forwards;
61 | }
62 | 
63 | .page-leave-active {
64 |   animation: slide-out 0.3s ease-out forwards;
65 | }
66 | 
67 | @keyframes slide-in {
68 |   from {
69 |     transform: scale(0.9);
70 |     opacity: 0;
71 |   }
72 | 
73 |   to {
74 |     transform: scale(1);
75 |     opacity: 1;
76 |   }
77 | }
78 | 
79 | @keyframes slide-out {
80 |   from {
81 |     transform: scale(1);
82 |     opacity: 1;
83 |   }
84 |   to {
85 |     transform: scale(0.9);
86 |     opacity: 0;
87 |   }
88 | }
89 | </style>
90 | 


--------------------------------------------------------------------------------
/src/Pages/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <Fragment>
 3 |         <div class="container" style="padding-top: 6rem;">
 4 |             <div class="row">
 5 |                 <div class="col-lg-3">
 6 |                     <BrandFilter></BrandFilter>
 7 |                     <PriceFilter></PriceFilter>
 8 |                 </div>
 9 |                 <div class="col-lg-9">
10 |                     <ProductList></ProductList>
11 |                     <div class="d-flex justify-content-end">
12 |                         <Pagination></Pagination>
13 |                     </div>
14 |                 </div>
15 |             </div>
16 |         </div>
17 |     </Fragment>
18 | </template>
19 | 
20 | <script>
21 |     import { Fragment } from 'vue-fragment';
22 |     import BrandFilter from "../components/filters/BrandFilter";
23 |     import PriceFilter from "../components/filters/PriceFilter";
24 |     import ProductList from "../components/products/ProductList";
25 |     import Pagination from "../components/pagination/Pagination";
26 |     export default {
27 |         name: "Home",
28 |         components: {Pagination, ProductList, PriceFilter, BrandFilter, Fragment},
29 |         data() {
30 |             return {
31 |             }
32 |         }
33 |     }
34 | </script>
35 | 
36 | <style scoped>
37 | 
38 | </style>
39 | 


--------------------------------------------------------------------------------
/src/Pages/ProductDetailPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container" style="padding: 6rem 0px;">
 3 |         <div class="card">
 4 |             <div class="row">
 5 |                 <ProductSlider :images="product.images" class="col-sm-5 border-right"></ProductSlider>
 6 |                 <ProductDetail :product="product" class="col-sm-7"></ProductDetail>
 7 |             </div>
 8 |         </div>
 9 |     </div>
10 | </template>
11 | 
12 | <script>
13 |     import ProductDetail from "../components/products/ProductDetail";
14 |     import ProductSlider from "../components/products/ProductSlider";
15 |     export default {
16 |         name: "ProductDetailPage",
17 |         components: {ProductSlider, ProductDetail},
18 |         computed: {
19 | 
20 |         },
21 |         data() {
22 |             return {
23 |                 product: this.$store.state.products.find(p => p.id === +this.$route.params.id)
24 |             }
25 |         }
26 |     }
27 | </script>
28 | 
29 | <style scoped>
30 | 
31 | </style>
32 | 


--------------------------------------------------------------------------------
/src/Pages/ShoppingCartPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <ShoppingCartContainer></ShoppingCartContainer>
 3 | </template>
 4 | 
 5 | <script>
 6 |     import ShoppingCartContainer from "../components/shopping-cart/ShoppingCartContainer";
 7 |     export default {
 8 |         name: "ShoppingCartPage",
 9 |         components: {ShoppingCartContainer}
10 |     }
11 | </script>
12 | 
13 | <style scoped>
14 | 
15 | </style>
16 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheCoderDream/Vue-Ecommerce-App-with-Vuex/b44cac2b364c861c8dfc65a538e7c95004d17173/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/ss1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheCoderDream/Vue-Ecommerce-App-with-Vuex/b44cac2b364c861c8dfc65a538e7c95004d17173/src/assets/ss1.png


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13 |     </ul>
14 |     <h3>Essential Links</h3>
15 |     <ul>
16 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21 |     </ul>
22 |     <h3>Ecosystem</h3>
23 |     <ul>
24 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29 |     </ul>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |   name: 'HelloWorld',
36 |   props: {
37 |     msg: String
38 |   }
39 | }
40 | </script>
41 | 
42 | <!-- Add "scoped" attribute to limit CSS to this component only -->
43 | <style scoped>
44 | h3 {
45 |   margin: 40px 0 0;
46 | }
47 | ul {
48 |   list-style-type: none;
49 |   padding: 0;
50 | }
51 | li {
52 |   display: inline-block;
53 |   margin: 0 10px;
54 | }
55 | a {
56 |   color: #42b983;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/components/core/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <footer class="py-5 bg-dark">
 3 |         <div class="container">
 4 |             <p class="m-0 text-center text-white">Copyright © Emre Baskan 2019</p>
 5 |         </div>
 6 |     </footer>
 7 | 
 8 | </template>
 9 | 
10 | <script>
11 |     export default {
12 |         name: "Footer"
13 |     }
14 | </script>
15 | 
16 | <style scoped>
17 | 
18 | </style>
19 | 


--------------------------------------------------------------------------------
/src/components/core/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
 3 |         <div class="container">
 4 |             <router-link to="/products" class="navbar-brand"  >Ecommerce</router-link>
 5 |             <div>
 6 |                 <ul class="navbar-nav ml-auto">
 7 |                     <li class="nav-item">
 8 |                         <router-link to="/cart" class="nav-link" ><i class="fa fa-shopping-cart mr-2"  aria-hidden="true" ></i>Cart
 9 |                             ({{$store.getters.cartLength}}) </router-link>
10 |                     </li>
11 |                 </ul>
12 |             </div>
13 |         </div>
14 |     </nav>
15 | 
16 | </template>
17 | 
18 | <script>
19 |     export default {
20 |         name: "Header",
21 |     }
22 | </script>
23 | 
24 | <style scoped>
25 | 
26 | </style>
27 | 


--------------------------------------------------------------------------------
/src/components/core/LayoutMode.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="layout-mode" @click="$emit('changeLayout',len)">
 3 |         <div
 4 |                 :class="['layout-mode__item', {'layout-mode__item--active': isActive}]"
 5 |                 v-for="i in len"
 6 |                 class="layout-mode__item"></div>
 7 |     </div>
 8 | 
 9 | </template>
10 | 
11 | <script>
12 |     export default {
13 |         name: "LayoutMode",
14 |         props: {
15 |             isActive: Boolean,
16 |             len: Number
17 |         }
18 |     }
19 | </script>
20 | 
21 | <style scoped lang="scss">
22 |     .layout-mode {
23 | 
24 |         display: flex;
25 |         flex-direction: row;
26 |         padding: .3rem;
27 |         border: 2px solid gray;
28 |         cursor: pointer;
29 | 
30 |     &__item {
31 |          width: .7rem;
32 |          height: .7rem;
33 |          background-color: gray;
34 | 
35 |     &--active {
36 |          background-color: dodgerblue;
37 |      }
38 | 
39 |     }
40 | 
41 |     &__item:not(:last-child) {
42 |          margin-right: .3rem;
43 |      }
44 | 
45 | 
46 |     &:hover {
47 |          border: 2px solid #646464;
48 |      }
49 | 
50 |     &--active {
51 |          border: 2px solid dodgerblue;
52 |      }
53 |     }
54 | 
55 | </style>
56 | 


--------------------------------------------------------------------------------
/src/components/core/PageNotFound.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <h1>
 3 |         Page not found
 4 |     </h1>
 5 | </template>
 6 | 
 7 | <script>
 8 |     export default {
 9 |         name: "PageNotFound"
10 |     }
11 | </script>
12 | 
13 | <style scoped>
14 | 
15 | </style>
16 | 


--------------------------------------------------------------------------------
/src/components/filters/BrandFilter.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="card mb-3" >
  3 |         <div class="card-header">
  4 |             <h3>Brands</h3>
  5 |         </div>
  6 |         <ul class="list-group flex-row flex-wrap">
  7 |             <li class="list-group-item flex-50" v-for="brand in brands" :key="brand">
  8 |                 <label class="custom-checkbox text-capitalize"> {{brand}} ({{brandsCount[brand]}})
  9 |                     <input type="checkbox"
 10 |                            :name="brand"
 11 |                            class="custom-checkbox__input" @input="onChangeSelectBox($event)"/>
 12 |                     <span class="custom-checkbox__span"></span>
 13 |                 </label>
 14 |             </li>
 15 |         </ul>
 16 |     </div>
 17 | 
 18 | </template>
 19 | 
 20 | <script>
 21 |     import * as Types from '../../store/types';
 22 |     export default {
 23 |         name: "BrandFilter",
 24 |         data() {
 25 |             window.console.log(this.$store.getters.brandsCount, this.$store.brands);
 26 |             return {
 27 |                 brandsCount: this.$store.getters.brandsCount,
 28 |                 brands: this.$store.state.brands
 29 |             }
 30 |         },
 31 |         methods: {
 32 |             onChangeSelectBox(e) {
 33 |                 const name = e.target.name;
 34 |                 const value = e.target.checked;
 35 | 
 36 |                 if (value) {
 37 |                     this.$store.commit(Types.ADD_BRAND_TO_FILTER, name);
 38 |                 } else {
 39 |                     this.$store.commit(Types.REMOVE_BRAND_FROM_FILTER, name);
 40 |                 }
 41 |             }
 42 |         }
 43 |     }
 44 | </script>
 45 | 
 46 | <style scoped lang="scss">
 47 |     .custom-checkbox {
 48 |         display: block;
 49 |         position: relative;
 50 |         padding-left: 2rem;
 51 |         cursor: pointer;
 52 |         user-select: none;
 53 |         text-align: left;
 54 | 
 55 |     &__input {
 56 |          position: absolute;
 57 |          opacity: 0;
 58 |          height: 0;
 59 |          width: 0;
 60 | 
 61 | 
 62 |      }
 63 | 
 64 |     &__span {
 65 |          position: absolute;
 66 |          top: 50%;
 67 |          left: 0;
 68 |          transform: translateY(-50%);
 69 |          height: 1.2rem;
 70 |          width: 1.2rem;
 71 |          background-color: white;
 72 |          border: 2px solid gray;
 73 | 
 74 |     &::after {
 75 |          content: "";
 76 |          opacity: 0;
 77 |          position: absolute;
 78 |          top: 50%;
 79 |          left: 50%;
 80 |          width: .6rem;
 81 |          height: .6rem;
 82 |          background-color: dodgerblue;
 83 |          transform: translate(-50%, -50%);
 84 |      }
 85 |     }
 86 | 
 87 |     &:hover &__span {
 88 |                  background-color: #eeeeee;
 89 |              }
 90 | 
 91 |     &__input:checked + &__span::after {
 92 |          opacity: 1;
 93 |      }
 94 |     }
 95 | 
 96 |     .flex-50 {
 97 |         flex: 0 0 100%;
 98 |     }
 99 | 
100 |     @media only screen and (max-width: 768px) {
101 | 
102 |         .flex-50 {
103 |             flex: 0 0 50%;
104 |         }
105 |     }
106 | 
107 | </style>
108 | 


--------------------------------------------------------------------------------
/src/components/filters/PriceFilter.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="card">
  3 |         <div class="card-header">
  4 |             <h3>Price  </h3>
  5 |         </div>
  6 |         <ul class="list-group flex-row  flex-wrap" >
  7 |             <li class="list-group-item flex-fill">
  8 |                 <label class="custom-radio-btn"> Low to high
  9 |                     <input
 10 |                             :value="'asc'"
 11 |                             type="radio"
 12 |                             @click="onRadioButtonChange($event)"
 13 |                             name="orderByPrice" class="custom-radio-btn__input"/>
 14 |                     <span class="custom-radio-btn__span"></span>
 15 |                 </label>
 16 |             </li>
 17 |             <li class="list-group-item flex-fill">
 18 |                 <label class="custom-radio-btn"> High to low
 19 |                     <input
 20 |                             :value="'desc'"
 21 |                             @click="onRadioButtonChange($event)"
 22 |                             type="radio" name="orderByPrice" class="custom-radio-btn__input"/>
 23 |                     <span class="custom-radio-btn__span"></span>
 24 |                 </label>
 25 |             </li>
 26 |         </ul>
 27 |     </div>
 28 | </template>
 29 | 
 30 | <script>
 31 |     import * as Types from '../../store/types';
 32 |     export default {
 33 |         name: "PriceFilter",
 34 |         data() {
 35 |             return {
 36 |                 selectedFilter: ''
 37 |             }
 38 |         },
 39 |         methods: {
 40 |             onRadioButtonChange(e) {
 41 |                 const value = e.target.value;
 42 |                 if (value === this.selectedFilter) {
 43 |                     this.removeFilters();
 44 |                     return;
 45 |                 }
 46 | 
 47 |                 this.selectedFilter = value;
 48 | 
 49 |                 if (value === 'asc') {
 50 |                     this.$store.commit(Types.ORDER_BY_ASC);
 51 |                     this.selectedFilter = 'asc';
 52 |                 } else {
 53 |                     this.$store.commit(Types.ORDER_BY_DESC);
 54 |                     this.selectedFilter = 'desc';
 55 |                 }
 56 |             },
 57 |             removeFilters() {
 58 |                 const buttons = document.getElementsByName('orderByPrice');
 59 | 
 60 |                 buttons.forEach((el) => {
 61 |                     el.checked = false;
 62 |                 });
 63 |                 this.selectedFilter = '';
 64 |                 this.$store.commit(Types.CLEAR_ORDER_BY_PRICE);
 65 |             }
 66 |         }
 67 |     }
 68 | </script>
 69 | 
 70 | <style scoped lang="scss">
 71 |     .custom-radio-btn {
 72 |         display: block;
 73 |         position: relative;
 74 |         cursor: pointer;
 75 |         padding-left: 2rem;
 76 |         user-select: none;
 77 |         text-align: left;
 78 | 
 79 |     &__input {
 80 |          position: absolute;
 81 |          opacity: 0;
 82 |          cursor: pointer;
 83 |      }
 84 | 
 85 |     &__span {
 86 |          position: absolute;
 87 |          top: 50%;
 88 |          left: 0;
 89 |          height: 1.3rem;
 90 |          width: 1.3rem;
 91 |          background-color: #eeeeee;
 92 |          border-radius: 12px;
 93 |          transform: translateY(-50%);
 94 | 
 95 |     &::after {
 96 |          position: absolute;
 97 |          top: 50%;
 98 |          left: 50%;
 99 |          transform: translate(-50%, -50%);
100 |          width: .7rem;
101 |          height: .7rem;
102 |          border-radius: 50%;
103 |          background-color: dodgerblue;
104 |          content: "";
105 |          display: none;
106 |      }
107 |     }
108 | 
109 |     &__input:checked ~ &__span::after {
110 |          display: block;
111 |      }
112 | 
113 |     &:hover &__span {
114 |                  background-color: #dfdfdf;
115 |              }
116 | 
117 | 
118 |     }
119 | 
120 |     .text-remove-selected {
121 |         font-size: 1rem;
122 |         font-weight: normal;
123 |         cursor: pointer;
124 |         padding-left: 2rem;
125 |     }
126 | 
127 | </style>
128 | 


--------------------------------------------------------------------------------
/src/components/pagination/Pagination.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <nav aria-label="...">
  3 |         <ul class="pagination">
  4 |             <li
  5 |                     @click="onPrev()"
  6 |                     class="page-item ">
  7 |                 <button
  8 |                         :disabled="this.$store.state.currentPage === 1"
  9 |                         class="page-link" tabindex="-1">Previous</button>
 10 |             </li>
 11 |             <li
 12 |                     v-for="page of getpages()"
 13 |                     :class="['page-item', {active: page === $store.state.currentPage}]"
 14 |                     @click="onPage(page)"
 15 |                     class="page-item"><button class="page-link">{{page}}</button></li>
 16 |             <li
 17 |                     @click="onNext()"
 18 |                     class="page-item">
 19 |                 <button :disabled="isOnLastPage()" class="page-link">Next</button>
 20 |             </li>
 21 |         </ul>
 22 | 
 23 |     </nav>
 24 | </template>
 25 | 
 26 | <script>
 27 |     import * as Types from '../../store/types';
 28 |     export default {
 29 |         name: "Pagination",
 30 |         data() {
 31 |             window.console.log(this.$store.getters.currentPage);
 32 | 
 33 |             return {
 34 |                 currentPage: this.$store.state.currentPage,
 35 |                 totalItemsCount: this.$store.getters.totalItemCountAfterFilter,
 36 |                 perPage: this.$store.state.perPage,
 37 |                 pagesToShow: this.$store.state.pagesToShow
 38 |             }
 39 |         },
 40 |         methods: {
 41 |             isOnLastPage() {
 42 |                 return this.$store.state.perPage * this.$store.state.currentPage >= this.$store.getters.totalItemCountAfterFilter;
 43 |             },
 44 |             totalPages() {
 45 |                 return Math.ceil(this.$store.getters.totalItemCountAfterFilter / this.$store.state.perPage) || 0;
 46 |             },
 47 |             getMin() {
 48 |                 return ((this.perPage * this.currentPage) - this.perPage) + 1;
 49 |             },
 50 |             getMax() {
 51 |                 let max = this.perPage * this.currentPage;
 52 |                 if (max > this.totalItemsCount) {
 53 |                     max = this.totalItemsCount;
 54 |                 }
 55 |                 return max;
 56 |             },
 57 |             onPrev() {
 58 |                 if(this.$store.state.currentPage === 1) return void 0;
 59 | 
 60 |                 this.$store.commit(Types.PREV_PAGE);
 61 |             },
 62 |             onNext() {
 63 |                 if(this.isOnLastPage()) return void 0;
 64 | 
 65 |                 this.$store.commit(Types.NEXT_PAGE);
 66 |             },
 67 |             onPage(n) {
 68 |                 this.$store.commit(Types.GO_PAGE, n);
 69 |                 window.console.log(this.$store.commit);
 70 |             },
 71 |             getpages() {
 72 |                 const c = Math.ceil(this.$store.getters.totalItemCountAfterFilter / this.$store.state.perPage);
 73 |                 const p = this.$store.state.currentPage || 1;
 74 |                 const pagesToShow = this.$store.state.pagesToShow || 9;
 75 |                 const pages = [];
 76 |                 pages.push(p);
 77 |                 const times = pagesToShow - 1;
 78 |                 for (let i = 0; i < times; i++) {
 79 |                     if (pages.length < pagesToShow) {
 80 |                         if (Math.min.apply(null, pages) > 1) {
 81 |                             pages.push(Math.min.apply(null, pages) - 1);
 82 |                         }
 83 |                     }
 84 |                     if (pages.length < pagesToShow) {
 85 |                         if (Math.max.apply(null, pages) < c) {
 86 |                             pages.push(Math.max.apply(null, pages) + 1);
 87 |                         }
 88 |                     }
 89 |                 }
 90 |                 pages.sort((a, b) => a - b);
 91 |                 return pages;
 92 |             }
 93 |         }
 94 |     }
 95 | </script>
 96 | 
 97 | <style scoped>
 98 | 
 99 | </style>
100 | 


--------------------------------------------------------------------------------
/src/components/products/Product.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="card h-100 product">
  3 |     <router-link class="product__link" :to="`/products/${product.id}`">
  4 |       <img
  5 |         @mousemove="onImageChange($event)"
  6 |         @touchmove="onImageChange($event)"
  7 |         @mouseout="onImageMouseOut()"
  8 |         :src="currentImage"
  9 |         :alt="product.title"
 10 |         ref="productImageContainer"
 11 |         class="card-img-top product__img"
 12 |       >
 13 |       <ProductSliderDots
 14 |         :len="product.images.length"
 15 |         :active-item="currentImageIndex"
 16 |         @changeItem="onChangeImage($event)"
 17 |       ></ProductSliderDots>
 18 |     </router-link>
 19 | 
 20 |     <div class="card-body product__text">
 21 |       <h4 class="card-title product__title">
 22 |         <a>{{product.title}}</a>
 23 |       </h4>
 24 |       <h5 class="product__price">${{product.price | priceFormatter}}</h5>
 25 |       <p class="card-text product__description">{{product.description}}</p>
 26 |       <button @click="onAddProductToCart()" class="btn btn-info product__add-to-cart">Add to cart</button>
 27 |     </div>
 28 |   </div>
 29 | </template>
 30 | 
 31 | <script>
 32 | import { cumulativeOffset } from "../../utilities/cumulativeOffset";
 33 | import ProductSliderDots from "./ProductSliderDots";
 34 | import * as Types from "../../store/types";
 35 | 
 36 | export default {
 37 |   name: "Product",
 38 |   components: { ProductSliderDots },
 39 |   props: {
 40 |     product: Object
 41 |   },
 42 |   data() {
 43 |     return {
 44 |       currentImage: this.product.images[0],
 45 |       currentImageIndex: 0,
 46 |       offsetLeft: null,
 47 |       offSetTop: null,
 48 |       productImageContainerClientWidth: null
 49 |     };
 50 |   },
 51 |   methods: {
 52 |     onImageChange(e) {
 53 |       const eventType = e.type;
 54 |       let clientX;
 55 |       this.calculateOffSetLeftAndTop(eventType);
 56 |       if (eventType === "touchmove") {
 57 |         clientX = e.touches[0].clientX;
 58 |       } else if (eventType === "mousemove") {
 59 |         clientX = e.clientX;
 60 |       }
 61 | 
 62 |       const currentX = clientX - this.offSetLeft;
 63 |       const imgArrLength = this.product.images.length;
 64 | 
 65 |       const part = this.productImageContainerClientWidth / imgArrLength;
 66 | 
 67 |       let imgIndex = Math.ceil(currentX / part) - 1;
 68 |       if (imgIndex < 0) {
 69 |         imgIndex = 0;
 70 |       }
 71 | 
 72 |       if (imgIndex >= imgArrLength) {
 73 |         imgIndex = imgArrLength - 1;
 74 |       }
 75 | 
 76 |       this.currentImageIndex = imgIndex;
 77 |       this.currentImage = this.product.images[imgIndex];
 78 |     },
 79 |     onImageMouseOut(e) {
 80 |       this.currentImage = this.product.images[0];
 81 |     },
 82 |     onAddProductToCart() {
 83 |       this.$swal({
 84 |         title: "Added to cart!",
 85 |         icon: "success",
 86 |         button: "Done!"
 87 |       });
 88 |       this.$store.commit(Types.ADD_PRODUCT_TO_CART, this.product);
 89 |     },
 90 |     calculateOffSetLeftAndTop() {
 91 |       const offSetTopAndLeft = cumulativeOffset(
 92 |         this.$refs.productImageContainer
 93 |       );
 94 |       this.offSetLeft = offSetTopAndLeft.left;
 95 |       this.offSetTop = offSetTopAndLeft.top;
 96 |       this.productImageContainerClientWidth = this.$refs.productImageContainer.clientWidth;
 97 |     },
 98 |     onChangeImage(n) {
 99 |       this.currentImage = this.product.images[n];
100 |       this.currentImageIndex = n;
101 |     }
102 |   }
103 | };
104 | </script>
105 | 
106 | <style scoped lang="scss">
107 | .product {
108 |   padding-bottom: 2rem;
109 |   &__img {
110 |     width: 100%;
111 |     height: 100%;
112 | 
113 |     &:focus {
114 |       outline: none;
115 |     }
116 |   }
117 | 
118 |   &__text {
119 |     flex: 0 0 40%;
120 |   }
121 | 
122 |   &__link {
123 |     flex: 0 0 60%;
124 |     height: 60%;
125 |     padding: 1rem;
126 |     position: relative;
127 |     cursor: pointer;
128 |   }
129 | 
130 |   &__title {
131 |     font-size: 0.8rem;
132 |   }
133 | 
134 |   &__price {
135 |   }
136 | 
137 |   &__description {
138 |     font-size: 0.7rem;
139 |   }
140 | 
141 |   &:hover {
142 |     box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
143 |   }
144 | 
145 |   &__add-to-cart {
146 |     position: absolute;
147 |     bottom: 0.8rem;
148 |     width: 60%;
149 |     left: 50%;
150 |     opacity: 0;
151 |     visibility: hidden;
152 |     transform: translateX(-50%);
153 |     transition: all 0.2s;
154 |     padding: 3px 12px;
155 |   }
156 | 
157 |   &:hover &__add-to-cart {
158 |     visibility: visible;
159 |     opacity: 1;
160 |   }
161 | 
162 |   &:hover .owl-dots {
163 |     display: inline-block;
164 |   }
165 | }
166 | 
167 | @media only screen and (max-width: 768px) {
168 |   .product {
169 |     height: auto !important;
170 |     &__add-to-cart {
171 |       visibility: visible;
172 |       opacity: 1;
173 |     }
174 | 
175 |     & .owl-dots {
176 |       display: inline-block;
177 |     }
178 |   }
179 | }
180 | </style>
181 | 


--------------------------------------------------------------------------------
/src/components/products/ProductDetail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <aside >
 3 |         <article class="card-body p-5">
 4 |             <h3 class="title mb-3">{{product.title}}</h3>
 5 |             <p class="price-detail-wrap">
 6 | 	<span class="price h3 text-warning">
 7 | 		<span class="currency">$</span><span class="num">{{product.price | priceFormatter}}</span>
 8 | 	</span>
 9 |             </p>
10 |             <dl class="item-property">
11 |                 <dt>Description</dt>
12 |                 <dd><p class="text-capitalize">{{product.description}}</p></dd>
13 |             </dl>
14 |             <dl class="param param-feature">
15 |                 <dt>Brand</dt>
16 |                 <dd class="text-capitalize">{{product.brand}}</dd>
17 |             </dl>
18 |             <dl class="param param-feature">
19 |                 <dt>Size</dt>
20 |                 <dd>{{product.size}}</dd>
21 |             </dl>
22 |             <dl class="param param-feature">
23 |                 <dt>Camera</dt>
24 |                 <dd>{{product.camera}}</dd>
25 |             </dl>
26 |             <dl class="param param-feature">
27 |                 <dt>CPU</dt>
28 |                 <dd>{{product.cpu}}</dd>
29 |             </dl>
30 |             <dl class="param param-feature">
31 |                 <dt>Memory</dt>
32 |                 <dd>{{product.memory}}</dd>
33 |             </dl>
34 |             <dl class="param param-feature">
35 |                 <dt>Display</dt>
36 |                 <dd>{{product.display}}</dd>
37 |             </dl>
38 |             <dl class="param param-feature">
39 |                 <dt>Battery</dt>
40 |                 <dd>{{product.battery}}</dd>
41 |             </dl>
42 |             <hr/>
43 |             <button
44 |                     @click="onAddProductToCart()"
45 |                     class="btn btn-lg btn-outline-primary text-uppercase"><i
46 |                     class="fa fa-shopping-cart"></i> Add to cart
47 |             </button>
48 |         </article>
49 |     </aside>
50 | </template>
51 | 
52 | <script>
53 |     import {ADD_PRODUCT_TO_CART} from "../../store/types";
54 | 
55 |     export default {
56 |         name: "ProductDetail",
57 |         props: {
58 |             product: Object
59 |         },
60 |         methods: {
61 |             onAddProductToCart() {
62 |                 this.$store.commit(ADD_PRODUCT_TO_CART, this.product);
63 |             }
64 |         }
65 |     }
66 | </script>
67 | 
68 | <style scoped>
69 | 
70 | </style>
71 | 


--------------------------------------------------------------------------------
/src/components/products/ProductList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <Fragment>
 3 |     <div class="row mb-3">
 4 |         <div class="col-12 d-none d-lg-block d-xl-block">
 5 |             <div class="card  ">
 6 |                 <div class="card-header d-flex justify-content-end ">
 7 |                     <span class="mr-3">Change Layout: </span>
 8 |                     <LayoutMode
 9 |                             :isActive="gridValue === 3"
10 |                             :len="3"
11 |                             @changeLayout="onChangeLayout($event)"
12 |                             style="margin-right: .8rem"
13 |                     ></LayoutMode>
14 |                     <LayoutMode
15 |                             :isActive="gridValue === 4"
16 |                             :len="4"
17 |                             @changeLayout="onChangeLayout($event)"
18 |                     ></LayoutMode>
19 |                 </div>
20 |             </div>
21 |         </div>
22 |     </div>
23 |     <div class="row">
24 |         <div
25 |                 v-for="product in $store.getters.paginate"
26 |                 :key="product.id"
27 |                 :class="['col-md-6 mb-4', colValue]">
28 |             <Product :product="product"></Product>
29 |         </div>
30 | 
31 | 
32 |     </div>
33 | </Fragment>
34 | </template>
35 | 
36 | <script>
37 |     import LayoutMode from "../core/LayoutMode";
38 |     import Product from "./Product";
39 |     import { Fragment } from 'vue-fragment';
40 |     export default {
41 |         name: "ProductList",
42 |         components: {Product, LayoutMode, Fragment},
43 |         data() {
44 |             return {
45 |                 colValue: 'col-lg-4',
46 |                 gridValue: 3,
47 |                 currentPage: this.$store.state.currentPage,
48 |                 perPage: this.$store.state.perPage,
49 |                 products: this.$store.getters.paginate
50 |             }
51 |         },
52 |         methods: {
53 |             onChangeLayout(n) {
54 |                 this.gridValue = n;
55 |                 if (n === 4) {
56 |                     this.colValue = `col-lg-${3}`;
57 |                 } else {
58 |                     this.colValue = `col-lg-${4}`;
59 |                 }
60 |             }
61 |         }
62 |     }
63 | </script>
64 | 
65 | <style scoped>
66 | 
67 | </style>
68 | 


--------------------------------------------------------------------------------
/src/components/products/ProductSlider.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <aside >
 3 |         <article class="gallery-wrap">
 4 |             <div class="img-big-wrap">
 5 |                 <div style="padding: 2rem" ref="imageContainer" ><a href="#"><img
 6 |                         :src="currentImage"
 7 |                         style="width: 100%; height: 100%"
 8 |                 /></a></div>
 9 |             </div>
10 |             <div class="img-small-wrap">
11 |                 <div
12 |                         v-for="(image, i) in images"
13 |                         :key="i"
14 |                         class="item-gallery" @click="changeImage(i)"><img :src="image"/></div>
15 |             </div>
16 |         </article>
17 |     </aside>
18 | </template>
19 | 
20 | <script>
21 |     export default {
22 |         name: "ProductSlider",
23 |         props: {
24 |             images: Array
25 |         },
26 |         data() {
27 |             return {
28 |                 currentImage: this.$props.images[0],
29 |             }
30 |         },
31 | 
32 |         methods: {
33 |             changeImage(n) {
34 |                 this.currentImage = this.$props.images[n];
35 |             }
36 |         }
37 |     }
38 | </script>
39 | 
40 | <style scoped>
41 |     .gallery-wrap .img-big-wrap img {
42 |         height: 450px;
43 |         width: auto;
44 |         display: inline-block;
45 |     }
46 | 
47 | 
48 | 
49 |     .gallery-wrap .img-small-wrap .item-gallery {
50 |         width: 60px;
51 |         height: 60px;
52 |         border: 1px solid #ddd;
53 |         margin: 7px 2px;
54 |         display: inline-block;
55 |         overflow: hidden;
56 |     }
57 | 
58 |     .gallery-wrap .img-small-wrap {
59 |         text-align: center;
60 |     }
61 |     .gallery-wrap .img-small-wrap img {
62 |         max-width: 100%;
63 |         max-height: 100%;
64 |         object-fit: cover;
65 |         border-radius: 4px;
66 |         cursor: pointer;
67 |     }
68 | </style>
69 | 


--------------------------------------------------------------------------------
/src/components/products/ProductSliderDots.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="owl-dots">
 3 |         <button
 4 |                 v-for="i in dots"
 5 |                 :key="i"
 6 |                 @click="$emit('changeItem', i)"
 7 |                 :class="['owl-dot', {active: activeItem === i}]"
 8 |                 role="button">
 9 |         </button>
10 |     </div>
11 | </template>
12 | 
13 | <script>
14 |     export default {
15 |         name: "ProductSliderDots",
16 |         props: {
17 |             len: Number,
18 |             activeItem: Number
19 |         },
20 |         data() {
21 |             return {
22 |                 dots: []
23 |             }
24 |         },
25 |         created() {
26 |             for (let i = 0; i < this.len; i++) {
27 |                 this.dots.push(i);
28 |             }
29 |         }
30 |     }
31 | </script>
32 | 
33 | <style scoped>
34 |     .owl-dots {
35 |         display: none;
36 |         position: absolute;
37 |         bottom: -1rem;
38 |         left: 0;
39 | 
40 |     }
41 | 
42 |     .owl-dots {
43 |         width: 100%;
44 |         text-align: center;
45 |     }
46 | 
47 |     .owl-dots .active.owl-dot {
48 |         background-color: #f28b00;
49 |         border-color: #f28b00;
50 |     }
51 | 
52 |     .owl-dots .owl-dot {
53 |         display: inline-block;
54 |         zoom: 1;
55 |         margin: 8px 4px;
56 |         border-radius: 10px;
57 |         -moz-border-radius: 10px;
58 |         -o-border-radius: 10px;
59 |         -webkit-border-radius: 10px;
60 |         -ms-webkit-radius: 10px;
61 |         zoom: 1;
62 |         background-color: #fff;
63 |         padding: 3px;
64 |         border: solid 1px #e9e9e9;
65 |         cursor: pointer;
66 |     }
67 | </style>
68 | 


--------------------------------------------------------------------------------
/src/components/shopping-cart/ShoppingCartContainer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container" style="padding-top: 6rem;" >
 3 |         <div class="card shopping-cart">
 4 |             <div class="card-header bg-dark text-light">
 5 |                 <i class="fa fa-shopping-cart pr-2" aria-hidden="true"></i>
 6 |                 Shopping cart
 7 |                 <div class="clearfix"></div>
 8 |             </div>
 9 |             <div class="card-body">
10 |                 <ShoppingCartItem
11 |                         v-for="cartItem in $store.state.cart"
12 |                         :product="cartItem"
13 |                 ></ShoppingCartItem>
14 |                 <h2 class="display-4 text-center" v-if="$store.state.cart.length === 0">
15 |                     There is no item in cart
16 |                 </h2>
17 |             </div>
18 |             <div class="card-footer">
19 |                 <div class="pull-right" style="margin: 10px">
20 |                     <div class="pull-right" style="margin: 5px">
21 |                         Total price: <b>{{$store.getters.totalPrice | priceFormatter}}$</b>
22 |                     </div>
23 |                 </div>
24 |             </div>
25 |         </div>
26 |     </div>
27 | </template>
28 | 
29 | <script>
30 |     import ShoppingCartItem from "./ShoppingCartItem";
31 |     export default {
32 |         name: "ShoppingCartContainer",
33 |         components: {ShoppingCartItem}
34 |     }
35 | </script>
36 | 
37 | <style scoped>
38 | 
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/components/shopping-cart/ShoppingCartItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="row align-items-center mb-3">
  3 |         <div class="col-12 col-sm-12 col-md-2 text-center">
  4 |             <img class="img-responsive" alt="prewiew" style="height: 60%; width: 60%" :src="product.images[0]"
  5 |             />
  6 |         </div>
  7 |         <div class="col-12 text-sm-center col-sm-12 text-md-left col-md-6">
  8 |             <h4 class="product-name"><strong>{{product.title | shortenTitle}}</strong></h4>
  9 |             <h4>
 10 |                 <small class="product-description">{{product.description}}</small>
 11 |             </h4>
 12 |         </div>
 13 |         <div class="col-12 col-sm-12 text-sm-center col-md-4 text-md-right row product-quantity-container align-items-center">
 14 |             <div class="col-6 col-sm-6 col-md-6 text-md-right " style="padding-top: 5px">
 15 |                 <h6><strong>{{product.price | priceFormatter}}$ <span class="text-muted">x</span></strong></h6>
 16 |             </div>
 17 |             <div class="col-4 col-sm-4 col-md-4">
 18 |                 <div class="quantity">
 19 |                     <input
 20 |                             @click="onIncrementCartItem()"
 21 |                             type="button" value="+" class="plus"/>
 22 |                     <input
 23 |                             :value="product.quantity"
 24 |                             :disabled="true"
 25 |                             type="number" step="1" max="10" min="1" title="Qty"
 26 |                             class="qty"
 27 |                             size="4"/>
 28 |                     <input
 29 |                             @click="onDecrementCartItem()"
 30 |                             type="button" value="-" class="minus"/>
 31 |                 </div>
 32 |             </div>
 33 |             <div class="col-2 col-sm-2 col-md-2 text-right">
 34 |                 <button
 35 |                         @click="onRemoveCartItem()"
 36 |                         type="button" class="btn btn-outline-danger btn-xs">
 37 |                     <i class="fa fa-trash"></i>
 38 |                 </button>
 39 |             </div>
 40 |         </div>
 41 |     </div>
 42 | 
 43 | </template>
 44 | 
 45 | <script>
 46 |     import {
 47 |         REMOVE_PRODUCT_FROM_CART,
 48 |         DECREMENT_CART_ITEM_QUANTITY,
 49 |         INCREMENT_CART_ITEM_QUANTITY,} from "../../store/types";
 50 | 
 51 |     export default {
 52 |         name: "ShoppingCartItem",
 53 |         props: {
 54 |             product: Object
 55 |         },
 56 |         methods: {
 57 |             onIncrementCartItem() {
 58 |                 window.console.log(INCREMENT_CART_ITEM_QUANTITY);
 59 |                 this.$store.commit(INCREMENT_CART_ITEM_QUANTITY,this.product.id);
 60 | 
 61 |             },
 62 |             onDecrementCartItem() {
 63 |                 this.$store.commit(DECREMENT_CART_ITEM_QUANTITY, this.product.id);
 64 |             },
 65 |             onRemoveCartItem() {
 66 |                 this.$store.commit(REMOVE_PRODUCT_FROM_CART, this.product.id);
 67 |             }
 68 |         }
 69 |     }
 70 | </script>
 71 | 
 72 | <style scoped>
 73 | 
 74 | 
 75 |     .quantity {
 76 |         float: left;
 77 |         margin-right: 15px;
 78 |         background-color: #eee;
 79 |         position: relative;
 80 |         width: 80px;
 81 |         overflow: hidden
 82 |     }
 83 | 
 84 |     .quantity input {
 85 |         margin: 0;
 86 |         text-align: center;
 87 |         width: 15px;
 88 |         height: 15px;
 89 |         padding: 0;
 90 |         float: right;
 91 |         color: #000;
 92 |         font-size: 20px;
 93 |         border: 0;
 94 |         outline: 0;
 95 |         background-color: #F6F6F6
 96 |     }
 97 | 
 98 |     .quantity input.qty {
 99 |         position: relative;
100 |         border: 0;
101 |         width: 100%;
102 |         height: 40px;
103 |         padding: 10px 25px 10px 10px;
104 |         text-align: center;
105 |         font-weight: 400;
106 |         font-size: 15px;
107 |         border-radius: 0;
108 |         background-clip: padding-box
109 |     }
110 | 
111 |     .quantity .minus, .quantity .plus {
112 |         line-height: 0;
113 |         background-clip: padding-box;
114 |         -webkit-border-radius: 0;
115 |         -moz-border-radius: 0;
116 |         border-radius: 0;
117 |         -webkit-background-size: 6px 30px;
118 |         -moz-background-size: 6px 30px;
119 |         color: #bbb;
120 |         font-size: 20px;
121 |         position: absolute;
122 |         height: 50%;
123 |         border: 0;
124 |         right: 0;
125 |         padding: 0;
126 |         width: 25px;
127 |         z-index: 3
128 |     }
129 | 
130 |     .quantity .minus:hover, .quantity .plus:hover {
131 |         background-color: #dad8da
132 |     }
133 | 
134 |     .quantity .minus {
135 |         bottom: 0
136 |     }
137 |     .shopping-cart {
138 |         margin-top: 20px;
139 |     }
140 | 
141 |     @media only screen and (max-width: 768px) {
142 |         .product-name {
143 |             font-size: 1rem;
144 |             margin-top: .5rem;
145 |         }
146 | 
147 |         .product-description {
148 |             font-size: 1rem;
149 |         }
150 | 
151 |         .product-quantity-container {
152 |             margin-top: .5rem;
153 |         }
154 |     }
155 | 
156 | </style>
157 | 


--------------------------------------------------------------------------------
/src/data/brands.js:
--------------------------------------------------------------------------------
1 | export const brands = ["apple","huawei","meizu","samsung","vestel","xiaomi","asus"];
2 | 


--------------------------------------------------------------------------------
/src/data/phones.js:
--------------------------------------------------------------------------------
  1 | export const phones = [{
  2 |     title: 'Apple iPhone 7 Plus 32 GB (Apple Türkiye Garantili)',
  3 |     category: 'phone',
  4 |     images: ['https://productimages.hepsiburada.net/s/18/280-413/9801258663986.jpg?v1', 'https://productimages.hepsiburada.net/s/18/280-413/9801258696754.jpg?v1', 'https://productimages.hepsiburada.net/s/18/280-413/9801258729522.jpg?v1', 'https://productimages.hepsiburada.net/s/18/280-413/9801258762290.jpg?v1'],
  5 |     brand: 'apple',
  6 |     price: 4241.499828399639,
  7 |     cpu: '1.3GHz Apple A6',
  8 |     camera: '8mp (3264x2448)',
  9 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
 10 |     weight: '132 grams (4.7 ounces) with battery',
 11 |     display: '4.0 326 pixel density',
 12 |     battery: '1480 mAh',
 13 |     memory: '16GB, 32GB and RAM 1 GB',
 14 |     id: 0,
 15 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
 16 | }, {
 17 |     title: 'Huawei Mate 20 Lite 64 GB (Huawei Türkiye Garantili)',
 18 |     category: 'phone',
 19 |     images: ['https://productimages.hepsiburada.net/s/21/280-413/9933217792050.jpg?v1', 'https://productimages.hepsiburada.net/s/21/280-413/9933217628210.jpg?v1', 'https://productimages.hepsiburada.net/s/21/280-413/9933217660978.jpg?v1', 'https://productimages.hepsiburada.net/s/21/280-413/9933217693746.jpg?v1'],
 20 |     brand: 'huawei',
 21 |     price: 1823.6625483451157,
 22 |     cpu: '1.3GHz Apple A6',
 23 |     camera: '8mp (3264x2448)',
 24 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
 25 |     weight: '132 grams (4.7 ounces) with battery',
 26 |     display: '4.0 326 pixel density',
 27 |     battery: '1480 mAh',
 28 |     memory: '16GB, 32GB and RAM 1 GB',
 29 |     id: 1,
 30 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
 31 | }, {
 32 |     title: 'Huawei P20 Lite 64 GB (Huawei Türkiye Garantili)',
 33 |     category: 'phone',
 34 |     images: ['https://productimages.hepsiburada.net/s/19/280-413/9826975907890.jpg?v1', 'https://productimages.hepsiburada.net/s/19/280-413/9826975940658.jpg?v1', 'https://productimages.hepsiburada.net/s/19/280-413/9826975973426.jpg?v1', 'https://productimages.hepsiburada.net/s/19/280-413/9826976006194.jpg?v1'],
 35 |     brand: 'huawei',
 36 |     price: 7429.467511354926,
 37 |     cpu: '1.3GHz Apple A6',
 38 |     camera: '8mp (3264x2448)',
 39 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
 40 |     weight: '132 grams (4.7 ounces) with battery',
 41 |     display: '4.0 326 pixel density',
 42 |     battery: '1480 mAh',
 43 |     memory: '16GB, 32GB and RAM 1 GB',
 44 |     id: 2,
 45 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
 46 | }, {
 47 |     title: 'Meizu 16TH 64 GB (Meizu Türkiye Garantili)',
 48 |     category: 'phone',
 49 |     images: ['https://productimages.hepsiburada.net/s/24/280-413/10094991409202.jpg?v1', 'https://productimages.hepsiburada.net/s/24/280-413/10094991441970.jpg?v1', 'https://productimages.hepsiburada.net/s/24/280-413/10094991474738.jpg?v1', 'https://productimages.hepsiburada.net/s/24/280-413/10094991507506.jpg?v1'],
 50 |     brand: 'meizu',
 51 |     price: 5664.265944453384,
 52 |     cpu: '1.3GHz Apple A6',
 53 |     camera: '8mp (3264x2448)',
 54 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
 55 |     weight: '132 grams (4.7 ounces) with battery',
 56 |     display: '4.0 326 pixel density',
 57 |     battery: '1480 mAh',
 58 |     memory: '16GB, 32GB and RAM 1 GB',
 59 |     id: 3,
 60 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
 61 | }, {
 62 |     title: 'Meizu X8 64 GB (Meizu Türkiye Garantili)',
 63 |     category: 'phone',
 64 |     images: ['https://productimages.hepsiburada.net/s/25/280-413/10108030091314.jpg?v1', 'https://productimages.hepsiburada.net/s/24/280-413/10082391818290.jpg?v1', 'https://productimages.hepsiburada.net/s/24/280-413/10082391851058.jpg?v1', 'https://productimages.hepsiburada.net/s/24/280-413/10082391883826.jpg?v1'],
 65 |     brand: 'meizu',
 66 |     price: 4596.99884783711,
 67 |     cpu: '1.3GHz Apple A6',
 68 |     camera: '8mp (3264x2448)',
 69 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
 70 |     weight: '132 grams (4.7 ounces) with battery',
 71 |     display: '4.0 326 pixel density',
 72 |     battery: '1480 mAh',
 73 |     memory: '16GB, 32GB and RAM 1 GB',
 74 |     id: 4,
 75 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
 76 | }, {
 77 |     title: 'Samsung Galaxy A7 2018 64 GB (Samsung Türkiye Garantili)',
 78 |     category: 'phone',
 79 |     images: ['https://productimages.hepsiburada.net/s/22/280-413/9946187399218.jpg?v1', 'https://productimages.hepsiburada.net/s/22/280-413/9946187431986.jpg?v1', 'https://productimages.hepsiburada.net/s/22/280-413/9946187464754.jpg?v1', 'https://productimages.hepsiburada.net/s/22/280-413/9946187497522.jpg?v1'],
 80 |     brand: 'samsung',
 81 |     price: 4108.082941215698,
 82 |     cpu: '1.3GHz Apple A6',
 83 |     camera: '8mp (3264x2448)',
 84 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
 85 |     weight: '132 grams (4.7 ounces) with battery',
 86 |     display: '4.0 326 pixel density',
 87 |     battery: '1480 mAh',
 88 |     memory: '16GB, 32GB and RAM 1 GB',
 89 |     id: 5,
 90 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
 91 | }, {
 92 |     title: 'Samsung Galaxy J6 Plus 32 GB (Samsung Türkiye Garantili)',
 93 |     category: 'phone',
 94 |     images: ['https://productimages.hepsiburada.net/s/22/280-413/9941129494578.jpg?v1', 'https://productimages.hepsiburada.net/s/22/280-413/9941129527346.jpg?v1', 'https://productimages.hepsiburada.net/s/22/280-413/9941129560114.jpg?v1', 'https://productimages.hepsiburada.net/s/22/280-413/9941129592882.jpg?v1'],
 95 |     brand: 'samsung',
 96 |     price: 4260.9529075338505,
 97 |     cpu: '1.3GHz Apple A6',
 98 |     camera: '8mp (3264x2448)',
 99 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
100 |     weight: '132 grams (4.7 ounces) with battery',
101 |     display: '4.0 326 pixel density',
102 |     battery: '1480 mAh',
103 |     memory: '16GB, 32GB and RAM 1 GB',
104 |     id: 6,
105 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
106 | }, {
107 |     title: 'Vestel Venus Z20 (Vestel Garantili)',
108 |     category: 'phone',
109 |     images: ['https://productimages.hepsiburada.net/s/19/280-413/9841497047090.jpg?v1', 'https://productimages.hepsiburada.net/s/19/280-413/9841497079858.jpg?v1', 'https://productimages.hepsiburada.net/s/19/280-413/9841497112626.jpg?v1', 'https://productimages.hepsiburada.net/s/19/280-413/9841497145394.jpg?v1'],
110 |     brand: 'vestel',
111 |     price: 4730.962860489047,
112 |     cpu: '1.3GHz Apple A6',
113 |     camera: '8mp (3264x2448)',
114 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
115 |     weight: '132 grams (4.7 ounces) with battery',
116 |     display: '4.0 326 pixel density',
117 |     battery: '1480 mAh',
118 |     memory: '16GB, 32GB and RAM 1 GB',
119 |     id: 7,
120 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
121 | }, {
122 |     title: 'Xiaomi Mi 8 Lite 128 GB (İthalatçı Garantili)',
123 |     category: 'phone',
124 |     images: ['https://productimages.hepsiburada.net/s/22/280-413/9957349523506.jpg?v1', 'https://productimages.hepsiburada.net/s/22/280-413/9957349556274.jpg?v1', 'https://productimages.hepsiburada.net/s/22/280-413/9957349589042.jpg?v1', 'https://productimages.hepsiburada.net/s/22/280-413/9957349621810.jpg?v1'],
125 |     brand: 'xiaomi',
126 |     price: 5565.737301732921,
127 |     cpu: '1.3GHz Apple A6',
128 |     camera: '8mp (3264x2448)',
129 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
130 |     weight: '132 grams (4.7 ounces) with battery',
131 |     display: '4.0 326 pixel density',
132 |     battery: '1480 mAh',
133 |     memory: '16GB, 32GB and RAM 1 GB',
134 |     id: 8,
135 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
136 | }, {
137 |     title: 'Xiaomi Mi 8 Lite 64 GB (İthalatçı Garantili)',
138 |     category: 'phone',
139 |     images: ['https://productimages.hepsiburada.net/s/23/280-413/10051147202610.jpg?v1', 'https://productimages.hepsiburada.net/s/23/280-413/10051147235378.jpg?v1', 'https://productimages.hepsiburada.net/s/23/280-413/10051147268146.jpg?v1', 'https://productimages.hepsiburada.net/s/23/280-413/10051147300914.jpg?v1'],
140 |     brand: 'xiaomi',
141 |     price: 5830.067673371856,
142 |     cpu: '1.3GHz Apple A6',
143 |     camera: '8mp (3264x2448)',
144 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
145 |     weight: '132 grams (4.7 ounces) with battery',
146 |     display: '4.0 326 pixel density',
147 |     battery: '1480 mAh',
148 |     memory: '16GB, 32GB and RAM 1 GB',
149 |     id: 9,
150 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
151 | }, {
152 |     title: 'Apple iPhone 7 32 GB (Apple Türkiye Garantili)',
153 |     category: 'phone',
154 |     images: ['https://productimages.hepsiburada.net/s/1/280-413/9502147641394.jpg?v1', 'https://productimages.hepsiburada.net/s/1/280-413/9502147674162.jpg?v1', 'https://productimages.hepsiburada.net/s/1/280-413/9502147706930.jpg?v1', 'https://productimages.hepsiburada.net/s/1/280-413/9502147739698.jpg?v1'],
155 |     brand: 'apple',
156 |     price: 1525.6236967422828,
157 |     cpu: '1.3GHz Apple A6',
158 |     camera: '8mp (3264x2448)',
159 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
160 |     weight: '132 grams (4.7 ounces) with battery',
161 |     display: '4.0 326 pixel density',
162 |     battery: '1480 mAh',
163 |     memory: '16GB, 32GB and RAM 1 GB',
164 |     id: 10,
165 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
166 | }, {
167 |     title: 'Samsung Galaxy S10 Plus 128 GB (Samsung Türkiye Garantili)',
168 |     category: 'phone',
169 |     images: ['https://productimages.hepsiburada.net/s/25/280-413/10107992703026.jpg?v1', 'https://productimages.hepsiburada.net/s/25/280-413/10107992735794.jpg?v1', 'https://productimages.hepsiburada.net/s/25/280-413/10107992768562.jpg?v1', 'https://productimages.hepsiburada.net/s/25/280-413/10107992801330.jpg?v1'],
170 |     brand: 'samsung',
171 |     price: 3429.3471420603028,
172 |     cpu: '1.3GHz Apple A6',
173 |     camera: '8mp (3264x2448)',
174 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
175 |     weight: '132 grams (4.7 ounces) with battery',
176 |     display: '4.0 326 pixel density',
177 |     battery: '1480 mAh',
178 |     memory: '16GB, 32GB and RAM 1 GB',
179 |     id: 11,
180 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
181 | }, {
182 |     title: 'Samsung Galaxy S10 128 GB (Samsung Türkiye Garantili)',
183 |     category: 'phone',
184 |     images: ['https://productimages.hepsiburada.net/s/25/280-413/10107307425842.jpg?v1', 'https://productimages.hepsiburada.net/s/25/280-413/10107307458610.jpg?v1', 'https://productimages.hepsiburada.net/s/25/280-413/10107307491378.jpg?v1', 'https://productimages.hepsiburada.net/s/25/280-413/10107307524146.jpg?v1'],
185 |     brand: 'samsung',
186 |     price: 1017.7877018963508,
187 |     cpu: '1.3GHz Apple A6',
188 |     camera: '8mp (3264x2448)',
189 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
190 |     weight: '132 grams (4.7 ounces) with battery',
191 |     display: '4.0 326 pixel density',
192 |     battery: '1480 mAh',
193 |     memory: '16GB, 32GB and RAM 1 GB',
194 |     id: 12,
195 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
196 | }, {
197 |     title: 'Samsung Galaxy S10e 128 GB (Samsung Türkiye Garantili)',
198 |     category: 'phone',
199 |     images: ['https://productimages.hepsiburada.net/s/25/280-413/10107307032626.jpg?v1', 'https://productimages.hepsiburada.net/s/25/280-413/10107307065394.jpg?v1', 'https://productimages.hepsiburada.net/s/25/280-413/10107307098162.jpg?v1', 'https://productimages.hepsiburada.net/s/25/280-413/10107307130930.jpg?v1'],
200 |     brand: 'samsung',
201 |     price: 3235.202225041739,
202 |     cpu: '1.3GHz Apple A6',
203 |     camera: '8mp (3264x2448)',
204 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
205 |     weight: '132 grams (4.7 ounces) with battery',
206 |     display: '4.0 326 pixel density',
207 |     battery: '1480 mAh',
208 |     memory: '16GB, 32GB and RAM 1 GB',
209 |     id: 13,
210 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
211 | }, {
212 |     title: 'Samsung Galaxy M20 32 GB (Samsung Türkiye Garantili)',
213 |     category: 'phone',
214 |     images: ['https://productimages.hepsiburada.net/s/25/280-413/10094999240754.jpg?v1', 'https://productimages.hepsiburada.net/s/25/280-413/10094999273522.jpg?v1', 'https://productimages.hepsiburada.net/s/25/280-413/10094999306290.jpg?v1', 'https://productimages.hepsiburada.net/s/25/280-413/10094999339058.jpg?v1'],
215 |     brand: 'samsung',
216 |     price: 5850.5748675199875,
217 |     cpu: '1.3GHz Apple A6',
218 |     camera: '8mp (3264x2448)',
219 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
220 |     weight: '132 grams (4.7 ounces) with battery',
221 |     display: '4.0 326 pixel density',
222 |     battery: '1480 mAh',
223 |     memory: '16GB, 32GB and RAM 1 GB',
224 |     id: 14,
225 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
226 | }, {
227 |     title: 'Samsung Galaxy S8 (Samsung Türkiye Garantili)',
228 |     category: 'phone',
229 |     images: ['https://productimages.hepsiburada.net/s/3/280-413/9604775739442.jpg?v1', 'https://productimages.hepsiburada.net/s/4/280-413/9665566703666.jpg?v1', 'https://productimages.hepsiburada.net/s/4/280-413/9665566736434.jpg?v1', 'https://productimages.hepsiburada.net/s/4/280-413/9665566769202.jpg?v1'],
230 |     brand: 'samsung',
231 |     price: 3207.2840718201587,
232 |     cpu: '1.3GHz Apple A6',
233 |     camera: '8mp (3264x2448)',
234 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
235 |     weight: '132 grams (4.7 ounces) with battery',
236 |     display: '4.0 326 pixel density',
237 |     battery: '1480 mAh',
238 |     memory: '16GB, 32GB and RAM 1 GB',
239 |     id: 15,
240 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
241 | }, {
242 |     title: 'Huawei P Smart 2019 64 GB (Huawei Türkiye Garantili)',
243 |     category: 'phone',
244 |     images: ['https://productimages.hepsiburada.net/s/23/280-413/10059934859314.jpg?v1', 'https://productimages.hepsiburada.net/s/23/280-413/10059934892082.jpg?v1', 'https://productimages.hepsiburada.net/s/23/280-413/10059934924850.jpg?v1', 'https://productimages.hepsiburada.net/s/23/280-413/10059934957618.jpg?v1'],
245 |     brand: 'huawei',
246 |     price: 5288.552334214134,
247 |     cpu: '1.3GHz Apple A6',
248 |     camera: '8mp (3264x2448)',
249 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
250 |     weight: '132 grams (4.7 ounces) with battery',
251 |     display: '4.0 326 pixel density',
252 |     battery: '1480 mAh',
253 |     memory: '16GB, 32GB and RAM 1 GB',
254 |     id: 16,
255 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
256 | }, {
257 |     title: 'Xiaomi Mi 8 128 GB (İthalatçı Garantili)',
258 |     category: 'phone',
259 |     images: ['https://productimages.hepsiburada.net/s/20/280-413/9873948540978.jpg?v1', 'https://productimages.hepsiburada.net/s/20/280-413/9873948573746.jpg?v1', 'https://productimages.hepsiburada.net/s/20/280-413/9873948606514.jpg?v1', 'https://productimages.hepsiburada.net/s/20/280-413/9873948639282.jpg?v1'],
260 |     brand: 'xiaomi',
261 |     price: 1354.662450097338,
262 |     cpu: '1.3GHz Apple A6',
263 |     camera: '8mp (3264x2448)',
264 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
265 |     weight: '132 grams (4.7 ounces) with battery',
266 |     display: '4.0 326 pixel density',
267 |     battery: '1480 mAh',
268 |     memory: '16GB, 32GB and RAM 1 GB',
269 |     id: 17,
270 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
271 | }, {
272 |     title: 'Apple iPhone 6S Plus 32 GB (Apple Türkiye Garantili)',
273 |     category: 'phone',
274 |     images: ['https://productimages.hepsiburada.net/s/1/280-413/9489589993522.jpg?v1', 'https://productimages.hepsiburada.net/s/1/280-413/9489589927986.jpg?v1', 'https://productimages.hepsiburada.net/s/1/280-413/9489589960754.jpg?v1'],
275 |     brand: 'apple',
276 |     price: 5467.082548922358,
277 |     cpu: '1.3GHz Apple A6',
278 |     camera: '8mp (3264x2448)',
279 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
280 |     weight: '132 grams (4.7 ounces) with battery',
281 |     display: '4.0 326 pixel density',
282 |     battery: '1480 mAh',
283 |     memory: '16GB, 32GB and RAM 1 GB',
284 |     id: 18,
285 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
286 | }, {
287 |     title: 'Meizu 16 64 GB (Meizu Türkiye Garantili)',
288 |     category: 'phone',
289 |     images: ['https://productimages.hepsiburada.net/s/24/280-413/10082399387698.jpg?v1', 'https://productimages.hepsiburada.net/s/24/280-413/10082399420466.jpg?v1', 'https://productimages.hepsiburada.net/s/24/280-413/10082399453234.jpg?v1', 'https://productimages.hepsiburada.net/s/24/280-413/10082399486002.jpg?v1'],
290 |     brand: 'meizu',
291 |     price: 1173.3514841571446,
292 |     cpu: '1.3GHz Apple A6',
293 |     camera: '8mp (3264x2448)',
294 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
295 |     weight: '132 grams (4.7 ounces) with battery',
296 |     display: '4.0 326 pixel density',
297 |     battery: '1480 mAh',
298 |     memory: '16GB, 32GB and RAM 1 GB',
299 |     id: 19,
300 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
301 | }, {
302 |     title: 'Vestel Venüs E3 (Vestel Türkiye Garantili)',
303 |     category: 'phone',
304 |     images: ['https://productimages.hepsiburada.net/s/20/280-413/9885707108402.jpg?v1', 'https://productimages.hepsiburada.net/s/20/280-413/9885707141170.jpg?v1', 'https://productimages.hepsiburada.net/s/20/280-413/9885707173938.jpg?v1'],
305 |     brand: 'vestel',
306 |     price: 2371.8351283872053,
307 |     cpu: '1.3GHz Apple A6',
308 |     camera: '8mp (3264x2448)',
309 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
310 |     weight: '132 grams (4.7 ounces) with battery',
311 |     display: '4.0 326 pixel density',
312 |     battery: '1480 mAh',
313 |     memory: '16GB, 32GB and RAM 1 GB',
314 |     id: 20,
315 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
316 | }, {
317 |     title: 'Asus Zenfone Max Pro ZB602KL 64 GB (Asus Türkiye Garantili)',
318 |     category: 'phone',
319 |     images: ['https://productimages.hepsiburada.net/s/21/280-413/9924255121458.jpg?v1', 'https://productimages.hepsiburada.net/s/21/280-413/9924255154226.jpg?v1', 'https://productimages.hepsiburada.net/s/21/280-413/9924255186994.jpg?v1'],
320 |     brand: 'asus',
321 |     price: 2603.504706144322,
322 |     cpu: '1.3GHz Apple A6',
323 |     camera: '8mp (3264x2448)',
324 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
325 |     weight: '132 grams (4.7 ounces) with battery',
326 |     display: '4.0 326 pixel density',
327 |     battery: '1480 mAh',
328 |     memory: '16GB, 32GB and RAM 1 GB',
329 |     id: 21,
330 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
331 | }, {
332 |     title: 'Samsung Galaxy Note 9 128 GB (Samsung Türkiye Garantili)',
333 |     category: 'phone',
334 |     images: ['https://productimages.hepsiburada.net/s/20/280-413/9902572142642.jpg?v1', 'https://productimages.hepsiburada.net/s/20/280-413/9902572175410.jpg?v1', 'https://productimages.hepsiburada.net/s/20/280-413/9902572208178.jpg?v1', 'https://productimages.hepsiburada.net/s/20/280-413/9902572240946.jpg?v1'],
335 |     brand: 'samsung',
336 |     price: 1165.0255199945123,
337 |     cpu: '1.3GHz Apple A6',
338 |     camera: '8mp (3264x2448)',
339 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
340 |     weight: '132 grams (4.7 ounces) with battery',
341 |     display: '4.0 326 pixel density',
342 |     battery: '1480 mAh',
343 |     memory: '16GB, 32GB and RAM 1 GB',
344 |     id: 22,
345 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
346 | }, {
347 |     title: 'Huawei Mate 20 Lite Dual Sim 64 GB (İthalatçı Garantili)',
348 |     category: 'phone',
349 |     images: ['https://productimages.hepsiburada.net/s/21/280-413/9933217792050.jpg?v1',
350 |         'https://productimages.hepsiburada.net/s/21/280-413/9933217660978.jpg?v1',
351 |         'https://productimages.hepsiburada.net/s/21/280-413/9933217693746.jpg?v1',
352 |         'https://productimages.hepsiburada.net/s/21/280-413/9933217726514.jpg?v1'],
353 |     brand: 'huawei',
354 |     price: 2693.4407990587074,
355 |     cpu: '1.3GHz Apple A6',
356 |     camera: '8mp (3264x2448)',
357 |     size: '124.4mm x 59.2mm x 8.97mm (4.9 x 2.33 x 0.35)',
358 |     weight: '132 grams (4.7 ounces) with battery',
359 |     display: '4.0 326 pixel density',
360 |     battery: '1480 mAh',
361 |     memory: '16GB, 32GB and RAM 1 GB',
362 |     id: 23,
363 |     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!'
364 | }];
365 | 
366 | 


--------------------------------------------------------------------------------
/src/filters/brandFilter.js:
--------------------------------------------------------------------------------
1 | export const brandFilter = (arr, brand) => {
2 |     if(!brand) return arr;
3 | 
4 |     return arr.filter(product => brand.includes(product.brand));
5 | };


--------------------------------------------------------------------------------
/src/filters/orderByFilter.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | export const orderByFilter = (arr, type ) => {
 4 |     if(!type) return arr;
 5 |     if(type === 'asc') {
 6 |         return arr.slice().sort((el1, el2) => el1.price - el2.price);
 7 |     } else {
 8 |         return arr.slice().sort((el1, el2) => el2.price - el1.price);
 9 |     }
10 | };
11 | 


--------------------------------------------------------------------------------
/src/filters/paginationFilter.js:
--------------------------------------------------------------------------------
 1 | export const paginationPipe = (state,args) => {
 2 |     if (!args || !args.perPage || !args.currentPage) {
 3 |         return state;
 4 |     }
 5 |     const location = (args.perPage * (args.currentPage - 1)) || 0 ;
 6 | 
 7 |     return state.slice(location, location + args.perPage);
 8 | };
 9 | 
10 | 


--------------------------------------------------------------------------------
/src/filters/priceFormatter.js:
--------------------------------------------------------------------------------
1 | export const formatMoney = (price) => {
2 |     return price.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
3 | };


--------------------------------------------------------------------------------
/src/filters/shortenTitle.js:
--------------------------------------------------------------------------------
1 | export const shortenTitle = (title) => {
2 |     return title.split(' (')[0];
3 | };


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import App from './App.vue'
 4 | import '../custom.scss'
 5 | 
 6 | Vue.config.devtools = true;
 7 | import store from './store';
 8 | import {Plugin} from 'vue-fragment'
 9 | import VueSwal from 'vue-swal'
10 | 
11 | 
12 | Vue.use(Plugin);
13 | Vue.use(VueSwal)
14 | 
15 | 
16 | 
17 | Vue.use(VueRouter);
18 | //filters
19 | import {brandFilter} from "./filters/brandFilter";
20 | import {formatMoney} from "./filters/priceFormatter";
21 | import {paginationPipe} from "./filters/paginationFilter";
22 | 
23 | import Home from './Pages/Home';
24 | import ShoppingCartPage from './Pages/ShoppingCartPage';
25 | import ProductDetailPage from './Pages/ProductDetailPage';
26 | import {shortenTitle} from "./filters/shortenTitle";
27 | import {CLEAR_BRAND_FILTER, CLEAR_ORDER_BY_PRICE} from "./store/types";
28 | 
29 | Vue.config.productionTip = false;
30 | 
31 | Vue.filter('brandFilter', brandFilter);
32 | Vue.filter('shortenTitle', shortenTitle)
33 | Vue.filter('priceFormatter', formatMoney);
34 | Vue.filter('pagination', paginationPipe);
35 | 
36 | 
37 | const routes = [
38 |     {path: '/', redirect: '/products'},
39 |     {path: '/products', component: Home,},
40 |     {path: '/products/:id', component: ProductDetailPage},
41 |     {path: '/cart', component: ShoppingCartPage}
42 | ];
43 | 
44 | const router = new VueRouter({routes});
45 | new Vue({
46 |     render: h => h(App),
47 |     store,
48 |     router
49 | }).$mount('#app');
50 | 
51 | router.afterEach(() => {
52 |     window.scrollTo(0,0);
53 |     store.commit(CLEAR_BRAND_FILTER);
54 |     store.commit(CLEAR_ORDER_BY_PRICE);
55 | });
56 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue';
  2 | import Vuex from 'vuex';
  3 | import {phones} from "../data/phones";
  4 | import {brands} from "../data/brands";
  5 | import * as Types from "./types";
  6 | import {brandFilter} from "../filters/brandFilter";
  7 | import {orderByFilter} from "../filters/orderByFilter";
  8 | import {paginationPipe} from "../filters/paginationFilter";
  9 | 
 10 | Vue.use(Vuex);
 11 | 
 12 | 
 13 | const store = new Vuex.Store({
 14 |     state: {
 15 |         products: phones,
 16 |         brands: brands,
 17 |         cart: [],
 18 |         brandFilter : '',
 19 |         orderBy: '',
 20 |         perPage: 12,
 21 |         currentPage: 1,
 22 |         pagesToShow: 3,
 23 |     },
 24 |     mutations: {
 25 |         [Types.ADD_PRODUCT_TO_CART] (state, product) {
 26 |           const cartItemIndex = state.cart.findIndex(item => item.id === product.id);
 27 | 
 28 |           if(cartItemIndex < 0) {
 29 |               state.cart.push({...product, quantity: 1});
 30 |           } else {
 31 |               if(state.cart[cartItemIndex].quantity === 10) return void  0;
 32 |               state.cart[cartItemIndex].quantity++;
 33 |           }
 34 |         },
 35 |         [Types.REMOVE_PRODUCT_FROM_CART] (state, id) {
 36 |           const cartItemIndex =   state.cart.findIndex(item => item.id === id);
 37 | 
 38 |           state.cart.splice(cartItemIndex, 1);
 39 |         },
 40 |         [Types.INCREMENT_CART_ITEM_QUANTITY] (state, id) {
 41 |             const cartItemIndex =   state.cart.findIndex(item => item.id === id);
 42 |             window.console.log(state.cart[cartItemIndex]);
 43 |             if(state.cart[cartItemIndex].quantity === 10) return void  0;
 44 |             state.cart[cartItemIndex].quantity++;
 45 | 
 46 |         },
 47 |         [Types.DECREMENT_CART_ITEM_QUANTITY] (state, id) {
 48 |             const cartItemIndex =   state.cart.findIndex(item => item.id === id);
 49 |             if(state.cart[cartItemIndex].quantity === 1) return void  0;
 50 |             state.cart[cartItemIndex].quantity--;
 51 |         },
 52 |         [Types.PREV_PAGE] (state) {
 53 |             state.currentPage--;
 54 |         },
 55 |         [Types.NEXT_PAGE] (state) {
 56 |             state.currentPage++;
 57 |         },
 58 |         [Types.GO_PAGE] (state, payload) {
 59 |             state.currentPage = payload;
 60 |         },
 61 |         [Types.ORDER_BY_ASC] (state) {
 62 |             state.orderBy = 'asc'
 63 |         },
 64 |         [Types.ORDER_BY_DESC] (state) {
 65 |             state.orderBy = 'desc';
 66 |         },
 67 |         [Types.CLEAR_ORDER_BY_PRICE] (state) {
 68 |             state.orderBy = '';
 69 |         },
 70 |         [Types.ADD_BRAND_TO_FILTER] (state, brand) {
 71 |             if(state.brandFilter.includes(brand)) return void 0;
 72 | 
 73 |             state.brandFilter += brand;
 74 |         },
 75 |         [Types.REMOVE_BRAND_FROM_FILTER] (state, brand) {
 76 |             const reg = new RegExp(brand, 'gi');
 77 |             state.brandFilter = state.brandFilter.replace(reg, '');
 78 |         },
 79 |         [Types.CLEAR_BRAND_FILTER] (state) {
 80 |             state.brandFilter = '';
 81 |         }
 82 |     },
 83 |     getters: {
 84 |         filterProducts(state) {
 85 |             const brands = state.brandFilter;
 86 |             const orderBy = state.orderBy;
 87 | 
 88 |             const filterByBrandArr = brandFilter(state.products, brands);
 89 |             const filterByOrderArr = orderByFilter(filterByBrandArr, orderBy);
 90 | 
 91 |             return filterByOrderArr;
 92 |         },
 93 |         paginate(state, getters) {
 94 |             return paginationPipe(getters.filterProducts, {perPage:state.perPage, currentPage: state.currentPage});
 95 |         },
 96 |         totalItemCountAfterFilter(state, getters) {
 97 |             return getters.filterProducts.length;
 98 |         },
 99 |         brandsCount(state) {
100 |             const counts = {};
101 |             state.products.forEach(p => {
102 |                 counts[p.brand] = counts[p.brand] + 1 || 1;
103 |             });
104 | 
105 |             return counts;
106 |         },
107 |         cartLength(state) {
108 |             return state.cart.length;
109 |         },
110 |         totalPrice(state) {
111 |             return state.cart.reduce((count, curItem) => {
112 |                 return count + (curItem.quantity * curItem.price);
113 |             }, 0);
114 |         }
115 |     }
116 | });
117 | 
118 | export default store;
119 | 


--------------------------------------------------------------------------------
/src/store/types.js:
--------------------------------------------------------------------------------
 1 | export const ADD_PRODUCT_TO_CART = 'ADD_PRODUCT_TO_CART';
 2 | export const REMOVE_PRODUCT_FROM_CART = 'REMOVE_PRODUCT_FROM_CART';
 3 | export const INCREMENT_CART_ITEM_QUANTITY = 'INCREMENT_CART_ITEM_QUANTITY';
 4 | export const DECREMENT_CART_ITEM_QUANTITY = 'DECREMENT_CART_ITEM_QUANTITY';
 5 | 
 6 | export const ADD_BRAND_TO_FILTER = 'ADD_BRAND_TO_FILTER';
 7 | export const REMOVE_BRAND_FROM_FILTER = 'REMOVE_BRAND_FROM_FILTER';
 8 | export const CLEAR_BRAND_FILTER = 'CLEAR_BRAND_FILTER';
 9 | 
10 | export const ORDER_BY_ASC = 'ORDER_BY_ASC';
11 | export const ORDER_BY_DESC = 'ORDER_BY_DESC';
12 | export const CLEAR_ORDER_BY_PRICE = 'CLEAR_ORDER_BY_PRICE';
13 | 
14 | export const PREV_PAGE = 'PREV_PAGE';
15 | export const NEXT_PAGE = 'NEXT_PAGE';
16 | export const GO_PAGE = 'GO_PAGE';
17 | export const COUNT_ITEM = 'COUNT_ITEM';
18 | 


--------------------------------------------------------------------------------
/src/utilities/cumulativeOffset.js:
--------------------------------------------------------------------------------
 1 | export const cumulativeOffset = (element) => {
 2 |     let top = 0;
 3 |     let left = 0;
 4 | 
 5 |     do {
 6 |         top += element.offsetTop || 0;
 7 |         left += element.offsetLeft || 0;
 8 |         element = element.offsetParent;
 9 | 
10 |     } while (element);
11 | 
12 | 
13 |     return {
14 |         top,
15 |         left
16 |     };
17 | };
18 | 


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