diff --git a/dist/public/css/style.css b/dist/public/css/style.css index 910aa28..cb6712d 100644 --- a/dist/public/css/style.css +++ b/dist/public/css/style.css @@ -133,6 +133,7 @@ hr { left: 0; bottom: 0; z-index: 999; + overflow-y: auto; } .cart-content, diff --git a/dist/public/js/bundle.js b/dist/public/js/bundle.js index 865cf44..cf92004 100644 --- a/dist/public/js/bundle.js +++ b/dist/public/js/bundle.js @@ -3978,7 +3978,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) * /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Modal\", function() { return Modal; });\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nvar Modal =\n/*#__PURE__*/\nfunction () {\n function Modal(id, open, close) {\n _classCallCheck(this, Modal);\n\n this.$el = document.getElementById(id);\n this.open = document.getElementById(open);\n this.close = document.getElementById(close);\n this.init();\n }\n\n _createClass(Modal, [{\n key: \"onShow\",\n value: function onShow() {}\n }, {\n key: \"init\",\n value: function init() {\n this.open.addEventListener('click', openHandler.bind(this));\n this.close.addEventListener('click', closeHandler.bind(this));\n }\n }, {\n key: \"show\",\n value: function show() {\n this.$el.classList.remove('hide');\n document.body.style.overflowY = 'hidden';\n }\n }, {\n key: \"hide\",\n value: function hide() {\n this.$el.classList.add('hide');\n document.body.style.overflowY = '';\n }\n }]);\n\n return Modal;\n}();\n\nfunction openHandler() {\n this.show();\n}\n\nfunction closeHandler() {\n this.hide();\n}\n\n//# sourceURL=webpack:///./src/js/core/modal.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Modal\", function() { return Modal; });\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nvar Modal =\n/*#__PURE__*/\nfunction () {\n function Modal(id, open, close) {\n _classCallCheck(this, Modal);\n\n this.$el = document.getElementById(id);\n this.open = document.getElementById(open);\n this.close = document.getElementById(close);\n this.init();\n }\n\n _createClass(Modal, [{\n key: \"onShow\",\n value: function onShow() {}\n }, {\n key: \"init\",\n value: function init() {\n this.open.addEventListener('click', openHandler.bind(this));\n this.close.addEventListener('click', closeHandler.bind(this));\n }\n }, {\n key: \"show\",\n value: function show() {\n this.$el.classList.remove('hide');\n document.body.style.overflowY = 'hidden';\n }\n }, {\n key: \"hide\",\n value: function hide() {\n this.$el.classList.add('hide');\n document.body.style.overflowY = '';\n }\n }]);\n\n return Modal;\n}();\n\nfunction openHandler(e) {\n this.show();\n this.onShow(e);\n}\n\nfunction closeHandler() {\n this.hide();\n}\n\n//# sourceURL=webpack:///./src/js/core/modal.js?"); /***/ }), @@ -3990,7 +3990,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) * /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _components_header_component_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components/header.component.js */ \"./src/js/components/header.component.js\");\n/* harmony import */ var _components_information_component_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/information.component.js */ \"./src/js/components/information.component.js\");\n/* harmony import */ var _components_loader_component_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/loader.component.js */ \"./src/js/components/loader.component.js\");\n/* harmony import */ var _components_items_component_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/items.component.js */ \"./src/js/components/items.component.js\");\n/* harmony import */ var _components_category_component_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/category.component.js */ \"./src/js/components/category.component.js\");\n/* harmony import */ var _components_breadcrumb_component_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/breadcrumb.component.js */ \"./src/js/components/breadcrumb.component.js\");\n/* harmony import */ var _components_filter_component_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/filter.component.js */ \"./src/js/components/filter.component.js\");\n/* harmony import */ var _modals_cart_modal_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./modals/cart.modal.js */ \"./src/js/modals/cart.modal.js\");\n\n\n\n\n\n\n\n\nvar header = new _components_header_component_js__WEBPACK_IMPORTED_MODULE_0__[\"HeaderComponent\"]('header');\nvar loader = new _components_loader_component_js__WEBPACK_IMPORTED_MODULE_2__[\"LoaderComponent\"]('loader');\nvar information = new _components_information_component_js__WEBPACK_IMPORTED_MODULE_1__[\"InformationComponent\"]('information');\nvar items = new _components_items_component_js__WEBPACK_IMPORTED_MODULE_3__[\"ItemsComponent\"]('items', {\n loader: loader\n});\nvar filter = new _components_filter_component_js__WEBPACK_IMPORTED_MODULE_6__[\"FilterComponent\"]('filter', {\n items: items\n});\nvar category = new _components_category_component_js__WEBPACK_IMPORTED_MODULE_4__[\"CategoryComponent\"]('category', {\n items: items\n}, {\n filter: filter\n});\nvar breadcumb = new _components_breadcrumb_component_js__WEBPACK_IMPORTED_MODULE_5__[\"BreadcrumbComponent\"]('breadcrumb');\nvar cart = new _modals_cart_modal_js__WEBPACK_IMPORTED_MODULE_7__[\"CartModal\"]('cart', 'cartOpen', 'cartClose', {\n items: items\n});\n\n//# sourceURL=webpack:///./src/js/index.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _components_header_component_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components/header.component.js */ \"./src/js/components/header.component.js\");\n/* harmony import */ var _components_information_component_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/information.component.js */ \"./src/js/components/information.component.js\");\n/* harmony import */ var _components_loader_component_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/loader.component.js */ \"./src/js/components/loader.component.js\");\n/* harmony import */ var _components_items_component_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/items.component.js */ \"./src/js/components/items.component.js\");\n/* harmony import */ var _components_category_component_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/category.component.js */ \"./src/js/components/category.component.js\");\n/* harmony import */ var _components_breadcrumb_component_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/breadcrumb.component.js */ \"./src/js/components/breadcrumb.component.js\");\n/* harmony import */ var _components_filter_component_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/filter.component.js */ \"./src/js/components/filter.component.js\");\n/* harmony import */ var _modals_cart_modal_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./modals/cart.modal.js */ \"./src/js/modals/cart.modal.js\");\n/* harmony import */ var _modals_pay_modal_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./modals/pay.modal.js */ \"./src/js/modals/pay.modal.js\");\n\n\n\n\n\n\n\n\n\nvar header = new _components_header_component_js__WEBPACK_IMPORTED_MODULE_0__[\"HeaderComponent\"]('header');\nvar loader = new _components_loader_component_js__WEBPACK_IMPORTED_MODULE_2__[\"LoaderComponent\"]('loader');\nvar information = new _components_information_component_js__WEBPACK_IMPORTED_MODULE_1__[\"InformationComponent\"]('information');\nvar items = new _components_items_component_js__WEBPACK_IMPORTED_MODULE_3__[\"ItemsComponent\"]('items', {\n loader: loader\n});\nvar filter = new _components_filter_component_js__WEBPACK_IMPORTED_MODULE_6__[\"FilterComponent\"]('filter', {\n items: items\n});\nvar category = new _components_category_component_js__WEBPACK_IMPORTED_MODULE_4__[\"CategoryComponent\"]('category', {\n items: items\n}, {\n filter: filter\n});\nvar breadcumb = new _components_breadcrumb_component_js__WEBPACK_IMPORTED_MODULE_5__[\"BreadcrumbComponent\"]('breadcrumb');\nvar cart = new _modals_cart_modal_js__WEBPACK_IMPORTED_MODULE_7__[\"CartModal\"]('cart', 'cartOpen', 'cartClose', {\n items: items\n});\nvar pay = new _modals_pay_modal_js__WEBPACK_IMPORTED_MODULE_8__[\"PayModal\"]('pay', 'pay-js', 'payClose');\n\n//# sourceURL=webpack:///./src/js/index.js?"); /***/ }), @@ -4002,7 +4002,19 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _com /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"CartModal\", function() { return CartModal; });\n/* harmony import */ var _core_modal__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/modal */ \"./src/js/core/modal.js\");\n/* harmony import */ var _other_counter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../other/counter */ \"./src/js/other/counter.js\");\n/* harmony import */ var _other_defaultColorBtn__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../other/defaultColorBtn */ \"./src/js/other/defaultColorBtn.js\");\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\n\n\n\nvar CartModal =\n/*#__PURE__*/\nfunction (_Modal) {\n _inherits(CartModal, _Modal);\n\n function CartModal(id, open, close, _ref) {\n var _this;\n\n var items = _ref.items;\n\n _classCallCheck(this, CartModal);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(CartModal).call(this, id, open, close));\n _this.items = items;\n\n _this.open.addEventListener('click', _this.openHandler.bind(_assertThisInitialized(_this)));\n\n _this.close.addEventListener('click', _this.closeHandler.bind(_assertThisInitialized(_this)));\n\n _this.list = _this.$el.querySelector('#modalList');\n return _this;\n }\n\n _createClass(CartModal, [{\n key: \"closeHandler\",\n value: function closeHandler() {\n this.removeItem = null;\n this.makePay = null;\n }\n }, {\n key: \"openHandler\",\n value: function openHandler() {\n this.removeItem != null ? this.list.addEventListener('click', this.removeItem.bind(this)) : false;\n this.makePay != null ? this.$el.querySelector('#purchaseInfo').addEventListener('submit', this.makePay.bind(this)) : false;\n this.list.innerHTML = '';\n this.insertItems(this.list);\n }\n }, {\n key: \"insertItems\",\n value: function insertItems(list) {\n var _this2 = this;\n\n if (localStorage.getItem('cart')) {\n var items = JSON.parse(localStorage.getItem('cart'));\n\n if (items.length == 0) {\n list.innerHTML = '

