By continuing you indicate that you have read and agree to our Terms of service and Privacy policy
By continuing you indicate that you have read and agree to our Terms of service and Privacy policy
By continuing you indicate that you have read and agree to our Terms of service and Privacy policy
By continuing you indicate that you have read and agree to our Terms of service and Privacy policy
Popular Releases
Popular Libraries
New Libraries
Top Authors
Trending Kits
Trending Discussions
Learning
No Trending Kits are available at this moment for Ecommerce
QUESTION
React state object turning into "[object Object]" on refresh using sessionStorage
Asked 2022-Mar-23 at 14:53I'm working on a dummy fullstack ecommerce app using Postgres, Express and React whilst going through a fullstack course. This question is pretty specific to React.
On login to the app I can successfully create or retrieve a cart from the db and save it to state. It's being saved as a normal object:
Cart: {id: 2, user_id: 159, product_count: 0, price: '£0.00'}
-From Chrome Dev Tools: Extensions React Developer Tools.
I'm then using React useEffect hooks to persist this state in sessionStorage:
App.js
1 useEffect(() => {
2 if (sessionStorage["cart"]) {
3 setCart(window.sessionStorage.getItem("cart"));
4 }
5 }, []);
6
7 useEffect(() => {
8 window.sessionStorage.setItem("cart", cart);
9 }, [cart]);
10
Whenever I refresh the page or go to another route the normal object seems to be turning into the string: "[object Object]".
I know it has something to do with the way I'm saving the cart state variable into the localStorage but I'm not familiar with it enough to know exactly where this is happening or how to fix it so any help would be appreciated.
I've tried changing the assignment variables within the useEffect calls to include trying to save the item as an object, but I'm not familiar enough with sessionStorage to know what's happening behind the scenes.
ANSWER
Answered 2022-Mar-23 at 14:53When you store the object to storage, call JSON.stringify(cart) to convert from an object to a string.
When you read the object from storage, it's const cart = JSON.parse(cartString)
to convert from the string back into an object.
Like so:
1 useEffect(() => {
2 if (sessionStorage["cart"]) {
3 setCart(window.sessionStorage.getItem("cart"));
4 }
5 }, []);
6
7 useEffect(() => {
8 window.sessionStorage.setItem("cart", cart);
9 }, [cart]);
10 useEffect(() => {
11 if (sessionStorage["cart"]) {
12 setCart(JSON.parse(window.sessionStorage.getItem("cart")));
13 }
14 }, []);
15
16 useEffect(() => {
17 window.sessionStorage.setItem("cart", JSON.stringify(cart));
18 }, [cart]);
19
QUESTION
Render all products that relate to one of subcategories of one category, in category page
Asked 2022-Mar-07 at 16:38I had a question. I am creating an ecommerce website in django. There, I have categories and subcategories. When I enter to subcategory page, I able to render all products that relate to this subcategory. But, when I wanted to render all product that relate on one parent category, I am having troubles. So, I have some subcategories in one category. In that category page, I want to render all products that relate to one of subcategories of this category. Can you help me please? models.py
1class Category(models.Model):
2 parent = models.ForeignKey('self', related_name='children', on_delete=models.CASCADE, blank=True, null=True)
3 title = models.CharField(max_length=255)
4 slug = models.SlugField(max_length=255)
5 image = models.ImageField(null=True, blank=True, verbose_name="Изображение")
6 ordering = models.IntegerField(default=0)
7 is_featured = models.BooleanField(default=False)
8
9 class Meta:
10 verbose_name_plural = 'Categories'
11 ordering = ('ordering',)
12
13 def __str__(self):
14 if self.parent is not None:
15 return f"{self.parent}/{self.title}"
16 return self.title
17
18 @property
19 def imageURL(self):
20 try:
21 url = self.image.url
22 except:
23 url = ''
24 return url
25
26 def get_absolute_url(self):
27 return '/%s/' % (self.slug)
28
29
30class Product(models.Model):
31 category = models.ForeignKey(Category, related_name='products', on_delete=models.CASCADE)
32 parent = models.ForeignKey('self', related_name='variants', on_delete=models.CASCADE, blank=True, null=True)
33 name = models.CharField(max_length=200, verbose_name="Название продукта")
34 price = models.IntegerField(verbose_name="Цена")
35 slug = models.SlugField(max_length=255)
36 description = models.CharField(max_length=5000,blank=True, verbose_name="Описание:")
37 image = models.ImageField(null=True, blank=True, verbose_name="Изображение")
38 novinki = models.BooleanField(default=False, verbose_name="Новинки")
39 popularnye = models.BooleanField(default=False, verbose_name="Популарные")
40 def __str__(self):
41 return self.name
42
43 class Meta:
44 verbose_name = 'Продукты'
45 verbose_name_plural = "Продукты"
46
47
48 @property
49 def imageURL(self):
50 try:
51 url = self.image.url
52 except:
53 url = ''
54 return url
55
views.py
1class Category(models.Model):
2 parent = models.ForeignKey('self', related_name='children', on_delete=models.CASCADE, blank=True, null=True)
3 title = models.CharField(max_length=255)
4 slug = models.SlugField(max_length=255)
5 image = models.ImageField(null=True, blank=True, verbose_name="Изображение")
6 ordering = models.IntegerField(default=0)
7 is_featured = models.BooleanField(default=False)
8
9 class Meta:
10 verbose_name_plural = 'Categories'
11 ordering = ('ordering',)
12
13 def __str__(self):
14 if self.parent is not None:
15 return f"{self.parent}/{self.title}"
16 return self.title
17
18 @property
19 def imageURL(self):
20 try:
21 url = self.image.url
22 except:
23 url = ''
24 return url
25
26 def get_absolute_url(self):
27 return '/%s/' % (self.slug)
28
29
30class Product(models.Model):
31 category = models.ForeignKey(Category, related_name='products', on_delete=models.CASCADE)
32 parent = models.ForeignKey('self', related_name='variants', on_delete=models.CASCADE, blank=True, null=True)
33 name = models.CharField(max_length=200, verbose_name="Название продукта")
34 price = models.IntegerField(verbose_name="Цена")
35 slug = models.SlugField(max_length=255)
36 description = models.CharField(max_length=5000,blank=True, verbose_name="Описание:")
37 image = models.ImageField(null=True, blank=True, verbose_name="Изображение")
38 novinki = models.BooleanField(default=False, verbose_name="Новинки")
39 popularnye = models.BooleanField(default=False, verbose_name="Популарные")
40 def __str__(self):
41 return self.name
42
43 class Meta:
44 verbose_name = 'Продукты'
45 verbose_name_plural = "Продукты"
46
47
48 @property
49 def imageURL(self):
50 try:
51 url = self.image.url
52 except:
53 url = ''
54 return url
55def category_detail(request, slug):
56 data = cartData(request)
57
58 cartItems = data['cartItems']
59 order = data['order']
60 items = data['items']
61 categories_for_menu = Category.objects.filter(parent=None)[:3]
62 categories = Category.objects.filter(parent=None)
63 category = get_object_or_404(Category, slug=slug)
64 **products_all = Product.objects.filter(category.parent==category)**
65
66 print(products_all)
67
68 products = category.products.all()
69 context = {'items' : items, 'order' : order, 'cartItems' : cartItems, 'products':products, 'category':category, 'categories':categories,'categories_for_menu':categories_for_menu,'products_all':products_all}
70
71 return render(request, "store/categories.html", context)
72
Here I want to save all products that relate the category in products_all. Looking forward to your help!
ANSWER
Answered 2022-Mar-07 at 14:48You can do it using Q function:
1class Category(models.Model):
2 parent = models.ForeignKey('self', related_name='children', on_delete=models.CASCADE, blank=True, null=True)
3 title = models.CharField(max_length=255)
4 slug = models.SlugField(max_length=255)
5 image = models.ImageField(null=True, blank=True, verbose_name="Изображение")
6 ordering = models.IntegerField(default=0)
7 is_featured = models.BooleanField(default=False)
8
9 class Meta:
10 verbose_name_plural = 'Categories'
11 ordering = ('ordering',)
12
13 def __str__(self):
14 if self.parent is not None:
15 return f"{self.parent}/{self.title}"
16 return self.title
17
18 @property
19 def imageURL(self):
20 try:
21 url = self.image.url
22 except:
23 url = ''
24 return url
25
26 def get_absolute_url(self):
27 return '/%s/' % (self.slug)
28
29
30class Product(models.Model):
31 category = models.ForeignKey(Category, related_name='products', on_delete=models.CASCADE)
32 parent = models.ForeignKey('self', related_name='variants', on_delete=models.CASCADE, blank=True, null=True)
33 name = models.CharField(max_length=200, verbose_name="Название продукта")
34 price = models.IntegerField(verbose_name="Цена")
35 slug = models.SlugField(max_length=255)
36 description = models.CharField(max_length=5000,blank=True, verbose_name="Описание:")
37 image = models.ImageField(null=True, blank=True, verbose_name="Изображение")
38 novinki = models.BooleanField(default=False, verbose_name="Новинки")
39 popularnye = models.BooleanField(default=False, verbose_name="Популарные")
40 def __str__(self):
41 return self.name
42
43 class Meta:
44 verbose_name = 'Продукты'
45 verbose_name_plural = "Продукты"
46
47
48 @property
49 def imageURL(self):
50 try:
51 url = self.image.url
52 except:
53 url = ''
54 return url
55def category_detail(request, slug):
56 data = cartData(request)
57
58 cartItems = data['cartItems']
59 order = data['order']
60 items = data['items']
61 categories_for_menu = Category.objects.filter(parent=None)[:3]
62 categories = Category.objects.filter(parent=None)
63 category = get_object_or_404(Category, slug=slug)
64 **products_all = Product.objects.filter(category.parent==category)**
65
66 print(products_all)
67
68 products = category.products.all()
69 context = {'items' : items, 'order' : order, 'cartItems' : cartItems, 'products':products, 'category':category, 'categories':categories,'categories_for_menu':categories_for_menu,'products_all':products_all}
70
71 return render(request, "store/categories.html", context)
72from django.db.models import Q
73
74category = get_object_or_404(Category, slug=slug)
75products = Product.objects.filter(Q(category = category)|Q(category__parent = category))
76
QUESTION
UseParams() not working and not rendering data on screen
Asked 2022-Feb-17 at 08:58I am working on an eCommerce website and I am stuck . I am mapping through a array and it renders Image and a link . I want to click the link(checkitem) on image and it should open the Image and detail in different page but its not working. I am using reactrouter for it and passing the id of the image to useparams() in my Fullcard component . In my Full card component i am filtering and mapping the array according to the id of the image , but it seems to not work .Can you guys help me.
Here is the CodeSandboxLink of the project : https://codesandbox.io/s/strange-driscoll-gpl629?file=/src/App.js
Here is my Appjs :
1import Hero from './Hero';
2import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
3import FullCard from "./FullCard";
4function App() {
5
6 const data = [
7 {
8 burh: "1fdsd",
9 id: 1,
10 img: "https://d3o2e4jr3mxnm3.cloudfront.net/Mens-Jake-Guitar-Vintage-Crusher-Tee_68382_1_lg.png",
11 },
12 {
13 burh: "1fdsd",
14 id: 2,
15 img: "https://cdn.shopify.com/s/files/1/0101/4832/products/Angela_Natural_Tee.png?v=1606780388",
16 },
17 {
18 burh: "1fdsd",
19 id: 3,
20 img: "https://www.prada.com/content/dam/pradanux_products/U/UCS/UCS319/1YOTF010O/UCS319_1YOT_F010O_S_182_SLF.png",
21 },
22 {
23 burh: "1fdsd",
24 id: 4,
25 img: "https://www.burdastyle.com/pub/media/catalog/product/cache/7bd3727382ce0a860b68816435d76e26/107/BUS-PAT-BURTE-1320516/1170x1470_BS_2016_05_132_front.png",
26 },
27 ];
28
29
30
31
32 return (
33 <Router>
34 <Routes>
35 <Route path="/" element={<Hero data={data}/>} />
36 <Route path="/products/:id" element={ <FullCard data={data} />} />
37 </Routes>
38 </Router>
39 );
40}
41
42export default App;
43
Here is my Card:
1import Hero from './Hero';
2import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
3import FullCard from "./FullCard";
4function App() {
5
6 const data = [
7 {
8 burh: "1fdsd",
9 id: 1,
10 img: "https://d3o2e4jr3mxnm3.cloudfront.net/Mens-Jake-Guitar-Vintage-Crusher-Tee_68382_1_lg.png",
11 },
12 {
13 burh: "1fdsd",
14 id: 2,
15 img: "https://cdn.shopify.com/s/files/1/0101/4832/products/Angela_Natural_Tee.png?v=1606780388",
16 },
17 {
18 burh: "1fdsd",
19 id: 3,
20 img: "https://www.prada.com/content/dam/pradanux_products/U/UCS/UCS319/1YOTF010O/UCS319_1YOT_F010O_S_182_SLF.png",
21 },
22 {
23 burh: "1fdsd",
24 id: 4,
25 img: "https://www.burdastyle.com/pub/media/catalog/product/cache/7bd3727382ce0a860b68816435d76e26/107/BUS-PAT-BURTE-1320516/1170x1470_BS_2016_05_132_front.png",
26 },
27 ];
28
29
30
31
32 return (
33 <Router>
34 <Routes>
35 <Route path="/" element={<Hero data={data}/>} />
36 <Route path="/products/:id" element={ <FullCard data={data} />} />
37 </Routes>
38 </Router>
39 );
40}
41
42export default App;
43// import { popularProducts } from "./data";
44import { Link } from "react-router-dom";
45import "./Card.css";
46
47const Card = ({ data }) => {
48 return (
49 <div className="Maincontainer">
50 <div className="CardContainer">
51 {data.map((items, index) => {
52 return (
53 <div className="cards" key={index}>
54 <img src={items.img} alt="/" />
55
56 <Link to={`/products/${items.id}`}>CheckItem</Link>
57 </div>
58 );
59 })}
60 </div>
61 </div>
62 );
63};
64
65export default Card;
66
Here is my Full card comp:
1import Hero from './Hero';
2import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
3import FullCard from "./FullCard";
4function App() {
5
6 const data = [
7 {
8 burh: "1fdsd",
9 id: 1,
10 img: "https://d3o2e4jr3mxnm3.cloudfront.net/Mens-Jake-Guitar-Vintage-Crusher-Tee_68382_1_lg.png",
11 },
12 {
13 burh: "1fdsd",
14 id: 2,
15 img: "https://cdn.shopify.com/s/files/1/0101/4832/products/Angela_Natural_Tee.png?v=1606780388",
16 },
17 {
18 burh: "1fdsd",
19 id: 3,
20 img: "https://www.prada.com/content/dam/pradanux_products/U/UCS/UCS319/1YOTF010O/UCS319_1YOT_F010O_S_182_SLF.png",
21 },
22 {
23 burh: "1fdsd",
24 id: 4,
25 img: "https://www.burdastyle.com/pub/media/catalog/product/cache/7bd3727382ce0a860b68816435d76e26/107/BUS-PAT-BURTE-1320516/1170x1470_BS_2016_05_132_front.png",
26 },
27 ];
28
29
30
31
32 return (
33 <Router>
34 <Routes>
35 <Route path="/" element={<Hero data={data}/>} />
36 <Route path="/products/:id" element={ <FullCard data={data} />} />
37 </Routes>
38 </Router>
39 );
40}
41
42export default App;
43// import { popularProducts } from "./data";
44import { Link } from "react-router-dom";
45import "./Card.css";
46
47const Card = ({ data }) => {
48 return (
49 <div className="Maincontainer">
50 <div className="CardContainer">
51 {data.map((items, index) => {
52 return (
53 <div className="cards" key={index}>
54 <img src={items.img} alt="/" />
55
56 <Link to={`/products/${items.id}`}>CheckItem</Link>
57 </div>
58 );
59 })}
60 </div>
61 </div>
62 );
63};
64
65export default Card;
66import { useParams } from 'react-router-dom'
67
68const FullCard = ({data}) => {
69
70 const {id} = useParams();
71
72
73 return (
74 <div className='container'>
75 {data.filter( (items )=> items.id === id ).map((items,index) =>{
76 return (
77 <div key={items} className="container2">
78 <h1>{items.burh}</h1>
79 {/* <img src={items.image} alt="/" /> */}
80 </div>
81 );
82 })}
83 </div>
84 )
85}
86
ANSWER
Answered 2022-Feb-17 at 06:32The id
properties in data
are number types, but the id
route match param will be a string. The data filtering in FullCard
is failing because you are using strict equality, which requires both operands to be of the same type. In this case, either both numbers or both strings.
1import Hero from './Hero';
2import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
3import FullCard from "./FullCard";
4function App() {
5
6 const data = [
7 {
8 burh: "1fdsd",
9 id: 1,
10 img: "https://d3o2e4jr3mxnm3.cloudfront.net/Mens-Jake-Guitar-Vintage-Crusher-Tee_68382_1_lg.png",
11 },
12 {
13 burh: "1fdsd",
14 id: 2,
15 img: "https://cdn.shopify.com/s/files/1/0101/4832/products/Angela_Natural_Tee.png?v=1606780388",
16 },
17 {
18 burh: "1fdsd",
19 id: 3,
20 img: "https://www.prada.com/content/dam/pradanux_products/U/UCS/UCS319/1YOTF010O/UCS319_1YOT_F010O_S_182_SLF.png",
21 },
22 {
23 burh: "1fdsd",
24 id: 4,
25 img: "https://www.burdastyle.com/pub/media/catalog/product/cache/7bd3727382ce0a860b68816435d76e26/107/BUS-PAT-BURTE-1320516/1170x1470_BS_2016_05_132_front.png",
26 },
27 ];
28
29
30
31
32 return (
33 <Router>
34 <Routes>
35 <Route path="/" element={<Hero data={data}/>} />
36 <Route path="/products/:id" element={ <FullCard data={data} />} />
37 </Routes>
38 </Router>
39 );
40}
41
42export default App;
43// import { popularProducts } from "./data";
44import { Link } from "react-router-dom";
45import "./Card.css";
46
47const Card = ({ data }) => {
48 return (
49 <div className="Maincontainer">
50 <div className="CardContainer">
51 {data.map((items, index) => {
52 return (
53 <div className="cards" key={index}>
54 <img src={items.img} alt="/" />
55
56 <Link to={`/products/${items.id}`}>CheckItem</Link>
57 </div>
58 );
59 })}
60 </div>
61 </div>
62 );
63};
64
65export default Card;
66import { useParams } from 'react-router-dom'
67
68const FullCard = ({data}) => {
69
70 const {id} = useParams();
71
72
73 return (
74 <div className='container'>
75 {data.filter( (items )=> items.id === id ).map((items,index) =>{
76 return (
77 <div key={items} className="container2">
78 <h1>{items.burh}</h1>
79 {/* <img src={items.image} alt="/" /> */}
80 </div>
81 );
82 })}
83 </div>
84 )
85}
86{data
87 .filter((items) => items.id === id) // <-- type mismatch comparision
88 .map((items, index) => {
89 return (
90 <div key={items.id} className="container2">
91 <h1>{items.burh}</h1>
92 {/* <img src={items.image} alt="/" /> */}
93 </div>
94 );
95 })}
96
Either use loose equality, i.e. ==
so type coercion/conversion is attempted in determining equality
1import Hero from './Hero';
2import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
3import FullCard from "./FullCard";
4function App() {
5
6 const data = [
7 {
8 burh: "1fdsd",
9 id: 1,
10 img: "https://d3o2e4jr3mxnm3.cloudfront.net/Mens-Jake-Guitar-Vintage-Crusher-Tee_68382_1_lg.png",
11 },
12 {
13 burh: "1fdsd",
14 id: 2,
15 img: "https://cdn.shopify.com/s/files/1/0101/4832/products/Angela_Natural_Tee.png?v=1606780388",
16 },
17 {
18 burh: "1fdsd",
19 id: 3,
20 img: "https://www.prada.com/content/dam/pradanux_products/U/UCS/UCS319/1YOTF010O/UCS319_1YOT_F010O_S_182_SLF.png",
21 },
22 {
23 burh: "1fdsd",
24 id: 4,
25 img: "https://www.burdastyle.com/pub/media/catalog/product/cache/7bd3727382ce0a860b68816435d76e26/107/BUS-PAT-BURTE-1320516/1170x1470_BS_2016_05_132_front.png",
26 },
27 ];
28
29
30
31
32 return (
33 <Router>
34 <Routes>
35 <Route path="/" element={<Hero data={data}/>} />
36 <Route path="/products/:id" element={ <FullCard data={data} />} />
37 </Routes>
38 </Router>
39 );
40}
41
42export default App;
43// import { popularProducts } from "./data";
44import { Link } from "react-router-dom";
45import "./Card.css";
46
47const Card = ({ data }) => {
48 return (
49 <div className="Maincontainer">
50 <div className="CardContainer">
51 {data.map((items, index) => {
52 return (
53 <div className="cards" key={index}>
54 <img src={items.img} alt="/" />
55
56 <Link to={`/products/${items.id}`}>CheckItem</Link>
57 </div>
58 );
59 })}
60 </div>
61 </div>
62 );
63};
64
65export default Card;
66import { useParams } from 'react-router-dom'
67
68const FullCard = ({data}) => {
69
70 const {id} = useParams();
71
72
73 return (
74 <div className='container'>
75 {data.filter( (items )=> items.id === id ).map((items,index) =>{
76 return (
77 <div key={items} className="container2">
78 <h1>{items.burh}</h1>
79 {/* <img src={items.image} alt="/" /> */}
80 </div>
81 );
82 })}
83 </div>
84 )
85}
86{data
87 .filter((items) => items.id === id) // <-- type mismatch comparision
88 .map((items, index) => {
89 return (
90 <div key={items.id} className="container2">
91 <h1>{items.burh}</h1>
92 {/* <img src={items.image} alt="/" /> */}
93 </div>
94 );
95 })}
96.filter((items) => items.id == id)
97
or convert the items.id
to a string and use string equality
1import Hero from './Hero';
2import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
3import FullCard from "./FullCard";
4function App() {
5
6 const data = [
7 {
8 burh: "1fdsd",
9 id: 1,
10 img: "https://d3o2e4jr3mxnm3.cloudfront.net/Mens-Jake-Guitar-Vintage-Crusher-Tee_68382_1_lg.png",
11 },
12 {
13 burh: "1fdsd",
14 id: 2,
15 img: "https://cdn.shopify.com/s/files/1/0101/4832/products/Angela_Natural_Tee.png?v=1606780388",
16 },
17 {
18 burh: "1fdsd",
19 id: 3,
20 img: "https://www.prada.com/content/dam/pradanux_products/U/UCS/UCS319/1YOTF010O/UCS319_1YOT_F010O_S_182_SLF.png",
21 },
22 {
23 burh: "1fdsd",
24 id: 4,
25 img: "https://www.burdastyle.com/pub/media/catalog/product/cache/7bd3727382ce0a860b68816435d76e26/107/BUS-PAT-BURTE-1320516/1170x1470_BS_2016_05_132_front.png",
26 },
27 ];
28
29
30
31
32 return (
33 <Router>
34 <Routes>
35 <Route path="/" element={<Hero data={data}/>} />
36 <Route path="/products/:id" element={ <FullCard data={data} />} />
37 </Routes>
38 </Router>
39 );
40}
41
42export default App;
43// import { popularProducts } from "./data";
44import { Link } from "react-router-dom";
45import "./Card.css";
46
47const Card = ({ data }) => {
48 return (
49 <div className="Maincontainer">
50 <div className="CardContainer">
51 {data.map((items, index) => {
52 return (
53 <div className="cards" key={index}>
54 <img src={items.img} alt="/" />
55
56 <Link to={`/products/${items.id}`}>CheckItem</Link>
57 </div>
58 );
59 })}
60 </div>
61 </div>
62 );
63};
64
65export default Card;
66import { useParams } from 'react-router-dom'
67
68const FullCard = ({data}) => {
69
70 const {id} = useParams();
71
72
73 return (
74 <div className='container'>
75 {data.filter( (items )=> items.id === id ).map((items,index) =>{
76 return (
77 <div key={items} className="container2">
78 <h1>{items.burh}</h1>
79 {/* <img src={items.image} alt="/" /> */}
80 </div>
81 );
82 })}
83 </div>
84 )
85}
86{data
87 .filter((items) => items.id === id) // <-- type mismatch comparision
88 .map((items, index) => {
89 return (
90 <div key={items.id} className="container2">
91 <h1>{items.burh}</h1>
92 {/* <img src={items.image} alt="/" /> */}
93 </div>
94 );
95 })}
96.filter((items) => items.id == id)
97.filter((items) => String(items.id) === id)
98
QUESTION
Problem with create table Category and get the url correctly PHP
Asked 2022-Feb-03 at 07:22I am creating an ecommerce, which can have Men's Fashion, Women's Fashion or Children's Fashion, it could also have more in the fure like Sports, Electronics, etc.
But I don't know if I have, for example, to repeat the categories clothes, etc for each one or not, I don't know if there is a better way. Since I must also create the dynamic menu
My table structure is like this:
1CREATE TABLE `category`(
2 `category_id` smallint(3) unsigned not null auto_increment primary key,
3 `category_name` VARCHAR(40) NOT NULL,
4 `category_url` VARCHAR(40) NOT NULL,
5 `icon`varchar(150) default null,
6 `gender` enum('Men','Woman','Baby') default null,
7 `parent` INT DEFAULT NULL
8)engine=InnoDB default charset=utf8mb4 collate=utf8mb4_spanish_ci;
9
Some posible inserts what i want:
1CREATE TABLE `category`(
2 `category_id` smallint(3) unsigned not null auto_increment primary key,
3 `category_name` VARCHAR(40) NOT NULL,
4 `category_url` VARCHAR(40) NOT NULL,
5 `icon`varchar(150) default null,
6 `gender` enum('Men','Woman','Baby') default null,
7 `parent` INT DEFAULT NULL
8)engine=InnoDB default charset=utf8mb4 collate=utf8mb4_spanish_ci;
9INSERT INTO `category` (`category_id`, `category_name`, `category_url`, `icon`, `gender`, `parent`) VALUES
10-- Mens section
11(1, 'Mens Fashion', 'mens-fashion', null, null, null), -- Mens fasion
12-- clothes mens
13(2, 'Clothing', 'clothing', 'clothing.svg', null, 1), -- (level 2)
14(3, 'Shoes', 'Shoes', 'shoes.svg', null, 1), -- (level 2)
15(4, 'Complements', 'complements', 'complements.svg', null, 1), -- (level 2)
16
17(5, 'Shirts', 'shirts', null, null, 2), -- (level 3)
18(6, 'Casual shirts', 'casaul-shirts', null, null, 5), -- (level 4)
19(7, 'Suit shirts ', 'suit-shirts', null, null, 5), --(level 4)
20
21(8, 'Jeans', 'jeans', null, null, 2), -- (level 3)
22(9, 'Jeans skinny', 'jeans-skinny', null, null, 8), -- (level 4)
23(10, 'Jeans slim fit', 'jeans-slim-fit', null, null, 8), -- (level 4)
24
25(11, 'Underwear', 'Underwear', null, null, 2), -- (level 3)
26(12, 'Socks', 'socks', null, null, 11), -- (level 4)
27
28-- Woman section
29(13, 'Woman Fashion', 'woman-fasion', null, null, null), -- (level 1)
30-- Clothes woman
31(14, 'Clothing', 'clothing', 'clothing.svg', null, 13), -- (level 2)
32(15, 'Shoes', 'Shoes', 'shoes.svg', null, 13), -- (level 2)
33(16, 'Complements', 'complements', 'complements.svg', null, 13), -- (level 2)
34
35(17, 'Shirts', 'shirts', null, null, 13), -- (level 3)
36(18, 'Casual shirts', 'casaul-shirts', null, null, 17), -- (level 4)
37(19, 'Suit shirts', 'suit-shirts', null, null, 17), -- (level 4)
38(20, 'Top shirt', 'top-shirt', null, null, 17), -- (level 4)
39
40(21, 'Jeans', 'jeans', null, null, 13), -- (level 3)
41(22, 'Jeans skinny', 'jeans-skinny', null, null, 21), -- (level 4)
42(23, 'Jeans slim fit', 'jeans-slim-fit', null, null, 21), -- (level 4)
43
44(24, 'Underwear', 'Underwear', null, null, 13), -- (level 3)
45(25, 'Socks', 'socks', null, null, 24), -- (level 4)
46
47-- Childeren section
48(13, 'Childerens Fasion', 'childeren-fashion', null, null, null), -- (level 1)
49-- Clothes childeren etc..
50
It's that ok what I'm doing, repeat for each section the same categories as clothes, Jeans, etc.?
I really do this because otherwise I don't know how to create the menu gives the image that I leave below
Another question i have.
I am creating this menu, with said table, which is what I want to obtain.
Is there any way to get the url in this way:
mens-fashion/clothing/shirts
because for example shirts would be the url above.
So what i mean, if the category is level 4, the url would be: level1/level2/level3/level4.
What would be better:
To add it directly to my table the absolute path or
can i do that with PHP, i leave the code that I am using.
1CREATE TABLE `category`(
2 `category_id` smallint(3) unsigned not null auto_increment primary key,
3 `category_name` VARCHAR(40) NOT NULL,
4 `category_url` VARCHAR(40) NOT NULL,
5 `icon`varchar(150) default null,
6 `gender` enum('Men','Woman','Baby') default null,
7 `parent` INT DEFAULT NULL
8)engine=InnoDB default charset=utf8mb4 collate=utf8mb4_spanish_ci;
9INSERT INTO `category` (`category_id`, `category_name`, `category_url`, `icon`, `gender`, `parent`) VALUES
10-- Mens section
11(1, 'Mens Fashion', 'mens-fashion', null, null, null), -- Mens fasion
12-- clothes mens
13(2, 'Clothing', 'clothing', 'clothing.svg', null, 1), -- (level 2)
14(3, 'Shoes', 'Shoes', 'shoes.svg', null, 1), -- (level 2)
15(4, 'Complements', 'complements', 'complements.svg', null, 1), -- (level 2)
16
17(5, 'Shirts', 'shirts', null, null, 2), -- (level 3)
18(6, 'Casual shirts', 'casaul-shirts', null, null, 5), -- (level 4)
19(7, 'Suit shirts ', 'suit-shirts', null, null, 5), --(level 4)
20
21(8, 'Jeans', 'jeans', null, null, 2), -- (level 3)
22(9, 'Jeans skinny', 'jeans-skinny', null, null, 8), -- (level 4)
23(10, 'Jeans slim fit', 'jeans-slim-fit', null, null, 8), -- (level 4)
24
25(11, 'Underwear', 'Underwear', null, null, 2), -- (level 3)
26(12, 'Socks', 'socks', null, null, 11), -- (level 4)
27
28-- Woman section
29(13, 'Woman Fashion', 'woman-fasion', null, null, null), -- (level 1)
30-- Clothes woman
31(14, 'Clothing', 'clothing', 'clothing.svg', null, 13), -- (level 2)
32(15, 'Shoes', 'Shoes', 'shoes.svg', null, 13), -- (level 2)
33(16, 'Complements', 'complements', 'complements.svg', null, 13), -- (level 2)
34
35(17, 'Shirts', 'shirts', null, null, 13), -- (level 3)
36(18, 'Casual shirts', 'casaul-shirts', null, null, 17), -- (level 4)
37(19, 'Suit shirts', 'suit-shirts', null, null, 17), -- (level 4)
38(20, 'Top shirt', 'top-shirt', null, null, 17), -- (level 4)
39
40(21, 'Jeans', 'jeans', null, null, 13), -- (level 3)
41(22, 'Jeans skinny', 'jeans-skinny', null, null, 21), -- (level 4)
42(23, 'Jeans slim fit', 'jeans-slim-fit', null, null, 21), -- (level 4)
43
44(24, 'Underwear', 'Underwear', null, null, 13), -- (level 3)
45(25, 'Socks', 'socks', null, null, 24), -- (level 4)
46
47-- Childeren section
48(13, 'Childerens Fasion', 'childeren-fashion', null, null, null), -- (level 1)
49-- Clothes childeren etc..
50$categories = $db->query('SELECT category_id, category_url, parent, category_name FROM category ORDER BY category_id');
51$cat = $categories->fetchAll(PDO::FETCH_ASSOC);
52
53$arrayMenu = array();
54
55foreach($cat as $row){
56$arrayMenu[$row['category_id']] = array("parent" => $row['parent'], "category_name" => $row['category_name'], "category_url" => $row['category_url']);
57}
58
59function createTree($array, $curParent, $currLevel = 0, $prevLevel = -1) {
60
61 foreach ($array as $categoryId => $category) :
62
63 if ($curParent == $category['parent']) :
64
65 if($category['parent']==0) $class="dropdown"; else $class="sub_menu";
66 if ($currLevel > $prevLevel) echo " <ul class='$class'> ";
67
68
69 if ($currLevel == $prevLevel) echo " </li> ";
70
71 echo '<li id="'.$categoryId.'" ><a href="'.$category['category_url'].'">'.$category['category_name'].'</a>';
72
73 if ($currLevel > $prevLevel) { $prevLevel = $currLevel; }
74
75 $currLevel++;
76
77 createTree ($array, $categoryId, $currLevel, $prevLevel);
78
79 $currLevel--;
80 endif;
81 endforeach;
82
83 if ($currLevel == $prevLevel) echo " </li> </ul> ";
84}
85?>
86<div class="nav">
87<?php
88if ($cat != null) createTree($arrayMenu, 0);
89?>
90
I tried to add this line to get, for example, the level 1 url, but it doesn't:
$url_level1 = ($row['parent'] == 0) ? $row['category_url'] : '';
Edit:
The css with which I was testing: (It doesn't really have styles and it's outdated)
1CREATE TABLE `category`(
2 `category_id` smallint(3) unsigned not null auto_increment primary key,
3 `category_name` VARCHAR(40) NOT NULL,
4 `category_url` VARCHAR(40) NOT NULL,
5 `icon`varchar(150) default null,
6 `gender` enum('Men','Woman','Baby') default null,
7 `parent` INT DEFAULT NULL
8)engine=InnoDB default charset=utf8mb4 collate=utf8mb4_spanish_ci;
9INSERT INTO `category` (`category_id`, `category_name`, `category_url`, `icon`, `gender`, `parent`) VALUES
10-- Mens section
11(1, 'Mens Fashion', 'mens-fashion', null, null, null), -- Mens fasion
12-- clothes mens
13(2, 'Clothing', 'clothing', 'clothing.svg', null, 1), -- (level 2)
14(3, 'Shoes', 'Shoes', 'shoes.svg', null, 1), -- (level 2)
15(4, 'Complements', 'complements', 'complements.svg', null, 1), -- (level 2)
16
17(5, 'Shirts', 'shirts', null, null, 2), -- (level 3)
18(6, 'Casual shirts', 'casaul-shirts', null, null, 5), -- (level 4)
19(7, 'Suit shirts ', 'suit-shirts', null, null, 5), --(level 4)
20
21(8, 'Jeans', 'jeans', null, null, 2), -- (level 3)
22(9, 'Jeans skinny', 'jeans-skinny', null, null, 8), -- (level 4)
23(10, 'Jeans slim fit', 'jeans-slim-fit', null, null, 8), -- (level 4)
24
25(11, 'Underwear', 'Underwear', null, null, 2), -- (level 3)
26(12, 'Socks', 'socks', null, null, 11), -- (level 4)
27
28-- Woman section
29(13, 'Woman Fashion', 'woman-fasion', null, null, null), -- (level 1)
30-- Clothes woman
31(14, 'Clothing', 'clothing', 'clothing.svg', null, 13), -- (level 2)
32(15, 'Shoes', 'Shoes', 'shoes.svg', null, 13), -- (level 2)
33(16, 'Complements', 'complements', 'complements.svg', null, 13), -- (level 2)
34
35(17, 'Shirts', 'shirts', null, null, 13), -- (level 3)
36(18, 'Casual shirts', 'casaul-shirts', null, null, 17), -- (level 4)
37(19, 'Suit shirts', 'suit-shirts', null, null, 17), -- (level 4)
38(20, 'Top shirt', 'top-shirt', null, null, 17), -- (level 4)
39
40(21, 'Jeans', 'jeans', null, null, 13), -- (level 3)
41(22, 'Jeans skinny', 'jeans-skinny', null, null, 21), -- (level 4)
42(23, 'Jeans slim fit', 'jeans-slim-fit', null, null, 21), -- (level 4)
43
44(24, 'Underwear', 'Underwear', null, null, 13), -- (level 3)
45(25, 'Socks', 'socks', null, null, 24), -- (level 4)
46
47-- Childeren section
48(13, 'Childerens Fasion', 'childeren-fashion', null, null, null), -- (level 1)
49-- Clothes childeren etc..
50$categories = $db->query('SELECT category_id, category_url, parent, category_name FROM category ORDER BY category_id');
51$cat = $categories->fetchAll(PDO::FETCH_ASSOC);
52
53$arrayMenu = array();
54
55foreach($cat as $row){
56$arrayMenu[$row['category_id']] = array("parent" => $row['parent'], "category_name" => $row['category_name'], "category_url" => $row['category_url']);
57}
58
59function createTree($array, $curParent, $currLevel = 0, $prevLevel = -1) {
60
61 foreach ($array as $categoryId => $category) :
62
63 if ($curParent == $category['parent']) :
64
65 if($category['parent']==0) $class="dropdown"; else $class="sub_menu";
66 if ($currLevel > $prevLevel) echo " <ul class='$class'> ";
67
68
69 if ($currLevel == $prevLevel) echo " </li> ";
70
71 echo '<li id="'.$categoryId.'" ><a href="'.$category['category_url'].'">'.$category['category_name'].'</a>';
72
73 if ($currLevel > $prevLevel) { $prevLevel = $currLevel; }
74
75 $currLevel++;
76
77 createTree ($array, $categoryId, $currLevel, $prevLevel);
78
79 $currLevel--;
80 endif;
81 endforeach;
82
83 if ($currLevel == $prevLevel) echo " </li> </ul> ";
84}
85?>
86<div class="nav">
87<?php
88if ($cat != null) createTree($arrayMenu, 0);
89?>
90nav ul li {
91 background:#f1f1f1; list-style: none;
92}
93ul.dropdown {
94 position:relative;
95 width:auto;
96 font:12px Arial, Helvetica, sans-serif;
97}
98ul.dropdown li {
99 float:left; zoom:1;
100 height:auto;
101 min-height: 30px;
102 padding:6px 2px 0 2px;
103}
104
105ul.dropdown li li {
106 border-right:1px solid #ccc;
107 border-left:1px solid #ccc;
108 margin-left:-30px;
109}
110ul.dropdown a:hover {
111 color:#000;
112}
113ul.dropdown a:active { color:#ffa500; }
114
115ul.dropdown li a {
116 display:block;
117 padding:4px 8px;
118 color:#000;
119 text-decoration:none;
120 font:bold 12px Arial, Helvetica, sans-serif;
121}
122
123ul.dropdown li:last-child a { border-right:none;} /* Doesn't work in IE */
124ul.dropdown li:hover {
125 color:#000;
126 background:#e7e7e7;
127 position:relative; }
128ul.dropdown li.hover a { color:#000; }
129ul.dropdown ul {
130 text-align:left;
131 visibility: hidden;
132 position: absolute;
133 left:-10px;
134 top:36px; }
135ul.dropdown ul li {
136 background:#f1f1f1;
137 border-bottom:1px solid #ccc;
138 float:none; width:120px;
139 height:auto;
140 min-height: 25px;
141}
142ul.dropdown ul li a {
143 border-right:none;
144 width:100%;
145 display:inline-block; color:#000; }
146ul.dropdown ul ul {
147 left:100%;
148 top:0;
149}
150ul.dropdown li:hover > ul { visibility:visible; }
151
Note: What I realy was creating was something like this:
1CREATE TABLE `category`(
2 `category_id` smallint(3) unsigned not null auto_increment primary key,
3 `category_name` VARCHAR(40) NOT NULL,
4 `category_url` VARCHAR(40) NOT NULL,
5 `icon`varchar(150) default null,
6 `gender` enum('Men','Woman','Baby') default null,
7 `parent` INT DEFAULT NULL
8)engine=InnoDB default charset=utf8mb4 collate=utf8mb4_spanish_ci;
9INSERT INTO `category` (`category_id`, `category_name`, `category_url`, `icon`, `gender`, `parent`) VALUES
10-- Mens section
11(1, 'Mens Fashion', 'mens-fashion', null, null, null), -- Mens fasion
12-- clothes mens
13(2, 'Clothing', 'clothing', 'clothing.svg', null, 1), -- (level 2)
14(3, 'Shoes', 'Shoes', 'shoes.svg', null, 1), -- (level 2)
15(4, 'Complements', 'complements', 'complements.svg', null, 1), -- (level 2)
16
17(5, 'Shirts', 'shirts', null, null, 2), -- (level 3)
18(6, 'Casual shirts', 'casaul-shirts', null, null, 5), -- (level 4)
19(7, 'Suit shirts ', 'suit-shirts', null, null, 5), --(level 4)
20
21(8, 'Jeans', 'jeans', null, null, 2), -- (level 3)
22(9, 'Jeans skinny', 'jeans-skinny', null, null, 8), -- (level 4)
23(10, 'Jeans slim fit', 'jeans-slim-fit', null, null, 8), -- (level 4)
24
25(11, 'Underwear', 'Underwear', null, null, 2), -- (level 3)
26(12, 'Socks', 'socks', null, null, 11), -- (level 4)
27
28-- Woman section
29(13, 'Woman Fashion', 'woman-fasion', null, null, null), -- (level 1)
30-- Clothes woman
31(14, 'Clothing', 'clothing', 'clothing.svg', null, 13), -- (level 2)
32(15, 'Shoes', 'Shoes', 'shoes.svg', null, 13), -- (level 2)
33(16, 'Complements', 'complements', 'complements.svg', null, 13), -- (level 2)
34
35(17, 'Shirts', 'shirts', null, null, 13), -- (level 3)
36(18, 'Casual shirts', 'casaul-shirts', null, null, 17), -- (level 4)
37(19, 'Suit shirts', 'suit-shirts', null, null, 17), -- (level 4)
38(20, 'Top shirt', 'top-shirt', null, null, 17), -- (level 4)
39
40(21, 'Jeans', 'jeans', null, null, 13), -- (level 3)
41(22, 'Jeans skinny', 'jeans-skinny', null, null, 21), -- (level 4)
42(23, 'Jeans slim fit', 'jeans-slim-fit', null, null, 21), -- (level 4)
43
44(24, 'Underwear', 'Underwear', null, null, 13), -- (level 3)
45(25, 'Socks', 'socks', null, null, 24), -- (level 4)
46
47-- Childeren section
48(13, 'Childerens Fasion', 'childeren-fashion', null, null, null), -- (level 1)
49-- Clothes childeren etc..
50$categories = $db->query('SELECT category_id, category_url, parent, category_name FROM category ORDER BY category_id');
51$cat = $categories->fetchAll(PDO::FETCH_ASSOC);
52
53$arrayMenu = array();
54
55foreach($cat as $row){
56$arrayMenu[$row['category_id']] = array("parent" => $row['parent'], "category_name" => $row['category_name'], "category_url" => $row['category_url']);
57}
58
59function createTree($array, $curParent, $currLevel = 0, $prevLevel = -1) {
60
61 foreach ($array as $categoryId => $category) :
62
63 if ($curParent == $category['parent']) :
64
65 if($category['parent']==0) $class="dropdown"; else $class="sub_menu";
66 if ($currLevel > $prevLevel) echo " <ul class='$class'> ";
67
68
69 if ($currLevel == $prevLevel) echo " </li> ";
70
71 echo '<li id="'.$categoryId.'" ><a href="'.$category['category_url'].'">'.$category['category_name'].'</a>';
72
73 if ($currLevel > $prevLevel) { $prevLevel = $currLevel; }
74
75 $currLevel++;
76
77 createTree ($array, $categoryId, $currLevel, $prevLevel);
78
79 $currLevel--;
80 endif;
81 endforeach;
82
83 if ($currLevel == $prevLevel) echo " </li> </ul> ";
84}
85?>
86<div class="nav">
87<?php
88if ($cat != null) createTree($arrayMenu, 0);
89?>
90nav ul li {
91 background:#f1f1f1; list-style: none;
92}
93ul.dropdown {
94 position:relative;
95 width:auto;
96 font:12px Arial, Helvetica, sans-serif;
97}
98ul.dropdown li {
99 float:left; zoom:1;
100 height:auto;
101 min-height: 30px;
102 padding:6px 2px 0 2px;
103}
104
105ul.dropdown li li {
106 border-right:1px solid #ccc;
107 border-left:1px solid #ccc;
108 margin-left:-30px;
109}
110ul.dropdown a:hover {
111 color:#000;
112}
113ul.dropdown a:active { color:#ffa500; }
114
115ul.dropdown li a {
116 display:block;
117 padding:4px 8px;
118 color:#000;
119 text-decoration:none;
120 font:bold 12px Arial, Helvetica, sans-serif;
121}
122
123ul.dropdown li:last-child a { border-right:none;} /* Doesn't work in IE */
124ul.dropdown li:hover {
125 color:#000;
126 background:#e7e7e7;
127 position:relative; }
128ul.dropdown li.hover a { color:#000; }
129ul.dropdown ul {
130 text-align:left;
131 visibility: hidden;
132 position: absolute;
133 left:-10px;
134 top:36px; }
135ul.dropdown ul li {
136 background:#f1f1f1;
137 border-bottom:1px solid #ccc;
138 float:none; width:120px;
139 height:auto;
140 min-height: 25px;
141}
142ul.dropdown ul li a {
143 border-right:none;
144 width:100%;
145 display:inline-block; color:#000; }
146ul.dropdown ul ul {
147 left:100%;
148 top:0;
149}
150ul.dropdown li:hover > ul { visibility:visible; }
151// Tab header ///////
152function openPage(pageName, elmnt, color) {
153 // Hide all elements with class="tabcontent" by default */
154 var i, tabcontent, tablinks;
155 tabcontent = document.getElementsByClassName("tabcontent");
156 for (i = 0; i < tabcontent.length; i++) {
157 tabcontent[i].style.display = "none";
158 }
159
160 // Remove the background color of all tablinks/buttons
161 tablinks = document.getElementsByClassName("tablink");
162 for (i = 0; i < tablinks.length; i++) {
163 tablinks[i].style.background = "";
164 }
165
166 // Show the specific tab content
167 document.getElementById(pageName).style.display = "block";
168
169 // Add the specific color to the button used to open the tab content
170 elmnt.style.background = color;
171}
172
173// Get the element with id="defaultOpen" and click on it
174document.getElementById("defaultOpen").click();
175
176
177// Accordion ///////
178var acc = document.getElementsByClassName("accordion");
179var i;
180
181for (i = 0; i < acc.length; i++) {
182 acc[i].addEventListener("click", function() {
183 this.classList.toggle("active");
184 var panel = this.nextElementSibling;
185 if (panel.style.maxHeight) {
186 panel.style.maxHeight = null;
187 } else {
188 panel.style.maxHeight = panel.scrollHeight + "px";
189 }
190 });
191}
1CREATE TABLE `category`(
2 `category_id` smallint(3) unsigned not null auto_increment primary key,
3 `category_name` VARCHAR(40) NOT NULL,
4 `category_url` VARCHAR(40) NOT NULL,
5 `icon`varchar(150) default null,
6 `gender` enum('Men','Woman','Baby') default null,
7 `parent` INT DEFAULT NULL
8)engine=InnoDB default charset=utf8mb4 collate=utf8mb4_spanish_ci;
9INSERT INTO `category` (`category_id`, `category_name`, `category_url`, `icon`, `gender`, `parent`) VALUES
10-- Mens section
11(1, 'Mens Fashion', 'mens-fashion', null, null, null), -- Mens fasion
12-- clothes mens
13(2, 'Clothing', 'clothing', 'clothing.svg', null, 1), -- (level 2)
14(3, 'Shoes', 'Shoes', 'shoes.svg', null, 1), -- (level 2)
15(4, 'Complements', 'complements', 'complements.svg', null, 1), -- (level 2)
16
17(5, 'Shirts', 'shirts', null, null, 2), -- (level 3)
18(6, 'Casual shirts', 'casaul-shirts', null, null, 5), -- (level 4)
19(7, 'Suit shirts ', 'suit-shirts', null, null, 5), --(level 4)
20
21(8, 'Jeans', 'jeans', null, null, 2), -- (level 3)
22(9, 'Jeans skinny', 'jeans-skinny', null, null, 8), -- (level 4)
23(10, 'Jeans slim fit', 'jeans-slim-fit', null, null, 8), -- (level 4)
24
25(11, 'Underwear', 'Underwear', null, null, 2), -- (level 3)
26(12, 'Socks', 'socks', null, null, 11), -- (level 4)
27
28-- Woman section
29(13, 'Woman Fashion', 'woman-fasion', null, null, null), -- (level 1)
30-- Clothes woman
31(14, 'Clothing', 'clothing', 'clothing.svg', null, 13), -- (level 2)
32(15, 'Shoes', 'Shoes', 'shoes.svg', null, 13), -- (level 2)
33(16, 'Complements', 'complements', 'complements.svg', null, 13), -- (level 2)
34
35(17, 'Shirts', 'shirts', null, null, 13), -- (level 3)
36(18, 'Casual shirts', 'casaul-shirts', null, null, 17), -- (level 4)
37(19, 'Suit shirts', 'suit-shirts', null, null, 17), -- (level 4)
38(20, 'Top shirt', 'top-shirt', null, null, 17), -- (level 4)
39
40(21, 'Jeans', 'jeans', null, null, 13), -- (level 3)
41(22, 'Jeans skinny', 'jeans-skinny', null, null, 21), -- (level 4)
42(23, 'Jeans slim fit', 'jeans-slim-fit', null, null, 21), -- (level 4)
43
44(24, 'Underwear', 'Underwear', null, null, 13), -- (level 3)
45(25, 'Socks', 'socks', null, null, 24), -- (level 4)
46
47-- Childeren section
48(13, 'Childerens Fasion', 'childeren-fashion', null, null, null), -- (level 1)
49-- Clothes childeren etc..
50$categories = $db->query('SELECT category_id, category_url, parent, category_name FROM category ORDER BY category_id');
51$cat = $categories->fetchAll(PDO::FETCH_ASSOC);
52
53$arrayMenu = array();
54
55foreach($cat as $row){
56$arrayMenu[$row['category_id']] = array("parent" => $row['parent'], "category_name" => $row['category_name'], "category_url" => $row['category_url']);
57}
58
59function createTree($array, $curParent, $currLevel = 0, $prevLevel = -1) {
60
61 foreach ($array as $categoryId => $category) :
62
63 if ($curParent == $category['parent']) :
64
65 if($category['parent']==0) $class="dropdown"; else $class="sub_menu";
66 if ($currLevel > $prevLevel) echo " <ul class='$class'> ";
67
68
69 if ($currLevel == $prevLevel) echo " </li> ";
70
71 echo '<li id="'.$categoryId.'" ><a href="'.$category['category_url'].'">'.$category['category_name'].'</a>';
72
73 if ($currLevel > $prevLevel) { $prevLevel = $currLevel; }
74
75 $currLevel++;
76
77 createTree ($array, $categoryId, $currLevel, $prevLevel);
78
79 $currLevel--;
80 endif;
81 endforeach;
82
83 if ($currLevel == $prevLevel) echo " </li> </ul> ";
84}
85?>
86<div class="nav">
87<?php
88if ($cat != null) createTree($arrayMenu, 0);
89?>
90nav ul li {
91 background:#f1f1f1; list-style: none;
92}
93ul.dropdown {
94 position:relative;
95 width:auto;
96 font:12px Arial, Helvetica, sans-serif;
97}
98ul.dropdown li {
99 float:left; zoom:1;
100 height:auto;
101 min-height: 30px;
102 padding:6px 2px 0 2px;
103}
104
105ul.dropdown li li {
106 border-right:1px solid #ccc;
107 border-left:1px solid #ccc;
108 margin-left:-30px;
109}
110ul.dropdown a:hover {
111 color:#000;
112}
113ul.dropdown a:active { color:#ffa500; }
114
115ul.dropdown li a {
116 display:block;
117 padding:4px 8px;
118 color:#000;
119 text-decoration:none;
120 font:bold 12px Arial, Helvetica, sans-serif;
121}
122
123ul.dropdown li:last-child a { border-right:none;} /* Doesn't work in IE */
124ul.dropdown li:hover {
125 color:#000;
126 background:#e7e7e7;
127 position:relative; }
128ul.dropdown li.hover a { color:#000; }
129ul.dropdown ul {
130 text-align:left;
131 visibility: hidden;
132 position: absolute;
133 left:-10px;
134 top:36px; }
135ul.dropdown ul li {
136 background:#f1f1f1;
137 border-bottom:1px solid #ccc;
138 float:none; width:120px;
139 height:auto;
140 min-height: 25px;
141}
142ul.dropdown ul li a {
143 border-right:none;
144 width:100%;
145 display:inline-block; color:#000; }
146ul.dropdown ul ul {
147 left:100%;
148 top:0;
149}
150ul.dropdown li:hover > ul { visibility:visible; }
151// Tab header ///////
152function openPage(pageName, elmnt, color) {
153 // Hide all elements with class="tabcontent" by default */
154 var i, tabcontent, tablinks;
155 tabcontent = document.getElementsByClassName("tabcontent");
156 for (i = 0; i < tabcontent.length; i++) {
157 tabcontent[i].style.display = "none";
158 }
159
160 // Remove the background color of all tablinks/buttons
161 tablinks = document.getElementsByClassName("tablink");
162 for (i = 0; i < tablinks.length; i++) {
163 tablinks[i].style.background = "";
164 }
165
166 // Show the specific tab content
167 document.getElementById(pageName).style.display = "block";
168
169 // Add the specific color to the button used to open the tab content
170 elmnt.style.background = color;
171}
172
173// Get the element with id="defaultOpen" and click on it
174document.getElementById("defaultOpen").click();
175
176
177// Accordion ///////
178var acc = document.getElementsByClassName("accordion");
179var i;
180
181for (i = 0; i < acc.length; i++) {
182 acc[i].addEventListener("click", function() {
183 this.classList.toggle("active");
184 var panel = this.nextElementSibling;
185 if (panel.style.maxHeight) {
186 panel.style.maxHeight = null;
187 } else {
188 panel.style.maxHeight = panel.scrollHeight + "px";
189 }
190 });
191}/* TAB HEADER MENU */
192
193#wrapper-tablink {
194 display: flex;
195 flex-flow: row nowrap;
196 justify-content: center;
197 align-items: center;
198}
199
200
201/* Style tab links */
202
203.tablink {
204 background-color: #555;
205 color: white;
206 border: none;
207 outline: none;
208 cursor: pointer;
209 padding: 14px 16px;
210 font-size: 17px;
211 width: 25%;
212}
213
214.tablink:hover {
215 background-color: #777;
216}
217
218.tablink .active {
219 color: #000;
220}
221
222
223/* Style the tab content (and add height:100% for full page content) */
224
225.tabcontent {
226 color: white;
227 display: none;
228 padding: 100px 20px;
229 height: 100%;
230 overflow-y: auto;
231}
232
233
234/*
235#moda-mujer {background-color: var(--secundary-color);}
236#moda-hombre {background-color: #00cc99;}
237#electronica {background-color: #3399ff;}
238#cursos {background-color: #9933ff;}
239*/
240
241.wrapper-icons-bars {
242 display: flex;
243 flex-flow: row nowrap;
244 justify-content: center;
245 align-items: center;
246 margin: 10px 0 20px 0;
247}
248
249.wrapper-icons-bars a {
250 display: block;
251 position: relative;
252 background-color: #FFFFFF;
253 border-bottom: 3px solid var(--body-color);
254 border-right: 1px solid #F1F1F1;
255 padding: 20px;
256 transition: all 0.3s ease;
257}
258
259.wrapper-icons-bars a:hover {
260 display: block;
261 position: relative;
262 border-bottom: 3px solid var(--secundary-color);
263 padding: 25px;
264 transition: all 0.3s ease;
265}
266
267
268/* ACCORDIAN CONTENT */
269
270.wrapper-accordion {
271 display: flex;
272 justify-content: center;
273 width: 100%;
274 margin-bottom: 80px;
275}
276
277.accordion {
278 display: flex;
279 position: relative;
280 justify-content: center;
281 align-items: center;
282 background-color: #eee;
283 color: #444;
284 cursor: pointer;
285 padding: 18px;
286 width: 100%;
287 max-width: 500px;
288 min-width: 500px;
289 border: none;
290 text-align: left;
291 outline: none;
292 font-size: 15px;
293 transition: 0.4s;
294}
295
296.active,
297.accordion:hover {
298 background-color: #ccc;
299}
300
301.accordion:after {
302 content: '\002B';
303 color: #777;
304 font-weight: bold;
305 display: block;
306 position: absolute;
307 right: 25px;
308 margin-left: 5px;
309}
310
311.active:after {
312 content: "\2212";
313}
314
315.panel {
316 background-color: white;
317 color: var(--body-color);
318 max-height: 0;
319 width: 100%;
320 overflow: hidden;
321 transition: max-height 0.2s ease-out;
322}
323
324.inner-panel {
325 padding: 20px 20px;
326 width: 100%;
327 max-width: 500px;
328}
329
330.wrapper-accordion a {
331 color: var(--body-color);
332}
1CREATE TABLE `category`(
2 `category_id` smallint(3) unsigned not null auto_increment primary key,
3 `category_name` VARCHAR(40) NOT NULL,
4 `category_url` VARCHAR(40) NOT NULL,
5 `icon`varchar(150) default null,
6 `gender` enum('Men','Woman','Baby') default null,
7 `parent` INT DEFAULT NULL
8)engine=InnoDB default charset=utf8mb4 collate=utf8mb4_spanish_ci;
9INSERT INTO `category` (`category_id`, `category_name`, `category_url`, `icon`, `gender`, `parent`) VALUES
10-- Mens section
11(1, 'Mens Fashion', 'mens-fashion', null, null, null), -- Mens fasion
12-- clothes mens
13(2, 'Clothing', 'clothing', 'clothing.svg', null, 1), -- (level 2)
14(3, 'Shoes', 'Shoes', 'shoes.svg', null, 1), -- (level 2)
15(4, 'Complements', 'complements', 'complements.svg', null, 1), -- (level 2)
16
17(5, 'Shirts', 'shirts', null, null, 2), -- (level 3)
18(6, 'Casual shirts', 'casaul-shirts', null, null, 5), -- (level 4)
19(7, 'Suit shirts ', 'suit-shirts', null, null, 5), --(level 4)
20
21(8, 'Jeans', 'jeans', null, null, 2), -- (level 3)
22(9, 'Jeans skinny', 'jeans-skinny', null, null, 8), -- (level 4)
23(10, 'Jeans slim fit', 'jeans-slim-fit', null, null, 8), -- (level 4)
24
25(11, 'Underwear', 'Underwear', null, null, 2), -- (level 3)
26(12, 'Socks', 'socks', null, null, 11), -- (level 4)
27
28-- Woman section
29(13, 'Woman Fashion', 'woman-fasion', null, null, null), -- (level 1)
30-- Clothes woman
31(14, 'Clothing', 'clothing', 'clothing.svg', null, 13), -- (level 2)
32(15, 'Shoes', 'Shoes', 'shoes.svg', null, 13), -- (level 2)
33(16, 'Complements', 'complements', 'complements.svg', null, 13), -- (level 2)
34
35(17, 'Shirts', 'shirts', null, null, 13), -- (level 3)
36(18, 'Casual shirts', 'casaul-shirts', null, null, 17), -- (level 4)
37(19, 'Suit shirts', 'suit-shirts', null, null, 17), -- (level 4)
38(20, 'Top shirt', 'top-shirt', null, null, 17), -- (level 4)
39
40(21, 'Jeans', 'jeans', null, null, 13), -- (level 3)
41(22, 'Jeans skinny', 'jeans-skinny', null, null, 21), -- (level 4)
42(23, 'Jeans slim fit', 'jeans-slim-fit', null, null, 21), -- (level 4)
43
44(24, 'Underwear', 'Underwear', null, null, 13), -- (level 3)
45(25, 'Socks', 'socks', null, null, 24), -- (level 4)
46
47-- Childeren section
48(13, 'Childerens Fasion', 'childeren-fashion', null, null, null), -- (level 1)
49-- Clothes childeren etc..
50$categories = $db->query('SELECT category_id, category_url, parent, category_name FROM category ORDER BY category_id');
51$cat = $categories->fetchAll(PDO::FETCH_ASSOC);
52
53$arrayMenu = array();
54
55foreach($cat as $row){
56$arrayMenu[$row['category_id']] = array("parent" => $row['parent'], "category_name" => $row['category_name'], "category_url" => $row['category_url']);
57}
58
59function createTree($array, $curParent, $currLevel = 0, $prevLevel = -1) {
60
61 foreach ($array as $categoryId => $category) :
62
63 if ($curParent == $category['parent']) :
64
65 if($category['parent']==0) $class="dropdown"; else $class="sub_menu";
66 if ($currLevel > $prevLevel) echo " <ul class='$class'> ";
67
68
69 if ($currLevel == $prevLevel) echo " </li> ";
70
71 echo '<li id="'.$categoryId.'" ><a href="'.$category['category_url'].'">'.$category['category_name'].'</a>';
72
73 if ($currLevel > $prevLevel) { $prevLevel = $currLevel; }
74
75 $currLevel++;
76
77 createTree ($array, $categoryId, $currLevel, $prevLevel);
78
79 $currLevel--;
80 endif;
81 endforeach;
82
83 if ($currLevel == $prevLevel) echo " </li> </ul> ";
84}
85?>
86<div class="nav">
87<?php
88if ($cat != null) createTree($arrayMenu, 0);
89?>
90nav ul li {
91 background:#f1f1f1; list-style: none;
92}
93ul.dropdown {
94 position:relative;
95 width:auto;
96 font:12px Arial, Helvetica, sans-serif;
97}
98ul.dropdown li {
99 float:left; zoom:1;
100 height:auto;
101 min-height: 30px;
102 padding:6px 2px 0 2px;
103}
104
105ul.dropdown li li {
106 border-right:1px solid #ccc;
107 border-left:1px solid #ccc;
108 margin-left:-30px;
109}
110ul.dropdown a:hover {
111 color:#000;
112}
113ul.dropdown a:active { color:#ffa500; }
114
115ul.dropdown li a {
116 display:block;
117 padding:4px 8px;
118 color:#000;
119 text-decoration:none;
120 font:bold 12px Arial, Helvetica, sans-serif;
121}
122
123ul.dropdown li:last-child a { border-right:none;} /* Doesn't work in IE */
124ul.dropdown li:hover {
125 color:#000;
126 background:#e7e7e7;
127 position:relative; }
128ul.dropdown li.hover a { color:#000; }
129ul.dropdown ul {
130 text-align:left;
131 visibility: hidden;
132 position: absolute;
133 left:-10px;
134 top:36px; }
135ul.dropdown ul li {
136 background:#f1f1f1;
137 border-bottom:1px solid #ccc;
138 float:none; width:120px;
139 height:auto;
140 min-height: 25px;
141}
142ul.dropdown ul li a {
143 border-right:none;
144 width:100%;
145 display:inline-block; color:#000; }
146ul.dropdown ul ul {
147 left:100%;
148 top:0;
149}
150ul.dropdown li:hover > ul { visibility:visible; }
151// Tab header ///////
152function openPage(pageName, elmnt, color) {
153 // Hide all elements with class="tabcontent" by default */
154 var i, tabcontent, tablinks;
155 tabcontent = document.getElementsByClassName("tabcontent");
156 for (i = 0; i < tabcontent.length; i++) {
157 tabcontent[i].style.display = "none";
158 }
159
160 // Remove the background color of all tablinks/buttons
161 tablinks = document.getElementsByClassName("tablink");
162 for (i = 0; i < tablinks.length; i++) {
163 tablinks[i].style.background = "";
164 }
165
166 // Show the specific tab content
167 document.getElementById(pageName).style.display = "block";
168
169 // Add the specific color to the button used to open the tab content
170 elmnt.style.background = color;
171}
172
173// Get the element with id="defaultOpen" and click on it
174document.getElementById("defaultOpen").click();
175
176
177// Accordion ///////
178var acc = document.getElementsByClassName("accordion");
179var i;
180
181for (i = 0; i < acc.length; i++) {
182 acc[i].addEventListener("click", function() {
183 this.classList.toggle("active");
184 var panel = this.nextElementSibling;
185 if (panel.style.maxHeight) {
186 panel.style.maxHeight = null;
187 } else {
188 panel.style.maxHeight = panel.scrollHeight + "px";
189 }
190 });
191}/* TAB HEADER MENU */
192
193#wrapper-tablink {
194 display: flex;
195 flex-flow: row nowrap;
196 justify-content: center;
197 align-items: center;
198}
199
200
201/* Style tab links */
202
203.tablink {
204 background-color: #555;
205 color: white;
206 border: none;
207 outline: none;
208 cursor: pointer;
209 padding: 14px 16px;
210 font-size: 17px;
211 width: 25%;
212}
213
214.tablink:hover {
215 background-color: #777;
216}
217
218.tablink .active {
219 color: #000;
220}
221
222
223/* Style the tab content (and add height:100% for full page content) */
224
225.tabcontent {
226 color: white;
227 display: none;
228 padding: 100px 20px;
229 height: 100%;
230 overflow-y: auto;
231}
232
233
234/*
235#moda-mujer {background-color: var(--secundary-color);}
236#moda-hombre {background-color: #00cc99;}
237#electronica {background-color: #3399ff;}
238#cursos {background-color: #9933ff;}
239*/
240
241.wrapper-icons-bars {
242 display: flex;
243 flex-flow: row nowrap;
244 justify-content: center;
245 align-items: center;
246 margin: 10px 0 20px 0;
247}
248
249.wrapper-icons-bars a {
250 display: block;
251 position: relative;
252 background-color: #FFFFFF;
253 border-bottom: 3px solid var(--body-color);
254 border-right: 1px solid #F1F1F1;
255 padding: 20px;
256 transition: all 0.3s ease;
257}
258
259.wrapper-icons-bars a:hover {
260 display: block;
261 position: relative;
262 border-bottom: 3px solid var(--secundary-color);
263 padding: 25px;
264 transition: all 0.3s ease;
265}
266
267
268/* ACCORDIAN CONTENT */
269
270.wrapper-accordion {
271 display: flex;
272 justify-content: center;
273 width: 100%;
274 margin-bottom: 80px;
275}
276
277.accordion {
278 display: flex;
279 position: relative;
280 justify-content: center;
281 align-items: center;
282 background-color: #eee;
283 color: #444;
284 cursor: pointer;
285 padding: 18px;
286 width: 100%;
287 max-width: 500px;
288 min-width: 500px;
289 border: none;
290 text-align: left;
291 outline: none;
292 font-size: 15px;
293 transition: 0.4s;
294}
295
296.active,
297.accordion:hover {
298 background-color: #ccc;
299}
300
301.accordion:after {
302 content: '\002B';
303 color: #777;
304 font-weight: bold;
305 display: block;
306 position: absolute;
307 right: 25px;
308 margin-left: 5px;
309}
310
311.active:after {
312 content: "\2212";
313}
314
315.panel {
316 background-color: white;
317 color: var(--body-color);
318 max-height: 0;
319 width: 100%;
320 overflow: hidden;
321 transition: max-height 0.2s ease-out;
322}
323
324.inner-panel {
325 padding: 20px 20px;
326 width: 100%;
327 max-width: 500px;
328}
329
330.wrapper-accordion a {
331 color: var(--body-color);
332}<!-- Create Tab links header (Table: controllers) -->
333<div id="wrapper-tablink">
334 <button class="tablink" onclick="openPage('mens-fashion', this, 'blue')" id="defaultOpen">Mens Fashion</button>
335 <button class="tablink" onclick="openPage('womans-fashion', this, 'red')" id="defaultOpen">Womans Fashion</button>
336</div>
337
338<div id='mens-fashion' class='tabcontent' style='blue'>
339 <article class='wrapper-accordion'>
340 <div>
341 <h2><a href='mens-fashion/clothes'>Clothes</a></h2>
342 <div class='wrapper-icons-bars'>icons</div>
343 <button class='accordion active'>Clothes</button>
344 <div class='panel' style='max-height: 1000px;'>
345 <div class='inner-panel'>
346 <h5><a href='mens-fashion/clothes'>Clothes</a></h5>
347 <a>Tshirt </a>
348 </div>
349 </div>
350
351 <button class='accordion'>Shoes</button>
352 <div class='panel'>
353 <div class='inner-panel'>
354 <h5><a href='mens-fashion/shoes'>Shoes</a></h5>
355 <a>Deport shoes </a>
356 </div>
357 </div>
358
359 <button class='accordion'>Complements</button>
360 <div class='panel'>
361 <div class='inner-panel'>
362 <h5><a href='mens-fashion/complemnts'>Shoes</a></h5>
363 <a>Clock </a>
364 </div>
365 </div>
366 </div>
367 </article>
368
369</div>
370
371<div id='womans-fashion' class='tabcontent' style='red'>
372 <article class='wrapper-accordion'>
373 <div>
374 <h2><a href='womans-fashion/clothes'>Clothes</a></h2>
375 <div class='wrapper-icons-bars'>icons</div>
376 <button class='accordion active'>Clothes</button>
377 <div class='panel' style='max-height: 1000px;'>
378 <div class='inner-panel'>
379 <h5><a href='womans-fashion/clothes'>Clothes</a></h5>
380 <a>Tshirt </a>
381 </div>
382 </div>
383
384 <button class='accordion'>Shoes</button>
385 <div class='panel'>
386 <div class='inner-panel'>
387 <h5><a href='womans-fashion/shoes'>Shoes</a></h5>
388 <a>Deport shoes </a>
389 </div>
390 </div>
391
392 <button class='accordion'>Complements</button>
393 <div class='panel'>
394 <div class='inner-panel'>
395 <h5><a href='womans-fashion/complemnts'>Shoes</a></h5>
396 <a>Clock </a>
397 </div>
398 </div>
399 </div>
400 </article>
401
402</div>
ANSWER
Answered 2022-Feb-03 at 07:22It's that ok what I'm doing, repeat for each section the same categories as clothes, Jeans, etc.?
Yes, It's perfectly okay to do that. Personally, that is what I prefer.
What would be better: To add it directly to my table the absolute path or can i do that with PHP
You can easily achieve it with PHP.
Kindly use these functions to generate the markup for the nested categories. You can modify the HTML to achieve your desired results.
1CREATE TABLE `category`(
2 `category_id` smallint(3) unsigned not null auto_increment primary key,
3 `category_name` VARCHAR(40) NOT NULL,
4 `category_url` VARCHAR(40) NOT NULL,
5 `icon`varchar(150) default null,
6 `gender` enum('Men','Woman','Baby') default null,
7 `parent` INT DEFAULT NULL
8)engine=InnoDB default charset=utf8mb4 collate=utf8mb4_spanish_ci;
9INSERT INTO `category` (`category_id`, `category_name`, `category_url`, `icon`, `gender`, `parent`) VALUES
10-- Mens section
11(1, 'Mens Fashion', 'mens-fashion', null, null, null), -- Mens fasion
12-- clothes mens
13(2, 'Clothing', 'clothing', 'clothing.svg', null, 1), -- (level 2)
14(3, 'Shoes', 'Shoes', 'shoes.svg', null, 1), -- (level 2)
15(4, 'Complements', 'complements', 'complements.svg', null, 1), -- (level 2)
16
17(5, 'Shirts', 'shirts', null, null, 2), -- (level 3)
18(6, 'Casual shirts', 'casaul-shirts', null, null, 5), -- (level 4)
19(7, 'Suit shirts ', 'suit-shirts', null, null, 5), --(level 4)
20
21(8, 'Jeans', 'jeans', null, null, 2), -- (level 3)
22(9, 'Jeans skinny', 'jeans-skinny', null, null, 8), -- (level 4)
23(10, 'Jeans slim fit', 'jeans-slim-fit', null, null, 8), -- (level 4)
24
25(11, 'Underwear', 'Underwear', null, null, 2), -- (level 3)
26(12, 'Socks', 'socks', null, null, 11), -- (level 4)
27
28-- Woman section
29(13, 'Woman Fashion', 'woman-fasion', null, null, null), -- (level 1)
30-- Clothes woman
31(14, 'Clothing', 'clothing', 'clothing.svg', null, 13), -- (level 2)
32(15, 'Shoes', 'Shoes', 'shoes.svg', null, 13), -- (level 2)
33(16, 'Complements', 'complements', 'complements.svg', null, 13), -- (level 2)
34
35(17, 'Shirts', 'shirts', null, null, 13), -- (level 3)
36(18, 'Casual shirts', 'casaul-shirts', null, null, 17), -- (level 4)
37(19, 'Suit shirts', 'suit-shirts', null, null, 17), -- (level 4)
38(20, 'Top shirt', 'top-shirt', null, null, 17), -- (level 4)
39
40(21, 'Jeans', 'jeans', null, null, 13), -- (level 3)
41(22, 'Jeans skinny', 'jeans-skinny', null, null, 21), -- (level 4)
42(23, 'Jeans slim fit', 'jeans-slim-fit', null, null, 21), -- (level 4)
43
44(24, 'Underwear', 'Underwear', null, null, 13), -- (level 3)
45(25, 'Socks', 'socks', null, null, 24), -- (level 4)
46
47-- Childeren section
48(13, 'Childerens Fasion', 'childeren-fashion', null, null, null), -- (level 1)
49-- Clothes childeren etc..
50$categories = $db->query('SELECT category_id, category_url, parent, category_name FROM category ORDER BY category_id');
51$cat = $categories->fetchAll(PDO::FETCH_ASSOC);
52
53$arrayMenu = array();
54
55foreach($cat as $row){
56$arrayMenu[$row['category_id']] = array("parent" => $row['parent'], "category_name" => $row['category_name'], "category_url" => $row['category_url']);
57}
58
59function createTree($array, $curParent, $currLevel = 0, $prevLevel = -1) {
60
61 foreach ($array as $categoryId => $category) :
62
63 if ($curParent == $category['parent']) :
64
65 if($category['parent']==0) $class="dropdown"; else $class="sub_menu";
66 if ($currLevel > $prevLevel) echo " <ul class='$class'> ";
67
68
69 if ($currLevel == $prevLevel) echo " </li> ";
70
71 echo '<li id="'.$categoryId.'" ><a href="'.$category['category_url'].'">'.$category['category_name'].'</a>';
72
73 if ($currLevel > $prevLevel) { $prevLevel = $currLevel; }
74
75 $currLevel++;
76
77 createTree ($array, $categoryId, $currLevel, $prevLevel);
78
79 $currLevel--;
80 endif;
81 endforeach;
82
83 if ($currLevel == $prevLevel) echo " </li> </ul> ";
84}
85?>
86<div class="nav">
87<?php
88if ($cat != null) createTree($arrayMenu, 0);
89?>
90nav ul li {
91 background:#f1f1f1; list-style: none;
92}
93ul.dropdown {
94 position:relative;
95 width:auto;
96 font:12px Arial, Helvetica, sans-serif;
97}
98ul.dropdown li {
99 float:left; zoom:1;
100 height:auto;
101 min-height: 30px;
102 padding:6px 2px 0 2px;
103}
104
105ul.dropdown li li {
106 border-right:1px solid #ccc;
107 border-left:1px solid #ccc;
108 margin-left:-30px;
109}
110ul.dropdown a:hover {
111 color:#000;
112}
113ul.dropdown a:active { color:#ffa500; }
114
115ul.dropdown li a {
116 display:block;
117 padding:4px 8px;
118 color:#000;
119 text-decoration:none;
120 font:bold 12px Arial, Helvetica, sans-serif;
121}
122
123ul.dropdown li:last-child a { border-right:none;} /* Doesn't work in IE */
124ul.dropdown li:hover {
125 color:#000;
126 background:#e7e7e7;
127 position:relative; }
128ul.dropdown li.hover a { color:#000; }
129ul.dropdown ul {
130 text-align:left;
131 visibility: hidden;
132 position: absolute;
133 left:-10px;
134 top:36px; }
135ul.dropdown ul li {
136 background:#f1f1f1;
137 border-bottom:1px solid #ccc;
138 float:none; width:120px;
139 height:auto;
140 min-height: 25px;
141}
142ul.dropdown ul li a {
143 border-right:none;
144 width:100%;
145 display:inline-block; color:#000; }
146ul.dropdown ul ul {
147 left:100%;
148 top:0;
149}
150ul.dropdown li:hover > ul { visibility:visible; }
151// Tab header ///////
152function openPage(pageName, elmnt, color) {
153 // Hide all elements with class="tabcontent" by default */
154 var i, tabcontent, tablinks;
155 tabcontent = document.getElementsByClassName("tabcontent");
156 for (i = 0; i < tabcontent.length; i++) {
157 tabcontent[i].style.display = "none";
158 }
159
160 // Remove the background color of all tablinks/buttons
161 tablinks = document.getElementsByClassName("tablink");
162 for (i = 0; i < tablinks.length; i++) {
163 tablinks[i].style.background = "";
164 }
165
166 // Show the specific tab content
167 document.getElementById(pageName).style.display = "block";
168
169 // Add the specific color to the button used to open the tab content
170 elmnt.style.background = color;
171}
172
173// Get the element with id="defaultOpen" and click on it
174document.getElementById("defaultOpen").click();
175
176
177// Accordion ///////
178var acc = document.getElementsByClassName("accordion");
179var i;
180
181for (i = 0; i < acc.length; i++) {
182 acc[i].addEventListener("click", function() {
183 this.classList.toggle("active");
184 var panel = this.nextElementSibling;
185 if (panel.style.maxHeight) {
186 panel.style.maxHeight = null;
187 } else {
188 panel.style.maxHeight = panel.scrollHeight + "px";
189 }
190 });
191}/* TAB HEADER MENU */
192
193#wrapper-tablink {
194 display: flex;
195 flex-flow: row nowrap;
196 justify-content: center;
197 align-items: center;
198}
199
200
201/* Style tab links */
202
203.tablink {
204 background-color: #555;
205 color: white;
206 border: none;
207 outline: none;
208 cursor: pointer;
209 padding: 14px 16px;
210 font-size: 17px;
211 width: 25%;
212}
213
214.tablink:hover {
215 background-color: #777;
216}
217
218.tablink .active {
219 color: #000;
220}
221
222
223/* Style the tab content (and add height:100% for full page content) */
224
225.tabcontent {
226 color: white;
227 display: none;
228 padding: 100px 20px;
229 height: 100%;
230 overflow-y: auto;
231}
232
233
234/*
235#moda-mujer {background-color: var(--secundary-color);}
236#moda-hombre {background-color: #00cc99;}
237#electronica {background-color: #3399ff;}
238#cursos {background-color: #9933ff;}
239*/
240
241.wrapper-icons-bars {
242 display: flex;
243 flex-flow: row nowrap;
244 justify-content: center;
245 align-items: center;
246 margin: 10px 0 20px 0;
247}
248
249.wrapper-icons-bars a {
250 display: block;
251 position: relative;
252 background-color: #FFFFFF;
253 border-bottom: 3px solid var(--body-color);
254 border-right: 1px solid #F1F1F1;
255 padding: 20px;
256 transition: all 0.3s ease;
257}
258
259.wrapper-icons-bars a:hover {
260 display: block;
261 position: relative;
262 border-bottom: 3px solid var(--secundary-color);
263 padding: 25px;
264 transition: all 0.3s ease;
265}
266
267
268/* ACCORDIAN CONTENT */
269
270.wrapper-accordion {
271 display: flex;
272 justify-content: center;
273 width: 100%;
274 margin-bottom: 80px;
275}
276
277.accordion {
278 display: flex;
279 position: relative;
280 justify-content: center;
281 align-items: center;
282 background-color: #eee;
283 color: #444;
284 cursor: pointer;
285 padding: 18px;
286 width: 100%;
287 max-width: 500px;
288 min-width: 500px;
289 border: none;
290 text-align: left;
291 outline: none;
292 font-size: 15px;
293 transition: 0.4s;
294}
295
296.active,
297.accordion:hover {
298 background-color: #ccc;
299}
300
301.accordion:after {
302 content: '\002B';
303 color: #777;
304 font-weight: bold;
305 display: block;
306 position: absolute;
307 right: 25px;
308 margin-left: 5px;
309}
310
311.active:after {
312 content: "\2212";
313}
314
315.panel {
316 background-color: white;
317 color: var(--body-color);
318 max-height: 0;
319 width: 100%;
320 overflow: hidden;
321 transition: max-height 0.2s ease-out;
322}
323
324.inner-panel {
325 padding: 20px 20px;
326 width: 100%;
327 max-width: 500px;
328}
329
330.wrapper-accordion a {
331 color: var(--body-color);
332}<!-- Create Tab links header (Table: controllers) -->
333<div id="wrapper-tablink">
334 <button class="tablink" onclick="openPage('mens-fashion', this, 'blue')" id="defaultOpen">Mens Fashion</button>
335 <button class="tablink" onclick="openPage('womans-fashion', this, 'red')" id="defaultOpen">Womans Fashion</button>
336</div>
337
338<div id='mens-fashion' class='tabcontent' style='blue'>
339 <article class='wrapper-accordion'>
340 <div>
341 <h2><a href='mens-fashion/clothes'>Clothes</a></h2>
342 <div class='wrapper-icons-bars'>icons</div>
343 <button class='accordion active'>Clothes</button>
344 <div class='panel' style='max-height: 1000px;'>
345 <div class='inner-panel'>
346 <h5><a href='mens-fashion/clothes'>Clothes</a></h5>
347 <a>Tshirt </a>
348 </div>
349 </div>
350
351 <button class='accordion'>Shoes</button>
352 <div class='panel'>
353 <div class='inner-panel'>
354 <h5><a href='mens-fashion/shoes'>Shoes</a></h5>
355 <a>Deport shoes </a>
356 </div>
357 </div>
358
359 <button class='accordion'>Complements</button>
360 <div class='panel'>
361 <div class='inner-panel'>
362 <h5><a href='mens-fashion/complemnts'>Shoes</a></h5>
363 <a>Clock </a>
364 </div>
365 </div>
366 </div>
367 </article>
368
369</div>
370
371<div id='womans-fashion' class='tabcontent' style='red'>
372 <article class='wrapper-accordion'>
373 <div>
374 <h2><a href='womans-fashion/clothes'>Clothes</a></h2>
375 <div class='wrapper-icons-bars'>icons</div>
376 <button class='accordion active'>Clothes</button>
377 <div class='panel' style='max-height: 1000px;'>
378 <div class='inner-panel'>
379 <h5><a href='womans-fashion/clothes'>Clothes</a></h5>
380 <a>Tshirt </a>
381 </div>
382 </div>
383
384 <button class='accordion'>Shoes</button>
385 <div class='panel'>
386 <div class='inner-panel'>
387 <h5><a href='womans-fashion/shoes'>Shoes</a></h5>
388 <a>Deport shoes </a>
389 </div>
390 </div>
391
392 <button class='accordion'>Complements</button>
393 <div class='panel'>
394 <div class='inner-panel'>
395 <h5><a href='womans-fashion/complemnts'>Shoes</a></h5>
396 <a>Clock </a>
397 </div>
398 </div>
399 </div>
400 </article>
401
402</div>// convert the categories array to parents with nested children
403function convertToLevels ($array) {
404 // First, convert the array so that the keys match the ids
405 $reKeyed = array();
406 foreach ($array as $item) {
407 $reKeyed[$item['category_id']] = $item;
408 }
409 // Next, use references to associate children with parents
410 foreach ($reKeyed as $id => $item) {
411 if (isset($item['parent'], $reKeyed[$item['parent']])) {
412 $reKeyed[$item['parent']]['children'][] =& $reKeyed[$id];
413 }
414 }
415 // Finally, go through and remove children from the outer level
416 foreach ($reKeyed as $id => $item) {
417 if (isset($item['parent'])) {
418 unset($reKeyed[$id]);
419 }
420 }
421 return $reKeyed;
422}
423
424// create menu li
425function createMenuItem($item, $url){
426 $html = '';
427 $html .= '<li class="menu-item '.(!empty($item['children']) ? 'has-child' : '').'">';
428 $html .= '<a href="'.$url.'" class="menu-link">';
429 if(!empty($item['icon'])):
430 $html .= '<i class="'.$item['icon'].'"></i>';
431 endif;
432 $html .= $item['category_name'];
433 $html .= '</a>';
434 if(!empty($item['children'])):
435 $html .= createMenu($item['children'], $url);
436 endif;
437 $html .= '</li>';
438
439 return $html;
440}
441
442// menu
443function createMenu($menu, $url_prefix=''){
444 $html = '';
445 $html .= '<ul class="menu">';
446 foreach($menu as $item):
447 $html .= createMenuItem($item, $url_prefix.'/'.$item['category_url']);
448 endforeach;
449 $html .= '</ul>';
450
451 return $html;
452}
453
You can use it like so
1CREATE TABLE `category`(
2 `category_id` smallint(3) unsigned not null auto_increment primary key,
3 `category_name` VARCHAR(40) NOT NULL,
4 `category_url` VARCHAR(40) NOT NULL,
5 `icon`varchar(150) default null,
6 `gender` enum('Men','Woman','Baby') default null,
7 `parent` INT DEFAULT NULL
8)engine=InnoDB default charset=utf8mb4 collate=utf8mb4_spanish_ci;
9INSERT INTO `category` (`category_id`, `category_name`, `category_url`, `icon`, `gender`, `parent`) VALUES
10-- Mens section
11(1, 'Mens Fashion', 'mens-fashion', null, null, null), -- Mens fasion
12-- clothes mens
13(2, 'Clothing', 'clothing', 'clothing.svg', null, 1), -- (level 2)
14(3, 'Shoes', 'Shoes', 'shoes.svg', null, 1), -- (level 2)
15(4, 'Complements', 'complements', 'complements.svg', null, 1), -- (level 2)
16
17(5, 'Shirts', 'shirts', null, null, 2), -- (level 3)
18(6, 'Casual shirts', 'casaul-shirts', null, null, 5), -- (level 4)
19(7, 'Suit shirts ', 'suit-shirts', null, null, 5), --(level 4)
20
21(8, 'Jeans', 'jeans', null, null, 2), -- (level 3)
22(9, 'Jeans skinny', 'jeans-skinny', null, null, 8), -- (level 4)
23(10, 'Jeans slim fit', 'jeans-slim-fit', null, null, 8), -- (level 4)
24
25(11, 'Underwear', 'Underwear', null, null, 2), -- (level 3)
26(12, 'Socks', 'socks', null, null, 11), -- (level 4)
27
28-- Woman section
29(13, 'Woman Fashion', 'woman-fasion', null, null, null), -- (level 1)
30-- Clothes woman
31(14, 'Clothing', 'clothing', 'clothing.svg', null, 13), -- (level 2)
32(15, 'Shoes', 'Shoes', 'shoes.svg', null, 13), -- (level 2)
33(16, 'Complements', 'complements', 'complements.svg', null, 13), -- (level 2)
34
35(17, 'Shirts', 'shirts', null, null, 13), -- (level 3)
36(18, 'Casual shirts', 'casaul-shirts', null, null, 17), -- (level 4)
37(19, 'Suit shirts', 'suit-shirts', null, null, 17), -- (level 4)
38(20, 'Top shirt', 'top-shirt', null, null, 17), -- (level 4)
39
40(21, 'Jeans', 'jeans', null, null, 13), -- (level 3)
41(22, 'Jeans skinny', 'jeans-skinny', null, null, 21), -- (level 4)
42(23, 'Jeans slim fit', 'jeans-slim-fit', null, null, 21), -- (level 4)
43
44(24, 'Underwear', 'Underwear', null, null, 13), -- (level 3)
45(25, 'Socks', 'socks', null, null, 24), -- (level 4)
46
47-- Childeren section
48(13, 'Childerens Fasion', 'childeren-fashion', null, null, null), -- (level 1)
49-- Clothes childeren etc..
50$categories = $db->query('SELECT category_id, category_url, parent, category_name FROM category ORDER BY category_id');
51$cat = $categories->fetchAll(PDO::FETCH_ASSOC);
52
53$arrayMenu = array();
54
55foreach($cat as $row){
56$arrayMenu[$row['category_id']] = array("parent" => $row['parent'], "category_name" => $row['category_name'], "category_url" => $row['category_url']);
57}
58
59function createTree($array, $curParent, $currLevel = 0, $prevLevel = -1) {
60
61 foreach ($array as $categoryId => $category) :
62
63 if ($curParent == $category['parent']) :
64
65 if($category['parent']==0) $class="dropdown"; else $class="sub_menu";
66 if ($currLevel > $prevLevel) echo " <ul class='$class'> ";
67
68
69 if ($currLevel == $prevLevel) echo " </li> ";
70
71 echo '<li id="'.$categoryId.'" ><a href="'.$category['category_url'].'">'.$category['category_name'].'</a>';
72
73 if ($currLevel > $prevLevel) { $prevLevel = $currLevel; }
74
75 $currLevel++;
76
77 createTree ($array, $categoryId, $currLevel, $prevLevel);
78
79 $currLevel--;
80 endif;
81 endforeach;
82
83 if ($currLevel == $prevLevel) echo " </li> </ul> ";
84}
85?>
86<div class="nav">
87<?php
88if ($cat != null) createTree($arrayMenu, 0);
89?>
90nav ul li {
91 background:#f1f1f1; list-style: none;
92}
93ul.dropdown {
94 position:relative;
95 width:auto;
96 font:12px Arial, Helvetica, sans-serif;
97}
98ul.dropdown li {
99 float:left; zoom:1;
100 height:auto;
101 min-height: 30px;
102 padding:6px 2px 0 2px;
103}
104
105ul.dropdown li li {
106 border-right:1px solid #ccc;
107 border-left:1px solid #ccc;
108 margin-left:-30px;
109}
110ul.dropdown a:hover {
111 color:#000;
112}
113ul.dropdown a:active { color:#ffa500; }
114
115ul.dropdown li a {
116 display:block;
117 padding:4px 8px;
118 color:#000;
119 text-decoration:none;
120 font:bold 12px Arial, Helvetica, sans-serif;
121}
122
123ul.dropdown li:last-child a { border-right:none;} /* Doesn't work in IE */
124ul.dropdown li:hover {
125 color:#000;
126 background:#e7e7e7;
127 position:relative; }
128ul.dropdown li.hover a { color:#000; }
129ul.dropdown ul {
130 text-align:left;
131 visibility: hidden;
132 position: absolute;
133 left:-10px;
134 top:36px; }
135ul.dropdown ul li {
136 background:#f1f1f1;
137 border-bottom:1px solid #ccc;
138 float:none; width:120px;
139 height:auto;
140 min-height: 25px;
141}
142ul.dropdown ul li a {
143 border-right:none;
144 width:100%;
145 display:inline-block; color:#000; }
146ul.dropdown ul ul {
147 left:100%;
148 top:0;
149}
150ul.dropdown li:hover > ul { visibility:visible; }
151// Tab header ///////
152function openPage(pageName, elmnt, color) {
153 // Hide all elements with class="tabcontent" by default */
154 var i, tabcontent, tablinks;
155 tabcontent = document.getElementsByClassName("tabcontent");
156 for (i = 0; i < tabcontent.length; i++) {
157 tabcontent[i].style.display = "none";
158 }
159
160 // Remove the background color of all tablinks/buttons
161 tablinks = document.getElementsByClassName("tablink");
162 for (i = 0; i < tablinks.length; i++) {
163 tablinks[i].style.background = "";
164 }
165
166 // Show the specific tab content
167 document.getElementById(pageName).style.display = "block";
168
169 // Add the specific color to the button used to open the tab content
170 elmnt.style.background = color;
171}
172
173// Get the element with id="defaultOpen" and click on it
174document.getElementById("defaultOpen").click();
175
176
177// Accordion ///////
178var acc = document.getElementsByClassName("accordion");
179var i;
180
181for (i = 0; i < acc.length; i++) {
182 acc[i].addEventListener("click", function() {
183 this.classList.toggle("active");
184 var panel = this.nextElementSibling;
185 if (panel.style.maxHeight) {
186 panel.style.maxHeight = null;
187 } else {
188 panel.style.maxHeight = panel.scrollHeight + "px";
189 }
190 });
191}/* TAB HEADER MENU */
192
193#wrapper-tablink {
194 display: flex;
195 flex-flow: row nowrap;
196 justify-content: center;
197 align-items: center;
198}
199
200
201/* Style tab links */
202
203.tablink {
204 background-color: #555;
205 color: white;
206 border: none;
207 outline: none;
208 cursor: pointer;
209 padding: 14px 16px;
210 font-size: 17px;
211 width: 25%;
212}
213
214.tablink:hover {
215 background-color: #777;
216}
217
218.tablink .active {
219 color: #000;
220}
221
222
223/* Style the tab content (and add height:100% for full page content) */
224
225.tabcontent {
226 color: white;
227 display: none;
228 padding: 100px 20px;
229 height: 100%;
230 overflow-y: auto;
231}
232
233
234/*
235#moda-mujer {background-color: var(--secundary-color);}
236#moda-hombre {background-color: #00cc99;}
237#electronica {background-color: #3399ff;}
238#cursos {background-color: #9933ff;}
239*/
240
241.wrapper-icons-bars {
242 display: flex;
243 flex-flow: row nowrap;
244 justify-content: center;
245 align-items: center;
246 margin: 10px 0 20px 0;
247}
248
249.wrapper-icons-bars a {
250 display: block;
251 position: relative;
252 background-color: #FFFFFF;
253 border-bottom: 3px solid var(--body-color);
254 border-right: 1px solid #F1F1F1;
255 padding: 20px;
256 transition: all 0.3s ease;
257}
258
259.wrapper-icons-bars a:hover {
260 display: block;
261 position: relative;
262 border-bottom: 3px solid var(--secundary-color);
263 padding: 25px;
264 transition: all 0.3s ease;
265}
266
267
268/* ACCORDIAN CONTENT */
269
270.wrapper-accordion {
271 display: flex;
272 justify-content: center;
273 width: 100%;
274 margin-bottom: 80px;
275}
276
277.accordion {
278 display: flex;
279 position: relative;
280 justify-content: center;
281 align-items: center;
282 background-color: #eee;
283 color: #444;
284 cursor: pointer;
285 padding: 18px;
286 width: 100%;
287 max-width: 500px;
288 min-width: 500px;
289 border: none;
290 text-align: left;
291 outline: none;
292 font-size: 15px;
293 transition: 0.4s;
294}
295
296.active,
297.accordion:hover {
298 background-color: #ccc;
299}
300
301.accordion:after {
302 content: '\002B';
303 color: #777;
304 font-weight: bold;
305 display: block;
306 position: absolute;
307 right: 25px;
308 margin-left: 5px;
309}
310
311.active:after {
312 content: "\2212";
313}
314
315.panel {
316 background-color: white;
317 color: var(--body-color);
318 max-height: 0;
319 width: 100%;
320 overflow: hidden;
321 transition: max-height 0.2s ease-out;
322}
323
324.inner-panel {
325 padding: 20px 20px;
326 width: 100%;
327 max-width: 500px;
328}
329
330.wrapper-accordion a {
331 color: var(--body-color);
332}<!-- Create Tab links header (Table: controllers) -->
333<div id="wrapper-tablink">
334 <button class="tablink" onclick="openPage('mens-fashion', this, 'blue')" id="defaultOpen">Mens Fashion</button>
335 <button class="tablink" onclick="openPage('womans-fashion', this, 'red')" id="defaultOpen">Womans Fashion</button>
336</div>
337
338<div id='mens-fashion' class='tabcontent' style='blue'>
339 <article class='wrapper-accordion'>
340 <div>
341 <h2><a href='mens-fashion/clothes'>Clothes</a></h2>
342 <div class='wrapper-icons-bars'>icons</div>
343 <button class='accordion active'>Clothes</button>
344 <div class='panel' style='max-height: 1000px;'>
345 <div class='inner-panel'>
346 <h5><a href='mens-fashion/clothes'>Clothes</a></h5>
347 <a>Tshirt </a>
348 </div>
349 </div>
350
351 <button class='accordion'>Shoes</button>
352 <div class='panel'>
353 <div class='inner-panel'>
354 <h5><a href='mens-fashion/shoes'>Shoes</a></h5>
355 <a>Deport shoes </a>
356 </div>
357 </div>
358
359 <button class='accordion'>Complements</button>
360 <div class='panel'>
361 <div class='inner-panel'>
362 <h5><a href='mens-fashion/complemnts'>Shoes</a></h5>
363 <a>Clock </a>
364 </div>
365 </div>
366 </div>
367 </article>
368
369</div>
370
371<div id='womans-fashion' class='tabcontent' style='red'>
372 <article class='wrapper-accordion'>
373 <div>
374 <h2><a href='womans-fashion/clothes'>Clothes</a></h2>
375 <div class='wrapper-icons-bars'>icons</div>
376 <button class='accordion active'>Clothes</button>
377 <div class='panel' style='max-height: 1000px;'>
378 <div class='inner-panel'>
379 <h5><a href='womans-fashion/clothes'>Clothes</a></h5>
380 <a>Tshirt </a>
381 </div>
382 </div>
383
384 <button class='accordion'>Shoes</button>
385 <div class='panel'>
386 <div class='inner-panel'>
387 <h5><a href='womans-fashion/shoes'>Shoes</a></h5>
388 <a>Deport shoes </a>
389 </div>
390 </div>
391
392 <button class='accordion'>Complements</button>
393 <div class='panel'>
394 <div class='inner-panel'>
395 <h5><a href='womans-fashion/complemnts'>Shoes</a></h5>
396 <a>Clock </a>
397 </div>
398 </div>
399 </div>
400 </article>
401
402</div>// convert the categories array to parents with nested children
403function convertToLevels ($array) {
404 // First, convert the array so that the keys match the ids
405 $reKeyed = array();
406 foreach ($array as $item) {
407 $reKeyed[$item['category_id']] = $item;
408 }
409 // Next, use references to associate children with parents
410 foreach ($reKeyed as $id => $item) {
411 if (isset($item['parent'], $reKeyed[$item['parent']])) {
412 $reKeyed[$item['parent']]['children'][] =& $reKeyed[$id];
413 }
414 }
415 // Finally, go through and remove children from the outer level
416 foreach ($reKeyed as $id => $item) {
417 if (isset($item['parent'])) {
418 unset($reKeyed[$id]);
419 }
420 }
421 return $reKeyed;
422}
423
424// create menu li
425function createMenuItem($item, $url){
426 $html = '';
427 $html .= '<li class="menu-item '.(!empty($item['children']) ? 'has-child' : '').'">';