Cart Modal

dist/public/css/style.css

@@ -141,7 +141,7 @@ hr {
     margin-top: 7rem;
     padding: 25px;
     width: 460px;
-    min-height: 350px;
+    min-height: 230px;
 }
 
 .modal-content__header .small-title {
@@ -192,10 +192,13 @@ hr {
     font-size: 16px;
 }
 
-#item-remove i {
+#removeItem {
     font-size: 20px;
     cursor: pointer;
 }
+#totalPrice {
+    font-size: 15px;
+}
 
 .modal-content__items {
     border-top: 1px solid #e0e0e0;
@@ -223,6 +226,7 @@ hr {
 
 .modal-content__right {
     align-self: center;
+    width: 145px;
 }
 
 .modal-content__right span {

dist/views/assets/templates/modals/cart.pug

@@ -9,107 +9,17 @@
               h4.small-title Корзина
               span#cartClose.cart-close
                 i.material-icons close
-            .modal-content__items
+            #modalList.modal-content__items
-              .modal-content__item
-                .modal-content__title
-                  a(href='#')
-                    b
-                      | Cs:go(prime) + открыта тп + инв. s:go(prime) + открыта тп + инв
-                  br
-                  span.in-stock В наличии: 124 (шт)
-                .modal-content__right
-                  button -
-                  input(type='number' value='1' min='1')
-                  button +
-                  span 139.89
-                .modal-content__remove
-                  span#item-remove
-                    i.material-icons close
-              .modal-content__item
-                .modal-content__title
-                  a(href='#')
-                    b
-                      | Cs:go(prime) + открыта тп + инв. s:go(prime) + открыта тп + инв
-                  br
-                  span.in-stock В наличии: 124 (шт)
-                .modal-content__right
-                  button -
-                  input(type='number' value='1' min='1')
-                  button +
-                  span 139.89
-                .modal-content__remove
-                  span#item-remove
-                    i.material-icons close
-              .modal-content__item
-                .modal-content__title
-                  a(href='#')
-                    b
-                      | Cs:go(prime) + открыта тп + инв. s:go(prime) + открыта тп + инв
-                  br
-                  span.in-stock В наличии: 124 (шт)
-                .modal-content__right
-                  button -
-                  input(type='number' value='1' min='1')
-                  button +
-                  span 139.89
-                .modal-content__remove
-                  span#item-remove
-                    i.material-icons close
-              .modal-content__item
-                .modal-content__title
-                  a(href='#')
-                    b
-                      | Cs:go(prime) + открыта тп + инв. s:go(prime) + открыта тп + инв
-                  br
-                  span.in-stock В наличии: 124 (шт)
-                .modal-content__right
-                  button -
-                  input(type='number' value='1' min='1')
-                  button +
-                  span 139.89
-                .modal-content__remove
-                  span#item-remove
-                    i.material-icons close
-              .modal-content__item
-                .modal-content__title
-                  a(href='#')
-                    b
-                      | Cs:go(prime) + открыта тп + инв. s:go(prime) + открыта тп + инв
-                  br
-                  span.in-stock В наличии: 124 (шт)
-                .modal-content__right
-                  button -
-                  input(type='number' value='1' min='1')
-                  button +
-                  span 139.89
-                .modal-content__remove
-                  span#item-remove
-                    i.material-icons close
-              .modal-content__item
-                .modal-content__title
-                  a(href='#')
-                    b
-                      | Cs:go(prime) + открыта тп + инв. s:go(prime) + открыта тп + инв
-                  br
-                  span.in-stock В наличии: 124 (шт)
-                .modal-content__right
-                  button -
-                  input(type='number' value='1' min='1')
-                  button +
-                  span 139.89
-                .modal-content__remove
-                  span#item-remove
-                    i.material-icons close
             .modal-content__info
               .modal-content__counter
                 span Всего товаров в корзине
                 span
-                  b 1
+                  b#modalCounter 1
               .modal-content__pay
                 span
                   b Сумма к оплате
-                span#total-price
+                span
-                  b 139.89 ₽
+                  b#totalPrice 139.89 ₽
             .modal-content__purchase
-              button.purchase-btn.waves-effect.btn Перейти к оплате
+              button#makePay.purchase-btn.waves-effect.btn Перейти к оплате
 // Cart Modal END

src/js/components/header.component.js

@@ -10,6 +10,7 @@ export class HeaderComponent extends Component {
         const currentPage = this.$el.querySelector('#desktop-nav');
         const pages = Array.from(this.$el.querySelectorAll('#page'));
         pages.forEach(li => li.dataset.page === currentPage.dataset.current ? li.classList.add('active') : false);
-        insertCount('counter', JSON.parse(localStorage.getItem('cart'))); // <- ф-я счетика товаров
+        // ф-я счетика товаров
+        localStorage.getItem('cart') ? insertCount('counter', JSON.parse(localStorage.getItem('cart'))) : false;
     }
 }

src/js/components/items.component.js

@@ -57,7 +57,6 @@ export class ItemsComponent extends Component {
                 }
             });
         }