Вы не добавили ни один товар

';\n this.$el.querySelector('#purchaseInfo').classList.add('hide');\n } else {\n this.$el.querySelector('#purchaseInfo').classList.remove('hide');\n }\n\n items.forEach(function (item) {\n return _this2.list.innerHTML += \"
\").concat(item.title, \"
\\u0412 \\u043D\\u0430\\u043B\\u0438\\u0447\\u0438\\u0438: \").concat(item.count, \" (\\u0448\\u0442)
\").concat(parseFloat(item.price).toFixed(2), \"\\u20BD
close
\");\n });\n Object(_other_counter__WEBPACK_IMPORTED_MODULE_1__[\"insertCount\"])('modalCounter', this.items.cart);\n Object(_other_counter__WEBPACK_IMPORTED_MODULE_1__[\"insertCount\"])('counter', this.items.cart);\n this.insertTotalPrice('totalPrice', this.items.cart);\n } else {\n list.innerHTML = '

Вы не добавили ни один товар

';\n }\n }\n }, {\n key: \"removeItem\",\n value: function removeItem(e) {\n if (e.target.id === 'removeItem') {\n var id = e.target.dataset.id;\n var index;\n this.items.cart.forEach(function (item, i) {\n return item.id === id ? index = i : false;\n });\n this.items.cart.splice(index, 1);\n localStorage.setItem('cart', JSON.stringify(this.items.cart));\n this.list.innerHTML = '';\n this.insertItems(this.list);\n Object(_other_defaultColorBtn__WEBPACK_IMPORTED_MODULE_2__[\"defaultBtnColor\"])(id, this.items.$el);\n }\n }\n }, {\n key: \"insertTotalPrice\",\n value: function insertTotalPrice(id, array) {\n var totalPrice = 0;\n array.forEach(function (item) {\n return totalPrice += parseFloat(item.price);\n });\n this.$el.querySelector(\"#\".concat(id)).innerHTML = \"\".concat(totalPrice.toFixed(2), \"\\u20BD\");\n }\n }, {\n key: \"makePay\",\n value: function makePay(e) {\n e.preventDefault();\n var payInfo = {\n items: this.items.cart.map(function (item) {\n return {\n id: item.id,\n title: item.title,\n price: parseFloat(item.price)\n };\n })\n };\n var totalPrice = 0;\n payInfo.items.forEach(function (item) {\n return totalPrice += parseFloat(item.price);\n });\n payInfo.totalPrice = Math.round(totalPrice * 100) / 100;\n payInfo.payMethod = this.$el.querySelector('.payment-field select').value;\n payInfo.phone = this.$el.querySelector('.phone-field input').value;\n payInfo.email = this.$el.querySelector('.email-field input').value;\n console.log('Pay info:', payInfo);\n }\n }]);\n\n return CartModal;\n}(_core_modal__WEBPACK_IMPORTED_MODULE_0__[\"Modal\"]);\n\n//# sourceURL=webpack:///./src/js/modals/cart.modal.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"CartModal\", function() { return CartModal; });\n/* harmony import */ var _core_modal__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/modal */ \"./src/js/core/modal.js\");\n/* harmony import */ var _other_counter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../other/counter */ \"./src/js/other/counter.js\");\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\n\n\nvar CartModal =\n/*#__PURE__*/\nfunction (_Modal) {\n _inherits(CartModal, _Modal);\n\n function CartModal(id, open, close, _ref) {\n var _this;\n\n var items = _ref.items;\n\n _classCallCheck(this, CartModal);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(CartModal).call(this, id, open, close));\n _this.items = items;\n\n _this.open.addEventListener('click', _this.openHandler.bind(_assertThisInitialized(_this)));\n\n _this.close.addEventListener('click', _this.closeHandler.bind(_assertThisInitialized(_this)));\n\n _this.list = _this.$el.querySelector('#modalList');\n return _this;\n }\n\n _createClass(CartModal, [{\n key: \"closeHandler\",\n value: function closeHandler() {\n this.removeItem = null;\n this.makePay = null;\n }\n }, {\n key: \"openHandler\",\n value: function openHandler() {\n this.removeItem != null ? this.list.addEventListener('click', this.removeItem.bind(this)) : false;\n this.makePay != null ? this.$el.querySelector('#purchaseInfo').addEventListener('submit', this.makePay.bind(this)) : false;\n this.list.innerHTML = '';\n this.insertItems(this.list);\n }\n }, {\n key: \"insertItems\",\n value: function insertItems(list) {\n var _this2 = this;\n\n if (localStorage.getItem('cart')) {\n var items = JSON.parse(localStorage.getItem('cart'));\n\n if (items.length == 0) {\n list.innerHTML = '

