LocalStorage items

dist/views/assets/templates/footer.pug

@@ -2,7 +2,7 @@ footer
     span © 2019 Digital Store | Все права защищены.
     .waves-effect.waves-light.pulse.cart-btn(id="cartOpen")
         i.material-icons shopping_cart
-        span.counter 0
+        span#counter.counter 0
 // Maretialize JS
 script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js')
 // Script JS

src/js/components/header.component.js

@@ -1,4 +1,5 @@
 import { Component } from "../core/component";
+import { insertCount } from "../other/counter";
 
 export class HeaderComponent extends Component {
     constructor(id) {
@@ -9,5 +10,6 @@ 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'))); // <- ф-я счетика товаров
     }
 }

src/js/components/items.component.js

@@ -1,17 +1,24 @@
 import { Component } from "../core/component";
 import { apiService } from "../services/api.service";
 import { renderItems } from "../templates/items.template";
+import { insertCount } from "../other/counter";
 
 export class ItemsComponent extends Component {
     constructor(id, {loader}) {
         super(id);
         this.loader = loader;
         this.$el ? this.roster = this.$el.querySelector('#roster') : false;
+        if (localStorage.getItem('cart')) {
+            this.cart = JSON.parse(localStorage.getItem('cart'));
+        } else {
+            this.cart = [];
+        }
     }
 
     async init() {
         if (this.$el) {
             localStorage.setItem('sortByAll', 'true'); // установка значения для компонента Filter
+            this.$el.addEventListener('click', addItem.bind(this));
             if (!localStorage.getItem('category')) { // Получаем все товары и выводим их если нету ключа category в ls
                const fData = await apiService.getItems(),
                 categories = Object.keys(fData);
@@ -19,6 +26,7 @@ export class ItemsComponent extends Component {
                 if (categories.length) {
                     const html = renderItems(categories, fData);
                     this.insertItems(html);
+                    this.btnColor();
                 } else {
                     this.roster.innerHTML = 'Товаров на сайте пока что нету';
                 }
@@ -37,7 +45,67 @@ export class ItemsComponent extends Component {
         this.loader.show();
     }
 
+    btnColor() {
+        if (localStorage.getItem('cart')) {
+           // Окраска кнопок айтемов которые находятся в корзине
+            const obj = JSON.parse(localStorage.getItem('cart'));
+    
+            obj.forEach(item => {
+                if (this.$el.querySelector(`#addItem[data-id="${item.id}"]`)) {
+                    this.$el.querySelector(`#addItem[data-id="${item.id}"]`).classList.add('orange');
+                    this.$el.querySelector(`#addItem[data-id="${item.id}"] i`).innerHTML = 'close';
+                }
+            });
+        }
+        
+    }
+
     insertItems(html) {
         this.roster.insertAdjacentHTML('afterbegin', html);
+        this.btnColor();
     }
 }
+
+function addItem(e) {
+
+    if (e.target.localName === 'button' && e.target.id === 'addItem') {
+        const target = e.target;
+        renderObj(e.target.dataset, this, target);
+    } else if (e.target.localName === 'i') {
+        const target = e.target.parentNode;
+        renderObj(e.target.parentNode.dataset, this, target);
+    }
+
+    function renderObj(obj, context, target) {
+        if (context.cart.length > 0) {
+            let insterted = false;
+            let index;
+            // Проверка на существующий айтем в корзине
+            context.cart.forEach((item, i) => {
+                if (item.id === obj.id) {
+                    insterted = true;
+                    index = i;  
+                } 
+            });
+            if (insterted === false) {
+                context.cart.push(obj)
+                localStorage.setItem('cart', JSON.stringify(context.cart));
+                target.classList.add('orange');
+                target.querySelector('i').innerHTML = 'close';
+                insertCount('counter', context.cart)     
+            } else {
+                context.cart.splice(index, 1);
+                localStorage.setItem('cart', JSON.stringify(context.cart)); 
+                target.classList.remove('orange');
+                target.querySelector('i').innerHTML = 'shopping_cart';
+                insertCount('counter', context.cart)      
+            }
+        } else {
+          context.cart.push(obj);
+          localStorage.setItem('cart', JSON.stringify(context.cart));
+          target.classList.add('orange');
+          target.querySelector('i').innerHTML = 'close';
+          insertCount('counter', context.cart)  
+        }
+    };
+}

src/js/index.js

@@ -7,6 +7,7 @@ import { BreadcrumbComponent } from "./components/breadcrumb.component.js";
 import { FilterComponent } from "./components/filter.component.js";
 import { CartModal } from "./modals/cart.modal.js";
 
+
 const header = new HeaderComponent('header');
 const loader = new LoaderComponent('loader');
 const information = new InformationComponent('information');

src/js/modals/cart.modal.js

@@ -4,4 +4,8 @@ export class CartModal extends Modal {
     constructor(id, open, close) {
         super(id, open, close);
     }
+
+    init () {
+        
+    }
 }

src/js/other/counter.js

@@ -0,0 +1,4 @@
+export function insertCount(id, array) {
+    const counter = document.getElementById(id);
+    counter.innerHTML = array.length;
+}

src/js/templates/items.template.js

@@ -33,7 +33,7 @@ export function renderItems(categories, items) {
                             </div>
                             <div class="list-buttons">
                                 <button class="btn-small waves-effect waves-light">Купить</button>
-                                <button class="btn-small waves-effect waves-light"><i
+                                <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>
                         </div>

src/js/templates/itemsOne.template.js

@@ -32,7 +32,7 @@ export function renderItemsOne(category, items) {
                                 </div>
                                 <div class="list-buttons">
                                     <button class="btn-small waves-effect waves-light">Купить</button>
-                                    <button class="btn-small waves-effect waves-light"><i
+                                    <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>
                             </div>