diff --git a/config/routes/routes.js b/config/routes/routes.js index ff04048..ec18a37 100644 --- a/config/routes/routes.js +++ b/config/routes/routes.js @@ -1,14 +1,15 @@ const MongoClient = require('mongodb').MongoClient; +const dbName = 'digital_store'; const routes = { // Index indexRoute: function (req, res) { - MongoClient.connect('mongodb://localhost:27017/digital_store', { + MongoClient.connect(`mongodb://localhost:27017/${dbName}`, { useNewUrlParser: true, useUnifiedTopology: true }, (err, db) => { if (err) throw err; - const dbo = db.db('digital_store'); + const dbo = db.db(dbName); dbo.collection('storeInfo').find().toArray((err, result) => { if (err) throw err; const array = Object.keys(result[0].items) @@ -62,13 +63,13 @@ const routes = { if (req.query.auth === queryOptions.auth) { if (req.query.option === queryOptions.option) { - MongoClient.connect('mongodb://localhost:27017/digital_store', { + MongoClient.connect(`mongodb://localhost:27017/${dbName}`, { useNewUrlParser: true, useUnifiedTopology: true }, (err, db) => { if (err) throw err; - const dbo = db.db('digital_store'); + const dbo = db.db(dbName); dbo.collection('storeInfo').find().toArray((err, result) => { if (err) throw err; res.send(result[0].items); @@ -76,13 +77,13 @@ const routes = { }) }); } else if (!req.query.option && req.query.category) { - MongoClient.connect('mongodb://localhost:27017/digital_store', { + MongoClient.connect(`mongodb://localhost:27017/${dbName}`, { useNewUrlParser: true, useUnifiedTopology: true }, (err, db) => { if (err) throw err; - const dbo = db.db('digital_store'); + const dbo = db.db(dbName); dbo.collection('storeInfo').find().toArray((err, result) => { if (err) throw err; const query = result[0].items[req.query.category] @@ -100,6 +101,45 @@ const routes = { } else { res.send('Неверный токен'); } + }, + + // OnePageItem + onePageItem: function (req, res) { + const query = { + id: req.params.id + } + MongoClient.connect(`mongodb://localhost:27017/${dbName}`, { + useNewUrlParser: true, + useUnifiedTopology: true + }, (err, db) => { + if (err) throw err; + + const dbo = db.db(dbName); + dbo.collection('storeInfo').find().toArray((err, result) => { + if (err) throw err; + const items = result[0].items; + const keys = Object.keys(result[0].items); + + keys.forEach(key => { + items[key].forEach(item => { + if (item._id != undefined) { + if (item._id == query.id) { + res.render('product', { + title: item.title, + image: item.image, + count: item.count, + category: item.category[0].toUpperCase() + item.category.slice(1), + price: item.price, + description: item.description + }); + } + } + }) + }) + db.close(); + }) + }); + } } @@ -109,5 +149,6 @@ module.exports = function (server) { server.get('/contacts', routes.contactsRoute); server.get('/comments', routes.commentsRoute); server.get('/my-orders', routes.myOrdersRoute); + server.get('/product/:id', routes.onePageItem); server.get('/store-api', routes.getItemsRoute); } \ No newline at end of file diff --git a/config/server.js b/config/server.js index 3c46e97..ef62426 100644 --- a/config/server.js +++ b/config/server.js @@ -4,6 +4,7 @@ const path = require('path'); // Pug config server.use(express.static(path.join(__dirname, '../dist/public'))); +// server.use('/css', express.static(__dirname + '../dist/public/css')); server.set('view engine', 'pug'); server.set('views', path.join(__dirname, '../dist/views')); diff --git a/dist/public/js/bundle.js b/dist/public/js/bundle.js index 03258ac..977635b 100644 --- a/dist/public/js/bundle.js +++ b/dist/public/js/bundle.js @@ -3894,7 +3894,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__, \"CategoryComponent\", function() { return CategoryComponent; });\n/* harmony import */ var _core_component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/component */ \"./src/js/core/component.js\");\n/* harmony import */ var _services_api_service__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../services/api.service */ \"./src/js/services/api.service.js\");\n/* harmony import */ var _templates_itemsOne_template__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../templates/itemsOne.template */ \"./src/js/templates/itemsOne.template.js\");\n/* harmony import */ var _templates_items_template__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../templates/items.template */ \"./src/js/templates/items.template.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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\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\n\nvar CategoryComponent =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(CategoryComponent, _Component);\n\n function CategoryComponent(id, _ref) {\n var _this;\n\n var items = _ref.items;\n\n _classCallCheck(this, CategoryComponent);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(CategoryComponent).call(this, id));\n _this.items = items;\n return _this;\n }\n\n _createClass(CategoryComponent, [{\n key: \"init\",\n value: function init() {\n if (this.$el) {\n this.$el.addEventListener('click', buttonHandler.bind(this));\n }\n }\n }]);\n\n return CategoryComponent;\n}(_core_component__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\nfunction buttonHandler(e) {\n var category, fData, html, _fData, categories, _html;\n\n return regeneratorRuntime.async(function buttonHandler$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n e.preventDefault();\n\n if (!(e.target.dataset.category && e.target.dataset.category != 'all')) {\n _context.next = 12;\n break;\n }\n\n this.items.onShow();\n category = e.target.dataset.category.toLowerCase();\n _context.next = 6;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getItemsOne(category));\n\n case 6:\n fData = _context.sent;\n html = Object(_templates_itemsOne_template__WEBPACK_IMPORTED_MODULE_2__[\"renderItemsOne\"])(category, fData);\n this.items.onHide();\n document.querySelector('#roster').insertAdjacentHTML('afterbegin', html);\n _context.next = 21;\n break;\n\n case 12:\n if (!(e.target.dataset.category === 'all')) {\n _context.next = 21;\n break;\n }\n\n this.items.onShow();\n _context.next = 16;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getItems());\n\n case 16:\n _fData = _context.sent;\n categories = Object.keys(_fData);\n _html = Object(_templates_items_template__WEBPACK_IMPORTED_MODULE_3__[\"renderItems\"])(categories, _fData);\n this.items.onHide();\n document.querySelector('#roster').insertAdjacentHTML('afterbegin', _html);\n\n case 21:\n case \"end\":\n return _context.stop();\n }\n }\n }, null, this);\n}\n\n//# sourceURL=webpack:///./src/js/components/category.component.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"CategoryComponent\", function() { return CategoryComponent; });\n/* harmony import */ var _core_component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/component */ \"./src/js/core/component.js\");\n/* harmony import */ var _services_api_service__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../services/api.service */ \"./src/js/services/api.service.js\");\n/* harmony import */ var _templates_itemsOne_template__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../templates/itemsOne.template */ \"./src/js/templates/itemsOne.template.js\");\n/* harmony import */ var _templates_items_template__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../templates/items.template */ \"./src/js/templates/items.template.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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\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\n\nvar CategoryComponent =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(CategoryComponent, _Component);\n\n function CategoryComponent(id, _ref) {\n var _this;\n\n var items = _ref.items;\n\n _classCallCheck(this, CategoryComponent);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(CategoryComponent).call(this, id));\n _this.items = items;\n return _this;\n }\n\n _createClass(CategoryComponent, [{\n key: \"init\",\n value: function init() {\n if (this.$el) {\n this.$el.addEventListener('click', buttonHandler.bind(this));\n }\n }\n }]);\n\n return CategoryComponent;\n}(_core_component__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\nfunction buttonHandler(e) {\n var category, fData, html, _fData, categories, _html;\n\n return regeneratorRuntime.async(function buttonHandler$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n e.preventDefault();\n\n if (!(e.target.dataset.category && e.target.dataset.category != 'all')) {\n _context.next = 13;\n break;\n }\n\n this.items.onShow();\n activeLink(e);\n category = e.target.dataset.category.toLowerCase();\n _context.next = 7;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getItemsOne(category));\n\n case 7:\n fData = _context.sent;\n html = Object(_templates_itemsOne_template__WEBPACK_IMPORTED_MODULE_2__[\"renderItemsOne\"])(category, fData);\n this.items.onHide();\n document.querySelector('#roster').insertAdjacentHTML('afterbegin', html);\n _context.next = 23;\n break;\n\n case 13:\n if (!(e.target.dataset.category === 'all')) {\n _context.next = 23;\n break;\n }\n\n this.items.onShow();\n activeLink(e);\n _context.next = 18;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getItems());\n\n case 18:\n _fData = _context.sent;\n categories = Object.keys(_fData);\n _html = Object(_templates_items_template__WEBPACK_IMPORTED_MODULE_3__[\"renderItems\"])(categories, _fData);\n this.items.onHide();\n document.querySelector('#roster').insertAdjacentHTML('afterbegin', _html);\n\n case 23:\n case \"end\":\n return _context.stop();\n }\n }\n }, null, this);\n}\n\nfunction activeLink(e) {\n e.target.parentNode.parentNode.querySelectorAll('li a').forEach(function (li) {\n return li.classList.remove('active');\n });\n e.target.classList.add('active');\n}\n\n//# sourceURL=webpack:///./src/js/components/category.component.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 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) {\n html += \"\\n
\\n
\\n
\\n \\\"#\\\"\\n
\\n
\\n \").concat(item.title, \"\\n
\\n
\\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, \"\\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) {\n html += \"\\n
\\n
\\n
\\n \\\"#\\\"\\n
\\n
\\n \").concat(item.title, \"\\n
\\n
\\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, \"\\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?"); /***/ }), @@ -4002,7 +4002,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) {\n html += \"\\n
\\n
\\n
\\n \\\"#\\\"\\n
\\n
\\n \").concat(item.title, \"\\n
\\n
\\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, \"\\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) {\n html += \"\\n
\\n
\\n
\\n \\\"#\\\"\\n
\\n
\\n \").concat(item.title, \"\\n
\\n
\\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, \"\\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/head.pug b/dist/views/assets/head.pug index e786a1f..7e67509 100644 --- a/dist/views/assets/head.pug +++ b/dist/views/assets/head.pug @@ -6,9 +6,9 @@ html(lang='ru') // Materialize CSS link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css") // Style CSS - link(rel="stylesheet", href="./css/style.css") + link(rel="stylesheet", href="../css/style.css") // Media CSS - link(rel="stylesheet", href="./css/media.css") + link(rel="stylesheet", href="../css/media.css") // Material Icons link(rel="stylesheet", href="https://fonts.googleapis.com/icon?family=Material+Icons") body \ No newline at end of file diff --git a/dist/views/assets/templates/footer.pug b/dist/views/assets/templates/footer.pug index d60d35b..0aa68f1 100644 --- a/dist/views/assets/templates/footer.pug +++ b/dist/views/assets/templates/footer.pug @@ -6,5 +6,5 @@ footer // Maretialize JS script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js') // Script JS -script(src='./js/bundle.js') -script(src='./js/materialize.config.js') +script(src='../js/bundle.js') +script(src='../js/materialize.config.js') diff --git a/dist/views/assets/templates/modals/pay.pug b/dist/views/assets/templates/modals/pay.pug index ad56041..e6b5290 100644 --- a/dist/views/assets/templates/modals/pay.pug +++ b/dist/views/assets/templates/modals/pay.pug @@ -24,7 +24,7 @@ .payment-field label(for='payment') Способ оплаты select#payment(name='payment') - option(value='qiwi' data-icon='./img/payments-icons/qiwi.svg') QIWI + option(value='qiwi' data-icon='../img/payments-icons/qiwi.svg') QIWI .modal-content__purchase button.purchase-btn.waves-effect.btn(type='submit' href='#') Перейти к оплате // Pay Modal END diff --git a/dist/views/product.pug b/dist/views/product.pug new file mode 100644 index 0000000..3ab6dc8 --- /dev/null +++ b/dist/views/product.pug @@ -0,0 +1,62 @@ +//- Head HTML +include ./assets/head.pug +//- Header Template +include ./assets/templates/header.pug + +main.main-section + include ./assets/templates/modals/cart.pug + include ./assets/templates/modals/pay.pug + .container + .row + .col.s12 + #product.product.background + .product-content + .product-breadcrumb + #breadcrumb.breadcrumb + ul + li + a(href='/') Главная + li + a(href='/') #{category} + li #{title} + hr + .product-title.block-title + h1 #{title} + .product-info + .product-info__left + .product-left__pay + img(src='../img/service-icons/'+image alt='#') + button.waves-effect.waves-light.btn Купить + .product-info__cost + .product-info__count + span #{count} шт + p Цена за 1шт. + .product-info__price + span #{price} + .product-info__right + .product-right__title + span Описание: + hr + p #{description} + .product-right__content + h2 Тип аккаунтов #{category} + p + | Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos tempora quidem + | velit facilis exercitationem eveniet porro vitae quisquam officia. + | Explicabo, iure quis doloribus totam nihil esse minus, vero animi ex + | corrupti ea officia, dolor fuga itaque ad deserunt quo. Sint! + h2 Формат аккаунтов #{category} + p Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, magni. + hr + h3 Рекомендации к покупке аккаунтов. + p + | Lorem ipsum dolor sit amet consectetur adipisicing elit. A saepe ad, atque + | cum officia ullam similique repudiandae excepturi at accusamus hic deserunt + | molestiae mollitia? Labore numquam officiis natus repellat fugit ipsum + | nesciunt, nam officia? Sunt ut quod provident dolore architecto laborum ab + | repellat ea sequi optio dolorum, tenetur quis eius rerum quibusdam nisi + | minus, debitis non. Impedit molestiae beatae, fugit similique sit labore quo + | incidunt id corporis quia officiis pariatur. + +//- Footer Template +include ./assets/templates/footer.pug \ No newline at end of file diff --git a/src/js/components/category.component.js b/src/js/components/category.component.js index c56df27..4113840 100644 --- a/src/js/components/category.component.js +++ b/src/js/components/category.component.js @@ -20,13 +20,17 @@ async function buttonHandler(e) { e.preventDefault(); if (e.target.dataset.category && e.target.dataset.category != 'all') { this.items.onShow(); + activeLink(e); + const category = e.target.dataset.category.toLowerCase(); const fData = await apiService.getItemsOne(category); const html = renderItemsOne(category, fData); + this.items.onHide(); document.querySelector('#roster').insertAdjacentHTML('afterbegin', html); } else if (e.target.dataset.category === 'all') { this.items.onShow(); + activeLink(e); const fData = await apiService.getItems(), categories = Object.keys(fData); @@ -34,4 +38,9 @@ async function buttonHandler(e) { this.items.onHide(); document.querySelector('#roster').insertAdjacentHTML('afterbegin', html); } +} + +function activeLink(e) { + e.target.parentNode.parentNode.querySelectorAll('li a').forEach(li => li.classList.remove('active')); + e.target.classList.add('active'); } \ No newline at end of file diff --git a/src/js/templates/items.template.js b/src/js/templates/items.template.js index 12aab40..2d87c06 100644 --- a/src/js/templates/items.template.js +++ b/src/js/templates/items.template.js @@ -15,7 +15,7 @@ export function renderItems(categories, items) { #
- ${item.title} + ${item.title}
diff --git a/src/js/templates/itemsOne.template.js b/src/js/templates/itemsOne.template.js index cb4d176..cc454f5 100644 --- a/src/js/templates/itemsOne.template.js +++ b/src/js/templates/itemsOne.template.js @@ -14,7 +14,7 @@ export function renderItemsOne(category, items) { #
- ${item.title} + ${item.title}