Вы не добавили ни один товар

';\n this.$el.querySelector('#purchaseInfo').classList.add('hide');\n } else {\n this.$el.querySelector('#purchaseInfo').classList.remove('hide');\n }\n\n items.forEach(function (item) {\n return _this2.list.innerHTML += \"
\").concat(item.title, \"
\\u0412 \\u043D\\u0430\\u043B\\u0438\\u0447\\u0438\\u0438: \").concat(item.count, \" (\\u0448\\u0442)
\").concat(parseFloat(item.price).toFixed(2), \"\\u20BD
close
\");\n });\n Object(_other_counter__WEBPACK_IMPORTED_MODULE_1__[\"insertCount\"])('modalCounter', this.items.cart);\n Object(_other_counter__WEBPACK_IMPORTED_MODULE_1__[\"insertCount\"])('counter', this.items.cart);\n this.insertTotalPrice('totalPrice', this.items.cart);\n } else {\n list.innerHTML = '

Вы не добавили ни один товар

';\n }\n }\n }, {\n key: \"removeItem\",\n value: function removeItem(e) {\n if (e.target.id === 'removeItem') {\n var id = e.target.dataset.id;\n var index;\n this.items.cart.forEach(function (item, i) {\n return item.id === id ? index = i : false;\n });\n this.items.cart.splice(index, 1);\n localStorage.setItem('cart', JSON.stringify(this.items.cart));\n this.list.innerHTML = '';\n this.insertItems(this.list);\n this.defaultBtnColor(id);\n }\n }\n }, {\n key: \"insertTotalPrice\",\n value: function insertTotalPrice(id, array) {\n var totalPrice = 0;\n array.forEach(function (item) {\n return totalPrice += parseFloat(item.price);\n });\n this.$el.querySelector(\"#\".concat(id)).innerHTML = \"\".concat(totalPrice.toFixed(2), \"\\u20BD\");\n }\n }, {\n key: \"makePay\",\n value: function makePay(e) {\n e.preventDefault();\n var payInfo = {\n items: this.items.cart.map(function (item) {\n return {\n id: item.id,\n title: item.title,\n price: parseFloat(item.price)\n };\n })\n };\n var totalPrice = 0;\n payInfo.items.forEach(function (item) {\n return totalPrice += parseFloat(item.price);\n });\n payInfo.totalPrice = Math.round(totalPrice * 100) / 100;\n payInfo.payMethod = this.$el.querySelector('.payment-field #payment').value;\n payInfo.phone = this.$el.querySelector('.phone-field #phone').value;\n payInfo.email = this.$el.querySelector('.email-field #email').value;\n console.log('Pay info:', payInfo);\n }\n }, {\n key: \"defaultBtnColor\",\n value: function defaultBtnColor(id) {\n if (this.items.roster.querySelector(\"#addItem[data-id=\\\"\".concat(id, \"\\\"]\"))) {\n this.items.roster.querySelector(\"#addItem[data-id=\\\"\".concat(id, \"\\\"]\")).classList.remove('orange');\n this.items.roster.querySelector(\"#addItem[data-id=\\\"\".concat(id, \"\\\"] i\")).innerHTML = 'shopping_cart';\n }\n }\n }]);\n\n return CartModal;\n}(_core_modal__WEBPACK_IMPORTED_MODULE_0__[\"Modal\"]);\n\n//# sourceURL=webpack:///./src/js/modals/cart.modal.js?"); + +/***/ }), + +/***/ "./src/js/modals/pay.modal.js": +/*!************************************!*\ + !*** ./src/js/modals/pay.modal.js ***! + \************************************/ +/*! exports provided: PayModal */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"PayModal\", function() { return PayModal; });\n/* harmony import */ var _core_modal__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/modal */ \"./src/js/core/modal.js\");\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\n\nvar PayModal =\n/*#__PURE__*/\nfunction (_Modal) {\n _inherits(PayModal, _Modal);\n\n function PayModal(id, open, close) {\n var _this;\n\n _classCallCheck(this, PayModal);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(PayModal).call(this, id, open, close));\n\n _this.open.addEventListener('click', _this.openHandler.bind(_assertThisInitialized(_this)));\n\n _this.close.addEventListener('click', _this.closeHandler.bind(_assertThisInitialized(_this)));\n\n return _this;\n }\n\n _createClass(PayModal, [{\n key: \"closeHandler\",\n value: function closeHandler() {\n this.$el.querySelector('#purchaseInfo').onsubmit = null;\n }\n }, {\n key: \"openHandler\",\n value: function openHandler(e) {\n var _this2 = this;\n\n if (e.target.id === 'payOpen') {\n var targetInfo = e.target.dataset;\n this.$el.querySelector('.title-field #title').value = targetInfo.title;\n this.show();\n\n this.$el.querySelector('#purchaseInfo').onsubmit = function (e) {\n _this2.makePay(e, targetInfo);\n };\n } else {\n this.hide();\n }\n }\n }, {\n key: \"makePay\",\n value: function makePay(e, info) {\n e.preventDefault();\n var payInfo = {\n item: [{\n id: info.id,\n title: info.title\n }],\n totalPrice: parseFloat(info.price)\n };\n payInfo.payMethod = this.$el.querySelector('.payment-field #payment').value;\n payInfo.phone = this.$el.querySelector('.phone-field #phone').value;\n payInfo.email = this.$el.querySelector('.email-field #email').value;\n console.log('Pay info: ', payInfo);\n }\n }]);\n\n return PayModal;\n}(_core_modal__WEBPACK_IMPORTED_MODULE_0__[\"Modal\"]);\n\n//# sourceURL=webpack:///./src/js/modals/pay.modal.js?"); /***/ }), @@ -4018,18 +4030,6 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) * /***/ }), -/***/ "./src/js/other/defaultColorBtn.js": -/*!*****************************************!*\ - !*** ./src/js/other/defaultColorBtn.js ***! - \*****************************************/ -/*! exports provided: defaultBtnColor */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { - -"use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"defaultBtnColor\", function() { return defaultBtnColor; });\nfunction defaultBtnColor(id, context) {\n if (context.querySelector(\"#roster #addItem[data-id=\\\"\".concat(id, \"\\\"]\"))) {\n context.querySelector(\"#roster #addItem[data-id=\\\"\".concat(id, \"\\\"]\")).classList.remove('orange');\n context.querySelector(\"#roster #addItem[data-id=\\\"\".concat(id, \"\\\"] i\")).innerHTML = 'shopping_cart';\n }\n}\n\n//# sourceURL=webpack:///./src/js/other/defaultColorBtn.js?"); - -/***/ }), - /***/ "./src/js/services/api.service.js": /*!****************************************!*\ !*** ./src/js/services/api.service.js ***! @@ -4050,7 +4050,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) * /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"renderItems\", function() { return renderItems; });\nfunction renderItems(categories, items) {\n var html = '';\n categories.forEach(function (category) {\n html += \"
\\n

