{"version":3,"sources":["webpack:///./src/views/ECommerce.vue?dec0","webpack:///./src/views/ECommerce.vue?51c2","webpack:///src/views/ECommerce.vue","webpack:///./src/views/ECommerce.vue?2711","webpack:///./src/views/ECommerce.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","_v","attrs","_l","product","key","id","staticClass","photo","_s","productName","formatMoney","price","on","$event","increase","carts","length","_m","cart","index","quantity","decrease","total","removeItem","Total","clearCart","staticRenderFns","findProduct","itemId","foundIndex","findIndex","prod","productData","cartData","data","products","methods","itemToAdd","push","splice","number","toLocaleString","style","currency","computed","map","li","reduce","sum","val","component"],"mappings":"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","file":"js/ecommerce.4360d174.js","sourcesContent":["export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ECommerce.vue?vue&type=style&index=0&id=3d133ab1&scoped=true&lang=css&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('h1',[_vm._v(\"ECommerce Mockup - Browse Products and Add Product to Cart\")]),_c('div',{attrs:{\"id\":\"app\"}},[_c('div',_vm._l((_vm.products),function(product){return _c('div',{key:product.id,staticClass:\"catalog\"},[_c('div',[_c('img',{attrs:{\"src\":product.photo,\"width\":\"200\"}})]),_c('h4',[_vm._v(_vm._s(product.productName))]),_c('h6',[_vm._v(_vm._s(_vm.formatMoney(product.price)))]),_c('h5',[_c('button',{staticClass:\"AddToCart\",on:{\"click\":function($event){return _vm.increase(product)}}},[_vm._v(\" Add To Cart \")])])])}),0),_c('div',{staticClass:\"text-right\"},[_c('button',{staticClass:\"btn btn-primary\",attrs:{\"data-toggle\":\"modal\",\"data-target\":\"#cartModal\"}},[_vm._v(\" Cart (\"+_vm._s(_vm.carts.length)+\") \")])]),(_vm.carts.length > 0)?_c('table',{staticClass:\"table\"},[_vm._m(0),_c('tbody',[_vm._l((_vm.carts),function(cart,index){return _c('tr',{key:cart.id},[_c('td',[_vm._v(_vm._s(cart.productName))]),_c('td',[_vm._v(_vm._s(_vm.formatMoney(cart.price)))]),_c('td',[_c('i',{staticClass:\"link fa fa-plus\",attrs:{\"aria-hidden\":\"true\"},on:{\"click\":function($event){return _vm.increase(cart)}}}),_vm._v(\" \"+_vm._s(cart.quantity)+\" \"),_c('i',{staticClass:\"link fa fa-minus\",attrs:{\"aria-hidden\":\"true\"},on:{\"click\":function($event){return _vm.decrease(cart)}}})]),_c('td',[_vm._v(_vm._s(_vm.formatMoney(cart.total)))]),_c('td',[_c('button',{on:{\"click\":function($event){return _vm.removeItem(index)}}},[_c('font-awesome-icon',{attrs:{\"icon\":\"spinner\"}})],1)])])}),_c('tr',[_c('td',[_vm._v(\" Total \")]),_c('td',[_vm._v(_vm._s(_vm.formatMoney(_vm.Total)))]),_c('td',{staticClass:\"clearCart\",attrs:{\"colspan\":\"3\"}},[_c('a',{on:{\"click\":_vm.clearCart}},[_vm._v(\"Clear cart\")])])])],2)]):_c('p',[_vm._v(\"No items in the cart.\")])])])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('thead',[_c('tr',[_c('td',[_vm._v(\"Product Name\")]),_c('td',[_vm._v(\"Price\")]),_c('td',[_vm._v(\"Quantity\")]),_c('td',[_vm._v(\"Total\")]),_c('td')])])}]\n\nexport { render, staticRenderFns }","<template>\r\n  <div>\r\n    <h1>ECommerce Mockup - Browse Products and Add Product to Cart</h1>\r\n    <div id=\"app\">\r\n      <div>\r\n        <div class=\"catalog\" v-for=\"product in products\" :key=\"product.id\">\r\n          <div>\r\n            <img :src=\"product.photo\" width=\"200\" />\r\n          </div>\r\n          <h4>{{ product.productName }}</h4>\r\n          <h6>{{ formatMoney(product.price) }}</h6>\r\n          <h5>\r\n            <button class=\"AddToCart\" @click=\"increase(product)\">\r\n              Add To Cart\r\n            </button>\r\n          </h5>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"text-right\">\r\n        <button\r\n          class=\"btn btn-primary\"\r\n          data-toggle=\"modal\"\r\n          data-target=\"#cartModal\"\r\n        >\r\n          Cart ({{ carts.length }})\r\n        </button>\r\n      </div>\r\n\r\n      <table class=\"table\" v-if=\"carts.length > 0\">\r\n        <thead>\r\n          <tr>\r\n            <td>Product Name</td>\r\n            <td>Price</td>\r\n            <td>Quantity</td>\r\n            <td>Total</td>\r\n            <td></td>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr v-for=\"(cart, index) in carts\" :key=\"cart.id\">\r\n            <td>{{ cart.productName }}</td>\r\n            <td>{{ formatMoney(cart.price) }}</td>\r\n            <td>\r\n              <i\r\n                class=\"link fa fa-plus\"\r\n                aria-hidden=\"true\"\r\n                @click=\"increase(cart)\"\r\n              ></i>\r\n              {{ cart.quantity }}\r\n              <i\r\n                class=\"link fa fa-minus\"\r\n                aria-hidden=\"true\"\r\n                @click=\"decrease(cart)\"\r\n              ></i>\r\n            </td>\r\n            <td>{{ formatMoney(cart.total) }}</td>\r\n            <td>\r\n              <button @click=\"removeItem(index)\">\r\n                <font-awesome-icon icon=\"spinner\" />\r\n              </button>\r\n            </td>\r\n          </tr>\r\n          <tr>\r\n            <td>\r\n              Total\r\n            </td>\r\n            <td>{{ formatMoney(Total) }}</td>\r\n            <td colspan=\"3\" class=\"clearCart\">\r\n              <a @click=\"clearCart\">Clear cart</a>\r\n            </td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <p v-else>No items in the cart.</p>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nfunction cart(product) {\r\n  this.id = product.id;\r\n  this.productName = product.productName;\r\n  this.price = product.price;\r\n  this.quantity = 1;\r\n  this.total = product.price;\r\n}\r\n\r\nconst findProduct = (carts, itemId) => {\r\n  const foundIndex = carts.findIndex(prod => prod.id == itemId);\r\n  return foundIndex;\r\n};\r\n\r\nconst productData = [\r\n  {\r\n    id: 1,\r\n    productName: \"iPhone\",\r\n    price: 4400,\r\n    photo: \"https://clipart.info/images/ccovers/1505918647iphone-x-png.png\"\r\n  },\r\n  {\r\n    id: 2,\r\n    productName: \"Samsung\",\r\n    price: 3000,\r\n    photo: \"https://clipart.info/images/ccovers/1505918647iphone-x-png.png\"\r\n  },\r\n  {\r\n    id: 3,\r\n    productName: \"Huawei\",\r\n    price: 3600,\r\n    photo: \"https://clipart.info/images/ccovers/1505918647iphone-x-png.png\"\r\n  }\r\n];\r\n\r\n// const cartData = [\r\n//   { id: 2, productName: \"Samsung\", price: 3000, quantity: 2, total: 0 },\r\n//   { id: 3, productName: \"iPhone\", price: 4500, quantity: 1, total: 0 }\r\n// ];\r\n\r\nconst cartData = [];\r\n\r\nexport default {\r\n  data: function() {\r\n    return {\r\n      products: productData,\r\n      carts: cartData\r\n    };\r\n  },\r\n  methods: {\r\n    increase(itemToAdd) {\r\n      const foundIndex = findProduct(this.carts, itemToAdd.id);\r\n\r\n      if (foundIndex === -1) {\r\n        this.carts.push(new cart(itemToAdd, 1));\r\n      } else {\r\n        this.carts[foundIndex].quantity++;\r\n\r\n        this.carts[foundIndex].total =\r\n          this.carts[foundIndex].quantity * this.carts[foundIndex].price;\r\n      }\r\n    },\r\n    decrease(itemToAdd) {\r\n      const foundIndex = findProduct(this.carts, itemToAdd.id);\r\n\r\n      if (foundIndex !== -1) {\r\n        if (this.carts[foundIndex].quantity > 1)\r\n          this.carts[foundIndex].quantity--;\r\n      }\r\n\r\n      this.carts[foundIndex].total =\r\n        this.carts[foundIndex].quantity * this.carts[foundIndex].price;\r\n    },\r\n    removeItem(index) {\r\n      this.carts.splice(index, 1);\r\n    },\r\n    clearCart() {\r\n      this.carts = [];\r\n    },\r\n    formatMoney(number) {\r\n      return number.toLocaleString(\"en-US\", {\r\n        style: \"currency\",\r\n        currency: \"MYR\"\r\n      });\r\n    }\r\n  },\r\n  computed: {\r\n    Total() {\r\n      //       let total = 0;\r\n\r\n      //       // can be replaced with 'reduce'\r\n      //       this.carts.forEach(item => {\r\n      //         total += (item.price * item.quantity);\r\n      //       });\r\n      //       return total;\r\n\r\n      return this.carts.map(li => li.total).reduce((sum, val) => sum + val, 0);\r\n    }\r\n  }\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n@import url(\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,700\");\r\n*,\r\n*::before,\r\n*::after {\r\n  box-sizing: border-box;\r\n}\r\nbody {\r\n  font-family: \"Open Sans\", sans-serif;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n  font-size: 16px;\r\n  padding: 3rem;\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\ndiv.catalog {\r\n  margin: 5px;\r\n  border: 1px solid silver;\r\n  display: inline-block;\r\n  padding: 10px;\r\n  text-align: center;\r\n}\r\ni.link {\r\n  cursor: pointer;\r\n}\r\ntd.clearCart {\r\n  color: red;\r\n  text-align: right;\r\n  cursor: pointer;\r\n}\r\nbutton.AddToCart {\r\n  padding: 0.35rem 0.7rem 0.28rem;\r\n  border: 0;\r\n  text-transform: uppercase;\r\n  font-size: 0.85em;\r\n  color: #fff;\r\n  background: rgba(0, 0, 0, 0.5);\r\n  box-shadow: 0 18px 10px -10px rgba(0, 0, 0, 0.25);\r\n  transition: background 0.4s, box-shadow 0.4s;\r\n  cursor: pointer;\r\n  outline: none;\r\n}\r\nbutton.AddToCart:hover,\r\nbutton.AddToCart:focus {\r\n  background: #000;\r\n  box-shadow: 0 18px 10px -10px rgba(0, 0, 0, 0);\r\n}\r\n</style>\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ECommerce.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ECommerce.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ECommerce.vue?vue&type=template&id=3d133ab1&scoped=true&\"\nimport script from \"./ECommerce.vue?vue&type=script&lang=js&\"\nexport * from \"./ECommerce.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ECommerce.vue?vue&type=style&index=0&id=3d133ab1&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"3d133ab1\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}