New web developer here, I am trying to make an e-commerce site, where the admin can create new categories and add products to the database. And then I want the category page to be created dynamically ( maybe via some template) and for now I want the page will be simple just a navbar and a grid with the products. I know how to make a the static category webpage with the grid and navbar, and I think I know how to add the routes dynamically and also add the categories to the navbar dynamically but how do I create the webpage with navbar and the grid and code to loop through the database for all items in that category dynamically???
Dont know if this is the right approach, but I have 2 schemas
var mongoose = require('mongoose');
var categorySchema = new mongoose.Schema({
name: String
});
module.exports = mongoose.model('Category', categorySchema);
and
var productSchema = new mongoose.Schema({
name: String,
category: {
type: String,
enum:['men', 'women', 'children']
},
price: Number,
description: String,
date: { type: Date, default: Date.now }
})
In the database and lets say I have a EJS file with a navbar and functionality to sort through the database like so:
<html >
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.css">
</head>
<body>
<div class="ui inverted menu">
<div class="header item">B2Better</div>
<a class="item">About Us</a>
<div class="right menu">
<a class="ui item">Sign In</a>
<a class="ui item">Login</a>
<a class="ui item">Logout</a>
</div>
</div>
<div class="ui inverted vertical menu">
<div class="item">
<div class="header">Categories</div>
<div class="menu">
<a class="item">Men</a>
<a class="item">Women</a>
<a class="item">Children</a>
<a class="item">Baby</a>
</div>
</div>
</div>
<% products.forEach(function(product){ %>
<% if (product.category===x) { %>
<h5><%= product.name %></h5>
<img src='someurl'>
<% } %>
<% }) %>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.js"></script>
</body>
</html>
And I would need express to make a new page like this for every category in the database how can I achieve this???
Thanks
Aucun commentaire:
Enregistrer un commentaire