-        
     }
 
     insertItems(html) {
@@ -70,10 +69,22 @@ function addItem(e) {
 
     if (e.target.localName === 'button' && e.target.id === 'addItem') {
         const target = e.target;
-        renderObj(e.target.dataset, this, target);
+        const item = {
+            id: e.target.dataset.id,
+            title: e.target.dataset.title,
+            count: e.target.dataset.count,
+            price: e.target.dataset.price
+        }
+        renderObj(item, this, target);
     } else if (e.target.localName === 'i') {
         const target = e.target.parentNode;
-        renderObj(e.target.parentNode.dataset, this, target);
+        const item = {
+            id: e.target.parentNode.dataset.id,
+            title: e.target.parentNode.dataset.title,
+            count: e.target.parentNode.dataset.count,
+            price: e.target.parentNode.dataset.price
+        }
+        renderObj(item, this, target);
     }
 
     function renderObj(obj, context, target) {

src/js/core/modal.js

@@ -6,6 +6,8 @@ export class Modal {
         this.init();
     }
 
+    onShow() {}
+
     init() {
         this.open.addEventListener('click', openHandler.bind(this));
         this.close.addEventListener('click', closeHandler.bind(this));

src/js/index.js

@@ -15,4 +15,4 @@ const items = new ItemsComponent('items', {loader});
 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');
+const cart = new CartModal('cart', 'cartOpen', 'cartClose', {items});

src/js/modals/cart.modal.js

@@ -1,11 +1,62 @@
 import { Modal } from "../core/modal";
+import { insertCount } from "../other/counter";
+import { defaultBtnColor } from "../other/defaultColorBtn";
 
 export class CartModal extends Modal {
-    constructor(id, open, close) {
+    constructor(id, open, close, {items}) {
         super(id, open, close);
+        this.items = items;
+        this.open.addEventListener('click', this.openHandler.bind(this));
+        this.close.addEventListener('click', this.closeHandler.bind(this));
+        this.list = this.$el.querySelector('#modalList');
     }
 
-    init () {
+    closeHandler() {
+        this.removeItem = null;
+    }
 
+    openHandler() {
+        this.removeItem != null ? this.list.addEventListener('click', this.removeItem.bind(this)) : false
+        this.list.innerHTML = ''; 
+        this.insertItems(this.list);
+    }
+
+    insertItems(list) {
+        if (localStorage.getItem('cart')) {
+            const items = JSON.parse(localStorage.getItem('cart'));
+
+            if (items.length == 0) {
+                list.innerHTML = '<p style="text-align:center;padding:15px;">Вы не добавили ни один товар</p>';
+                this.$el.querySelector('#makePay').classList.add('hide');
+            } else {
+                this.$el.querySelector('#makePay').classList.remove('hide');
+            }
+        
+            items.forEach(item => this.list.innerHTML += `<div data-id="${item.id}" class="modal-content__item"><div class="modal-content__title"><a href="#"><b>${item.title}</b></a><br><span class="in-stock">В наличии: ${item.count} (шт)</span></div><div class="modal-content__right"><button>-</button><input type="number" value="1" min="1" max="${item.count}"><button>+</button><span>${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);
+        }
+    }
+
+    removeItem(e) {
+        if (e.target.id === 'removeItem') {
+            const id = e.target.dataset.id;
+            let index;
+
+            this.items.cart.forEach((item, i) => item.id === id ? index = i : false);
+            this.items.cart.splice(index, 1);
+            localStorage.setItem('cart', JSON.stringify(this.items.cart));
+
+            this.list.innerHTML = '';
+            this.insertItems(this.list);
+            defaultBtnColor(id, this.items.$el);
+        }
+    }
+
+    insertTotalPrice(id, array) {
+        let totalPrice = 0;
+        array.forEach(item => totalPrice += parseFloat(item.price));
+        this.$el.querySelector(`#${id}`).innerHTML = `${totalPrice.toFixed(2)}₽`;
     }
 }

src/js/other/defaultColorBtn.js

@@ -0,0 +1,6 @@
+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

@@ -29,7 +29,7 @@ export function renderItems(categories, items) {
                                 <span>Цена за 1 шт.</span>
                             </div>
                             <div class="list-price">
-                                <span>${item.price}₽</span>
+                                <span>${item.price.toFixed(2)}₽</span>
                             </div>
                             <div class="list-buttons">
                                 <button class="btn-small waves-effect waves-light">Купить</button>

src/js/templates/itemsOne.template.js

@@ -28,7 +28,7 @@ export function renderItemsOne(category, items) {
                                     <span>Цена за 1 шт.</span>
                                 </div>
                                 <div class="list-price">
-                                    <span>${item.price}₽</span>
+                                    <span>${item.price.toFixed(2)}₽</span>
                                 </div>
                                 <div class="list-buttons">
                                     <button class="btn-small waves-effect waves-light">Купить</button>