\".concat(category, \"

\\n
\");\n items[category].forEach(function (item) {\n if (item && item._id != undefined) {\n html += \"\\n
\\n
\\n
\\n \\\"#\\\"\\n
\\n
\\n \").concat(item.title, \"\\n
\\n
\\n
\\n
\\n \").concat(item.date, \"\\n
\\n
\\n \").concat(item.count, \" \\u0448\\u0442.\\n
\\n
\\n \\u0426\\u0435\\u043D\\u0430 \\u0437\\u0430 1 \\u0448\\u0442.\\n
\\n
\\n \").concat(item.price.toFixed(2), \"\\u20BD\\n
\\n
\\n \\n \\n
\\n
\\n
\\n \");\n } else {\n html += \"\\n
\\n
\\n
\\n \\u0412 \\u044D\\u0442\\u043E\\u0439 \\u043A\\u0430\\u0442\\u0435\\u0433\\u043E\\u0440\\u0438\\u0438 \\u043F\\u043E\\u043A\\u0430 \\u0447\\u0442\\u043E \\u043D\\u0435\\u0442\\u0443 \\u0442\\u043E\\u0432\\u0430\\u0440\\u043E\\u0432\\n
\\n
\\n
\\n \";\n }\n });\n });\n return html;\n}\n\n//# sourceURL=webpack:///./src/js/templates/items.template.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"renderItems\", function() { return renderItems; });\nfunction renderItems(categories, items) {\n var html = '';\n categories.forEach(function (category) {\n html += \"
\\n

