PayInfo upd

This commit is contained in:
Sergey Yarkov 2019-11-25 20:30:49 +03:00
parent b5a6ba76c1
commit ceca81dfbb
6 changed files with 33 additions and 15 deletions

File diff suppressed because one or more lines are too long

View File

@ -14,12 +14,23 @@
.modal-content__counter
span Всего товаров в корзине
span
b#modalCounter 1
b#modalCounter 0
.modal-content__pay
span
b Сумма к оплате
span
b#totalPrice 139.89 ₽
.modal-content__purchase
button#makePay.purchase-btn.waves-effect.btn Перейти к оплате
b#totalPrice 0 ₽
form#purchaseInfo.modal-content__purchase.hide
span Информация необходимая для оплаты
.email-field
label(for='email') Ваш E-mail
input#email(required='' type='text' name='email')
.phone-field
label(for="phone") Номер QIWI
input#phone(required='' type='text' name='phone')
.payment-field
label(for='payment') Способ оплаты
select#payment(name='payment')
option(value='qiwi' data-icon='../img/payments-icons/qiwi.svg') QIWI
button.purchase-btn.waves-effect.btn Перейти к оплате
// Cart Modal END

View File

@ -16,3 +16,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});

View File

@ -18,7 +18,7 @@ export class CartModal extends Modal {
openHandler() {
this.removeItem != null ? this.list.addEventListener('click', this.removeItem.bind(this)) : false
this.makePay != null ? this.$el.querySelector('#makePay').addEventListener('click', this.makePay.bind(this)) : false;
this.makePay != null ? this.$el.querySelector('#purchaseInfo').addEventListener('submit', this.makePay.bind(this)) : false;
this.list.innerHTML = '';
this.insertItems(this.list);
}
@ -29,15 +29,17 @@ export class CartModal extends Modal {
if (items.length == 0) {
list.innerHTML = '<p style="text-align:center;padding:15px;">Вы не добавили ни один товар</p>';
this.$el.querySelector('#makePay').classList.add('hide');
this.$el.querySelector('#purchaseInfo').classList.add('hide');
} else {
this.$el.querySelector('#makePay').classList.remove('hide');
this.$el.querySelector('#purchaseInfo').classList.remove('hide');
}
items.forEach(item => this.list.innerHTML += `<div data-id="${item.id}" data-title="${item.title}" data-price="${item.price}" data-count="1" class="modal-content__item"><div class="modal-content__title"><a href="/product/${item.id}"><b>${item.title}</b></a><br><span class="in-stock">В наличии: ${item.count} (шт)</span></div><div class="modal-content__right"><span id="price">${parseFloat(item.price).toFixed(2)}₽</span></div><div class="modal-content__remove"><span><i data-id="${item.id}" class="material-icons" id="removeItem">close</i></span></div></div>`);
insertCount('modalCounter', this.items.cart);
insertCount('counter', this.items.cart);
this.insertTotalPrice('totalPrice', this.items.cart);
} else {
list.innerHTML = '<p style="text-align:center;padding:15px;">Вы не добавили ни один товар</p>';
}
}
@ -62,7 +64,8 @@ export class CartModal extends Modal {
this.$el.querySelector(`#${id}`).innerHTML = `${totalPrice.toFixed(2)}₽`;
}
makePay() {
makePay(e) {
e.preventDefault();
const payInfo = {items: this.items.cart.map(item => {
return {
id: item.id,
@ -73,6 +76,9 @@ 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;
console.log('Pay info:', payInfo);
}

View File

@ -9,7 +9,7 @@ export function renderItems(categories, items) {
items[category].forEach(item => {
if (item && item._id != undefined) {
html += `
<div class="items-list">
<div data-id="${item._id}" data-title="${item.title}" data-price="${item.price}" class="items-list">
<div class="items-list__name">
<div class="list-icon">
<img src="./img/service-icons/${item.image}" alt="#">

View File

@ -8,7 +8,7 @@ export function renderItemsOne(category, items) {
items.forEach(item => {
if (item && item._id != undefined) {
html += `
<div class="items-list">
<div data-id="${item._id}" data-title="${item.title}" data-price="${item.price}" class="items-list">
<div class="items-list__name">
<div class="list-icon">
<img src="./img/service-icons/${item.image}" alt="#">