Add breadcrumbs

.gitignore

@@ -1,4 +1,3 @@
 /node_modules
 .env
-.package-lock.json
-.adminbro
+/.adminbro

app.js

@@ -61,6 +61,26 @@ app.use(async (req, res, next) => {
   }
 });
 
+// add breadcrumbs
+get_breadcrumbs = function (url) {
+  var rtn = [{ name: "Home", url: "/" }],
+    acc = "", // accumulative url
+    arr = url.substring(1).split("/");
+
+  for (i = 0; i < arr.length; i++) {
+    acc = i != arr.length - 1 ? acc + "/" + arr[i] : null;
+    rtn[i + 1] = {
+      name: arr[i].charAt(0).toUpperCase() + arr[i].slice(1),
+      url: acc,
+    };
+  }
+  return rtn;
+};
+app.use(function (req, res, next) {
+  req.breadcrumbs = get_breadcrumbs(req.originalUrl);
+  next();
+});
+
 //routes config
 const indexRouter = require("./routes/index");
 const productsRouter = require("./routes/products");
@@ -87,10 +107,10 @@ app.use(function (err, req, res, next) {
   res.render("error");
 });
 
-var port = process.env.PORT || 5000;
+var port = process.env.PORT || 3000;
 app.set("port", port);
 app.listen(port, () => {
-  console.log("Server online...");
+  console.log("Server running at port " + port);
 });
 
 module.exports = app;

public/stylesheets/style.css

@@ -307,6 +307,11 @@ hr.gradient-style {
   color: var(--dark-blue);
 }
 
+/* BREADCRUMBS STYLE */
+.breadcrumb-item a:hover {
+  color: var(--dark-blue) !important;
+}
+
 /* SHOPPING CART STYLES */
 .container.cart {
   margin: 1em auto;

routes/products.js

@@ -25,6 +25,7 @@ router.get("/", async (req, res) => {
       successMsg,
       errorMsg,
       current: page,
+      breadcrumbs: null,
       home: "/products/?",
       pages: Math.ceil(count / perPage),
     });
@@ -60,6 +61,7 @@ router.get("/search", async (req, res) => {
       successMsg,
       errorMsg,
       current: page,
+      breadcrumbs: null,
       home: "/products/search?search=" + req.query.search + "&",
       pages: Math.ceil(count / perPage),
     });
@@ -92,6 +94,7 @@ router.get("/:slug", async (req, res) => {
       successMsg,
       errorMsg,
       current: page,
+      breadcrumbs: req.breadcrumbs,
       home: "/products/" + req.params.slug.toString() + "/?",
       pages: Math.ceil(count / perPage),
     });

views/shop/index.ejs

@@ -22,6 +22,22 @@
       <% } %>
     </div>
   </div>
+  <!-- Breadcrumbs -->
+  <div class="row">
+    <div class="col-md-12 m-auto">
+      <%if (breadcrumbs) { %>
+      <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+          <% breadcrumbs.forEach(crumb => { if(!crumb.name.startsWith("?")){%>
+          <li class="breadcrumb-item" aria-current="page">
+            <a href="<%=crumb.url%>"><%= crumb.name %></a>
+          </li>
+          <%}})%>
+        </ol>
+      </nav>
+      <%} %>
+    </div>
+  </div>
   <!-- Page banner image -->
   <% if(pageName == 'All Products') { %>
   <div