\".concat(category, \"

\\n
\");\n items[category].forEach(function (item) {\n if (item && item._id != undefined) {\n html += \"\\n
\\n
\\n
\\n \\\"#\\\"\\n
\\n
\\n \").concat(item.title, \"\\n
\\n
\\n
\\n
\\n \").concat(item.date, \"\\n
\\n
\\n \").concat(item.count, \" \\u0448\\u0442.\\n
\\n
\\n \\u0426\\u0435\\u043D\\u0430 \\u0437\\u0430 1 \\u0448\\u0442.\\n
\\n
\\n \").concat(item.price.toFixed(2), \"\\u20BD\\n
\\n
\\n \\n \\n
\\n
\\n
\\n \");\n } else {\n html += \"\\n
\\n
\\n
\\n \\u0412 \\u044D\\u0442\\u043E\\u0439 \\u043A\\u0430\\u0442\\u0435\\u0433\\u043E\\u0440\\u0438\\u0438 \\u043F\\u043E\\u043A\\u0430 \\u0447\\u0442\\u043E \\u043D\\u0435\\u0442\\u0443 \\u0442\\u043E\\u0432\\u0430\\u0440\\u043E\\u0432\\n
\\n
\\n
\\n \";\n }\n });\n });\n return html;\n}\n\n//# sourceURL=webpack:///./src/js/templates/items.template.js?"); /***/ }), @@ -4062,7 +4062,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) * /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"renderItemsOne\", function() { return renderItemsOne; });\nfunction renderItemsOne(category, items) {\n var html = '';\n html += \"
\\n

