Pay Modal

dist/public/css/style.css

@@ -133,6 +133,7 @@ hr {
     left: 0;
     bottom: 0;
     z-index: 999;
+    overflow-y: auto;
 }
 
 .cart-content,

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')
+                  input#title(name='title' readonly)
-                    option(value='js_title') Cs:go(prime) + открыта тп + инв. 901руб
                 .email-field
                   label(for='email') Ваш E-mail
                   input#email(required='' type='text' name='email')

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 Список товаров:

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} шт

src/js/core/modal.js

@@ -24,8 +24,9 @@ export class Modal {
     }
 }
 
-function openHandler() {
+function openHandler(e) {
     this.show();
+    this.onShow(e);
 }
 
 function closeHandler() {

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');

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.payMethod = this.$el.querySelector('.payment-field #payment').value;
-        payInfo.phone = this.$el.querySelector('.phone-field input').value;
+        payInfo.phone = this.$el.querySelector('.phone-field #phone').value;
-        payInfo.email = this.$el.querySelector('.email-field input').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'; 
+        }
+    }
 }

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);
+    }
+    
+}

src/js/other/defaultColorBtn.js

@@ -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'; 
-    }
-}

src/js/templates/items.template.js

@@ -32,7 +32,7 @@ export function renderItems(categories, items) {
                                 <span>${item.price.toFixed(2)}₽</span>
                             </div>
                             <div class="list-buttons">
-                                <button class="btn-small waves-effect waves-light">Купить</button>
+                                <button data-id="${item._id}" data-title="${item.title}" data-date="${item.date}" data-count="${item.count}" data-price="${item.price}" id="payOpen" class="btn-small waves-effect waves-light">Купить</button>
                                 <button data-id="${item._id}" data-title="${item.title}" data-date="${item.date}" data-count="${item.count}" data-price="${item.price}" id="addItem" class="btn-small waves-effect waves-light"><i
                                         class="material-icons">shopping_cart</i></button>
                             </div>

src/js/templates/itemsOne.template.js

@@ -31,7 +31,7 @@ export function renderItemsOne(category, items) {
                                     <span>${item.price.toFixed(2)}₽</span>
                                 </div>
                                 <div class="list-buttons">
-                                    <button class="btn-small waves-effect waves-light">Купить</button>
+                                    <button data-id="${item._id}" data-title="${item.title}" data-date="${item.date}" data-count="${item.count}" data-price="${item.price}" id="payOpen" class="btn-small waves-effect waves-light">Купить</button>
                                     <button data-id="${item._id}" data-title="${item.title}" data-date="${item.date}" data-count="${item.count}" data-price="${item.price}" id="addItem" class="btn-small waves-effect waves-light"><i
                                             class="material-icons">shopping_cart</i></button>
                                 </div>