mirror of
https://github.com/sergeyyarkov/digital-store.git
synced 2026-10-11 18:29:11 +03:00
Product page
This commit is contained in:
parent
65b57dc819
commit
8c20918fda
@ -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);
|
||||
}
|
||||
@ -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'));
|
||||
|
||||
|
||||
6
dist/public/js/bundle.js
vendored
6
dist/public/js/bundle.js
vendored
File diff suppressed because one or more lines are too long
4
dist/views/assets/head.pug
vendored
4
dist/views/assets/head.pug
vendored
@ -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
|
||||
4
dist/views/assets/templates/footer.pug
vendored
4
dist/views/assets/templates/footer.pug
vendored
@ -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')
|
||||
|
||||
2
dist/views/assets/templates/modals/pay.pug
vendored
2
dist/views/assets/templates/modals/pay.pug
vendored
@ -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
|
||||
|
||||
62
dist/views/product.pug
vendored
Normal file
62
dist/views/product.pug
vendored
Normal file
@ -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
|
||||
@ -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);
|
||||
|
||||
@ -35,3 +39,8 @@ async function buttonHandler(e) {
|
||||
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');
|
||||
}
|
||||
@ -15,7 +15,7 @@ export function renderItems(categories, items) {
|
||||
<img src="./img/service-icons/${item.image}" alt="#">
|
||||
</div>
|
||||
<div class="list-title">
|
||||
<a href="/item/${item._id}">${item.title}</a>
|
||||
<a href="/product/${item._id}">${item.title}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="items-list__info">
|
||||
|
||||
@ -14,7 +14,7 @@ export function renderItemsOne(category, items) {
|
||||
<img src="./img/service-icons/${item.image}" alt="#">
|
||||
</div>
|
||||
<div class="list-title">
|
||||
<a href="/item/${item._id}">${item.title}</a>
|
||||
<a href="/product/${item._id}">${item.title}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="items-list__info">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user