\".concat(category, \"

\\n
\");\n items.forEach(function (item) {\n if (item && item._id != undefined) {\n html += \"\\n
\\n
\\n
\\n \\\"#\\\"\\n
\\n
\\n \").concat(item.title, \"\\n
\\n
\\n
\\n
\\n \").concat(item.date, \"\\n
\\n
\\n \").concat(item.count, \" \\u0448\\u0442.\\n
\\n
\\n \\u0426\\u0435\\u043D\\u0430 \\u0437\\u0430 1 \\u0448\\u0442.\\n
\\n
\\n \").concat(item.price.toFixed(2), \"\\u20BD\\n
\\n
\\n \\n \\n
\\n
\\n
\\n \");\n } else {\n html += \"\\n
\\n
\\n
\\n \\u0412 \\u044D\\u0442\\u043E\\u0439 \\u043A\\u0430\\u0442\\u0435\\u0433\\u043E\\u0440\\u0438\\u0438 \\u043F\\u043E\\u043A\\u0430 \\u0447\\u0442\\u043E \\u043D\\u0435\\u0442\\u0443 \\u0442\\u043E\\u0432\\u0430\\u0440\\u043E\\u0432\\n
\\n
\\n
\";\n }\n });\n return html;\n}\n\n//# sourceURL=webpack:///./src/js/templates/itemsOne.template.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"renderItemsOne\", function() { return renderItemsOne; });\nfunction renderItemsOne(category, items) {\n var html = '';\n html += \"
\\n

\".concat(category, \"

