Breadcrumb component

dist/views/product.pug

@@ -17,7 +17,7 @@ main.main-section
                   li
                     a(href='/') Главная
                   li
-                    a(href='/') #{category}
+                    a#breadcrumbBtn(href='/' data-category=category) #{category}
                   li #{title}
               hr
             .product-title.block-title

src/js/components/breadcrumb.component.js

@@ -0,0 +1,22 @@
+import { Component } from "../core/component";
+
+export class BreadcrumbComponent extends Component {
+    constructor(id) {
+        super(id);
+    }
+
+    init() {
+        if(this.$el) {
+            const btn = this.$el.querySelector('#breadcrumbBtn');
+            btn.addEventListener('click', buttonHandler);
+        }
+    }
+}
+
+function buttonHandler(e) {
+    e.preventDefault();
+    if (e.target.dataset.category) {
+        localStorage.setItem('category', e.target.dataset.category.toLowerCase());
+        window.location.href = '/';
+    }
+}

src/js/components/category.component.js

@@ -12,6 +12,22 @@ export class CategoryComponent extends Component {
     init() {
         if (this.$el) {
             this.$el.addEventListener('click', buttonHandler.bind(this));
+
+            if (localStorage.getItem('category')) {
+                const category = localStorage.getItem('category');
+                const bounded = breadcrumbActiveLink.bind(this);
+                document.querySelector('#loader').classList.add('hide');
+                bounded(category);
+                // отображем данные если был нажат breadcrumb
+                (async function(){
+                    const fData = await apiService.getItemsOne(category);
+                    const html = renderItemsOne(category, fData);
+                    document.querySelector('#roster').insertAdjacentHTML('afterbegin', html);  
+                }())
+
+                // очищаем ключ category чтобы данные не показывались всегда
+                localStorage.removeItem('category');
+            }
         }
     }
 }
@@ -20,7 +36,7 @@ async function buttonHandler(e) {
     e.preventDefault();
     if (e.target.dataset.category && e.target.dataset.category != 'all') {
         this.items.onShow();
-        activeLink(e);
+        btnActiveLink(e);
 
         const category = e.target.dataset.category.toLowerCase();
         const fData = await apiService.getItemsOne(category);
@@ -30,7 +46,7 @@ async function buttonHandler(e) {
         document.querySelector('#roster').insertAdjacentHTML('afterbegin', html);
     } else if (e.target.dataset.category === 'all') {
         this.items.onShow();
-        activeLink(e);
+        btnActiveLink(e);
         const fData = await apiService.getItems(),
                 categories = Object.keys(fData);
 
@@ -40,7 +56,17 @@ async function buttonHandler(e) {
     }
 }
 
-function activeLink(e) {
+function btnActiveLink(e) {
     Array.from(e.target.parentNode.parentNode.querySelectorAll('li a')).forEach(li => li.classList.remove('active'));
     e.target.classList.add('active');
+}
+
+function breadcrumbActiveLink(category) {
+    const links = this.$el.querySelectorAll('.category-items ul li a');
+    Array.from(links).forEach(li => li.classList.remove('active'));
+    Array.from(links).forEach(li => {
+        if (li.dataset.category.toLowerCase() === category) {
+            li.classList.add('active');
+        }
+    });
 }

src/js/components/items.component.js

@@ -11,17 +11,19 @@ export class ItemsComponent extends Component {
     async init() {
         
         if (this.$el) {
-            const fData = await apiService.getItems(),
+            if (!localStorage.getItem('category')) {
+               const fData = await apiService.getItems(),
                 categories = Object.keys(fData);
             
-            if (categories.length) {
+                if (categories.length) {
-                const html = renderItems(categories, fData);
+                    const html = renderItems(categories, fData);
-                this.$el.querySelector('#roster').insertAdjacentHTML('afterbegin', html);  
+                    this.$el.querySelector('#roster').insertAdjacentHTML('afterbegin', html);  
-            } else {
+                } else {
-                this.$el.querySelector('#roster').innerHTML = 'Товаров на сайте пока что нету';
+                    this.$el.querySelector('#roster').innerHTML = 'Товаров на сайте пока что нету';
-            }
+                }
-            this.loader.hide(); 
+                this.loader.hide(); 
-        }
+            } 
+        } 
     }
     
     onHide() {

src/js/index.js

@@ -4,10 +4,12 @@ import { CartComponent } from "./components/cart.component.js";
 import { LoaderComponent } from "./components/loader.component.js";
 import { ItemsComponent } from "./components/items.component.js";
 import { CategoryComponent } from "./components/category.component.js";
+import { BreadcrumbComponent } from "./components/breadcrumb.component.js";
 
 const header = new HeaderComponent('header');
 const loader = new LoaderComponent('loader');
 const information = new InformationComponent('information');
 const cart = new CartComponent('cart');
 const items = new ItemsComponent('items', {loader});
-const category = new CategoryComponent('category', {items});
+const category = new CategoryComponent('category', {items});
+const breadcumb = new BreadcrumbComponent('breadcrumb');