\\n
\");\n items.forEach(function (item) {\n if (item && item._id != undefined) {\n html += \"\\n
\\n
\\n
\\n \\\"#\\\"\\n
\\n
\\n \").concat(item.title, \"\\n
\\n
\\n
\\n
\\n \").concat(item.date, \"\\n
\\n
\\n \").concat(item.count, \" \\u0448\\u0442.\\n
\\n
\\n \\u0426\\u0435\\u043D\\u0430 \\u0437\\u0430 1 \\u0448\\u0442.\\n
\\n
\\n \").concat(item.price.toFixed(2), \"\\u20BD\\n
\\n
\\n \\n \\n
\\n
\\n
\\n \");\n } else {\n html += \"\\n
\\n
\\n
\\n \\u0412 \\u044D\\u0442\\u043E\\u0439 \\u043A\\u0430\\u0442\\u0435\\u0433\\u043E\\u0440\\u0438\\u0438 \\u043F\\u043E\\u043A\\u0430 \\u0447\\u0442\\u043E \\u043D\\u0435\\u0442\\u0443 \\u0442\\u043E\\u0432\\u0430\\u0440\\u043E\\u0432\\n
\\n
\\n
\";\n }\n });\n return html;\n}\n\n//# sourceURL=webpack:///./src/js/templates/itemsOne.template.js?"); /***/ }), diff --git a/dist/views/assets/templates/modals/pay.pug b/dist/views/assets/templates/modals/pay.pug index e6b5290..4f5843b 100644 --- a/dist/views/assets/templates/modals/pay.pug +++ b/dist/views/assets/templates/modals/pay.pug @@ -9,12 +9,11 @@ h4.small-title Оплатить товар span#payClose.cart-close i.material-icons close - form(action='#') + form#purchaseInfo(action='#') .modal-content__fields .title-field label(for='title') Наименование - select#title(name='title') - option(value='js_title') Cs:go(prime) + открыта тп + инв. 901руб + input#title(name='title' readonly) .email-field label(for='email') Ваш E-mail input#email(required='' type='text' name='email') diff --git a/dist/views/index.pug b/dist/views/index.pug index 668570f..b24763d 100644 --- a/dist/views/index.pug +++ b/dist/views/index.pug @@ -95,7 +95,7 @@ main.main-section // Items Block .col.s12 #items.items - .items-content.block-content + #pay-js.items-content.block-content .items-title.block-title i.material-icons list h2.small-title Список товаров: diff --git a/dist/views/product.pug b/dist/views/product.pug index e49e597..ede7338 100644 --- a/dist/views/product.pug +++ b/dist/views/product.pug @@ -26,9 +26,9 @@ main.main-section small(style="font-size: 12px") Дата добавления: #{date} .product-info .product-info__left - .product-left__pay + #pay-js.product-left__pay img(src='../img/service-icons/'+image alt='#') - button.waves-effect.waves-light.btn Купить + button#payOpen.waves-effect.waves-light.btn(data-id=id data-title=title data-date=date data-count=count data-price=price) Купить .product-info__cost .product-info__count span #{count} шт diff --git a/src/js/core/modal.js b/src/js/core/modal.js index de84051..6cb8f93 100644 --- a/src/js/core/modal.js +++ b/src/js/core/modal.js @@ -24,8 +24,9 @@ export class Modal { } } -function openHandler() { +function openHandler(e) { this.show(); + this.onShow(e); } function closeHandler() { diff --git a/src/js/index.js b/src/js/index.js index afd0124..fde528f 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -6,6 +6,7 @@ import { CategoryComponent } from "./components/category.component.js"; import { BreadcrumbComponent } from "./components/breadcrumb.component.js"; import { FilterComponent } from "./components/filter.component.js"; import { CartModal } from "./modals/cart.modal.js"; +import { PayModal } from "./modals/pay.modal.js"; const header = new HeaderComponent('header'); @@ -16,4 +17,4 @@ const filter = new FilterComponent('filter', {items}); const category = new CategoryComponent('category', {items}, {filter}); const breadcumb = new BreadcrumbComponent('breadcrumb'); const cart = new CartModal('cart', 'cartOpen', 'cartClose', {items}); - +const pay = new PayModal('pay', 'pay-js', 'payClose'); diff --git a/src/js/modals/cart.modal.js b/src/js/modals/cart.modal.js index 198a68f..dfdefe7 100644 --- a/src/js/modals/cart.modal.js +++ b/src/js/modals/cart.modal.js @@ -1,6 +1,5 @@ import { Modal } from "../core/modal"; import { insertCount } from "../other/counter"; -import { defaultBtnColor } from "../other/defaultColorBtn"; export class CartModal extends Modal { constructor(id, open, close, {items}) { @@ -54,7 +53,7 @@ export class CartModal extends Modal { this.list.innerHTML = ''; this.insertItems(this.list); - defaultBtnColor(id, this.items.$el); + this.defaultBtnColor(id); } } @@ -76,10 +75,17 @@ export class CartModal extends Modal { let totalPrice = 0; payInfo.items.forEach(item => totalPrice += parseFloat(item.price)); payInfo.totalPrice = Math.round(totalPrice * 100) / 100; - payInfo.payMethod = this.$el.querySelector('.payment-field select').value; - payInfo.phone = this.$el.querySelector('.phone-field input').value; - payInfo.email = this.$el.querySelector('.email-field input').value; + payInfo.payMethod = this.$el.querySelector('.payment-field #payment').value; + payInfo.phone = this.$el.querySelector('.phone-field #phone').value; + payInfo.email = this.$el.querySelector('.email-field #email').value; console.log('Pay info:', payInfo); } + + defaultBtnColor(id) { + if (this.items.roster.querySelector(`#addItem[data-id="${id}"]`)) { + this.items.roster.querySelector(`#addItem[data-id="${id}"]`).classList.remove('orange'); + this.items.roster.querySelector(`#addItem[data-id="${id}"] i`).innerHTML = 'shopping_cart'; + } + } } diff --git a/src/js/modals/pay.modal.js b/src/js/modals/pay.modal.js new file mode 100644 index 0000000..0ee0a92 --- /dev/null +++ b/src/js/modals/pay.modal.js @@ -0,0 +1,45 @@ +import { Modal } from "../core/modal"; + +export class PayModal extends Modal { + constructor (id, open, close) { + super(id, open, close); + this.open.addEventListener('click', this.openHandler.bind(this)); + this.close.addEventListener('click', this.closeHandler.bind(this)); + } + + closeHandler() { + this.$el.querySelector('#purchaseInfo').onsubmit = null; + } + + openHandler(e) { + if (e.target.id === 'payOpen') { + const targetInfo = e.target.dataset; + this.$el.querySelector('.title-field #title').value = targetInfo.title; + + this.show(); + this.$el.querySelector('#purchaseInfo').onsubmit = (e) => { + this.makePay(e, targetInfo); + } + } else { + this.hide(); + } + } + + makePay(e, info) { + e.preventDefault(); + + const payInfo = { + item: [{ + id: info.id, + title: info.title + }], + totalPrice: parseFloat(info.price) + } + payInfo.payMethod = this.$el.querySelector('.payment-field #payment').value; + payInfo.phone = this.$el.querySelector('.phone-field #phone').value; + payInfo.email = this.$el.querySelector('.email-field #email').value; + + console.log('Pay info: ', payInfo); + } + +} \ No newline at end of file diff --git a/src/js/other/defaultColorBtn.js b/src/js/other/defaultColorBtn.js deleted file mode 100644 index 1ac6c6f..0000000 --- a/src/js/other/defaultColorBtn.js +++ /dev/null @@ -1,6 +0,0 @@ -export function defaultBtnColor(id, context) { - if (context.querySelector(`#roster #addItem[data-id="${id}"]`)) { - context.querySelector(`#roster #addItem[data-id="${id}"]`).classList.remove('orange'); - context.querySelector(`#roster #addItem[data-id="${id}"] i`).innerHTML = 'shopping_cart'; - } -} \ No newline at end of file diff --git a/src/js/templates/items.template.js b/src/js/templates/items.template.js index 80583ce..43605b1 100644 --- a/src/js/templates/items.template.js +++ b/src/js/templates/items.template.js @@ -32,7 +32,7 @@ export function renderItems(categories, items) { ${item.price.toFixed(2)}₽
- +
diff --git a/src/js/templates/itemsOne.template.js b/src/js/templates/itemsOne.template.js index 383e62b..2162686 100644 --- a/src/js/templates/itemsOne.template.js +++ b/src/js/templates/itemsOne.template.js @@ -31,7 +31,7 @@ export function renderItemsOne(category, items) { ${item.price.toFixed(2)}₽
- +