Ecommerce

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

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

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

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

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

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$categories = $pdo->query('SELECT category_id, category_url, parent, category_name FROM category ORDER BY category_id');
454$cat = convertToLevels($categories->fetchAll(PDO::FETCH_ASSOC));
455

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$categories = $pdo->query('SELECT category_id, category_url, parent, category_name FROM category ORDER BY category_id');
454$cat = convertToLevels($categories->fetchAll(PDO::FETCH_ASSOC));
455<?= createMenu($cat); ?>
456

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$categories = $pdo->query('SELECT category_id, category_url, parent, category_name FROM category ORDER BY category_id');
454$cat = convertToLevels($categories->fetchAll(PDO::FETCH_ASSOC));
455<?= createMenu($cat); ?>
456$men_cat = array_values(array_filter($cat, function($val){
457    return strtolower($val['category_name']) === 'mens fashion';
458}))[0]['children'] ?? [];
459

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$categories = $pdo->query('SELECT category_id, category_url, parent, category_name FROM category ORDER BY category_id');
454$cat = convertToLevels($categories->fetchAll(PDO::FETCH_ASSOC));
455<?= createMenu($cat); ?>
456$men_cat = array_values(array_filter($cat, function($val){
457    return strtolower($val['category_name']) === 'mens fashion';
458}))[0]['children'] ?? [];
459<?= createMenu($men_cat, '/mens-fashion'); ?>
460

1static createOrder(
2    order: Order,
3    onSuccess: Function,
4    onError: Function,
5    onFinal: Function
6  ) {
7    const orderJson = serialize(Order, order)
8    const URL = ApiRoutes.CREATE_ORDER
9    axiosInstance
10      .post(URL, { "order": orderJson })
11      .then((res) => {
12        // const data = deserialize(Cart, res.data.order);
13        //onSuccess(res.data.success);
14      })
15      .catch((err) => {
16        onError(err);
17      });
18  }
19
20  static updateCart(
21    order: Order,
22    orderId: string,
23    onSuccess: Function,
24
25    onError: Function,
26    onFinal: Function
27  ) {
28    const orderJson = serialize(Order, order)
29    const URL = ApiRoutes.UPDATE_CART.replace(":id", `${orderId}`)
30    axiosInstance
31      .put(URL, { "order": orderJson })
32      .then((res) => {
33        // const data = deserialize(Cart, res.data.order);
34        //onSuccess(res.data.success);
35      })
36      .catch((err) => {
37        onError(err);
38      });
39  }
40const addToBasket = () => {
41    dispatch({
42      type: 'ADD_TO_BASKET',
43      item: {
44        "id": product.id,
45        "title": product.name,
46        "price": product.price,
47        "image": product.imageUrl,
48      },
49    });
50
51    // CREATE ORDER ONCE CART IS EMPTY ELSE UPDATE CART
52
53    if (props?.userCart?.orderItems?.length) {
54      OrderService.updateCart(
55        {
56          orderItems: [{
57
58            productId: `${product?.id}`,
59            quantity: 1,
60            // taxMode:0,
61            // taxPercentage:0,
62            //discountPercentage: ""
63          }]
64        },
65        props?.userCart?.id,
66        () => { },
67        () => { },
68        () => { },
69      )
70    } else {
71      OrderService.createOrder(
72        {
73          userId: user?.id,
74          storeId: store?.id,
75          orderItems: [
76            {
77              productId: `${product?.id}`,
78              quantity: 1,
79              taxMode: 0,
80              taxPercentage: 0,
81              discountPercentage: ""
82            }
83          ]
84        },
85        () => { },
86        () => { },
87        () => { },
88      )
89    }
90  };
91OrderService.updateCart(  
92 {
93              orderItems: [{
94    
95                productId: `${product?.id}`,
96                quantity: 1,
97                // taxMode:0,
98                // taxPercentage:0,
99                //discountPercentage: ""
100              }, ...props.userCart.orderItems]
101            },
102            props?.userCart?.id,
103            () => { },
104            () => { },
105            () => { },
106          )
107    }
108

1const initialState = [
2  {
3    productName: '',
4    count: 0
5  }
6]
7import React, { useState, useContext } from 'react'
8import { ItemCounterContext } from '../../App'
9
10function AddToCart({ product }) {
11  const itemCounter = useContext(ItemCounterContext)
12  const [countItem, setCountItem] = useState(0)
13
14  const changeCount = (e) => {
15    if (e === '+') { setCountItem(countItem + 1) }
16    if (e === '-' && countItem > 0) { setCountItem(countItem - 1) }
17  }
18
19  return (
20    <div className='add margin-top-small'>
21      <div
22        className='add-counter'
23        onClick={(e) => changeCount(e.target.innerText)}
24        role='button'
25      >
26        -
27      </div>
28
29      <div className='add-counter'>{countItem}</div>
30
31      <div
32        className='add-counter'
33        onClick={(e) => changeCount(e.target.innerText)}
34        role='button'
35      >
36        +
37      </div>
38      <button
39        className='add-btn btnOrange'
40        onClick={() => itemCounter.dispatch({ type: 'addToCart', productName: product.name, count: countItem })}
41      >
42        Add to Cart
43      </button>
44    </div>
45  )
46}
47
48export default AddToCart
49import React, { useContext } from 'react'
50import { Link, useLocation } from 'react-router-dom'
51import NavList from './NavList'
52import { StoreContext, ItemCounterContext } from '../../App'
53import Logo from '../Logo/Logo'
54
55function Navbar() {
56  const store = useContext(StoreContext)
57  const itemCounter = useContext(ItemCounterContext)
58  const cartIcon = store[6].cart.desktop
59  const location = useLocation()
60  const path = location.pathname
61
62  const itemsSum = itemCounter.state
63    .map((item) => item.count)
64    .reduce((prev, curr) => prev + curr, 0)
65
66  const totalItemsInCart = (
67    <span className='navbar__elements-sum'>
68      {itemsSum}
69    </span>
70  )
71
72  return (
73    <div className={`navbar ${path === '/' ? 'navTransparent' : 'navBlack'}`}>
74      <nav className='navbar__elements'>
75        <Logo />
76        <NavList />
77        <Link className='link' to='/cart'>
78          <img className='navbar__elements-cart' src={cartIcon} alt='AUDIOPHILE CART ICON' />
79          {itemsSum > 0 ? totalItemsInCart : null}
80        </Link>
81      </nav>
82    </div>
83  )
84}
85
86export default Navbar
87export const reducer = (state, action) => {
88  // returns -1 if product doesn't exist
89  const indexOfProductInCart = state.findIndex((item) => item.productName === action.productName)
90  const newState = state
91
92  switch (action.type) {
93    case 'increment': {
94      if (indexOfProductInCart === -1) {
95        newState[state.length] = { productName: action.productName, count: state.count + 1 }
96        return newState
97      }
98      newState[indexOfProductInCart] = { productName: action.productName, count: state.count + 1 }
99      return newState
100    }
101    case 'decrement': {
102      if (indexOfProductInCart === -1) {
103        newState[state.length] = { productName: action.productName, count: state.count - 1 }
104        return newState
105      }
106      newState[indexOfProductInCart] = { productName: action.productName, count: state.count - 1 }
107      return newState
108    }
109    case 'addToCart': {
110      if (indexOfProductInCart === -1) {
111        newState[state.length] = { productName: action.productName, count: action.count }
112        return newState
113      }
114      newState[indexOfProductInCart] = { productName: action.productName, count: action.count }
115      return newState
116    }
117    case 'remove': return state.splice(indexOfProductInCart, 1)
118    default: return state
119  }
120}
121

1const initialState = [
2  {
3    productName: '',
4    count: 0
5  }
6]
7import React, { useState, useContext } from 'react'
8import { ItemCounterContext } from '../../App'
9
10function AddToCart({ product }) {
11  const itemCounter = useContext(ItemCounterContext)
12  const [countItem, setCountItem] = useState(0)
13
14  const changeCount = (e) => {
15    if (e === '+') { setCountItem(countItem + 1) }
16    if (e === '-' && countItem > 0) { setCountItem(countItem - 1) }
17  }
18
19  return (
20    <div className='add margin-top-small'>
21      <div
22        className='add-counter'
23        onClick={(e) => changeCount(e.target.innerText)}
24        role='button'
25      >
26        -
27      </div>
28
29      <div className='add-counter'>{countItem}</div>
30
31      <div
32        className='add-counter'
33        onClick={(e) => changeCount(e.target.innerText)}
34        role='button'
35      >
36        +
37      </div>
38      <button
39        className='add-btn btnOrange'
40        onClick={() => itemCounter.dispatch({ type: 'addToCart', productName: product.name, count: countItem })}
41      >
42        Add to Cart
43      </button>
44    </div>
45  )
46}
47
48export default AddToCart
49import React, { useContext } from 'react'
50import { Link, useLocation } from 'react-router-dom'
51import NavList from './NavList'
52import { StoreContext, ItemCounterContext } from '../../App'
53import Logo from '../Logo/Logo'
54
55function Navbar() {
56  const store = useContext(StoreContext)
57  const itemCounter = useContext(ItemCounterContext)
58  const cartIcon = store[6].cart.desktop
59  const location = useLocation()
60  const path = location.pathname
61
62  const itemsSum = itemCounter.state
63    .map((item) => item.count)
64    .reduce((prev, curr) => prev + curr, 0)
65
66  const totalItemsInCart = (
67    <span className='navbar__elements-sum'>
68      {itemsSum}
69    </span>
70  )
71
72  return (
73    <div className={`navbar ${path === '/' ? 'navTransparent' : 'navBlack'}`}>
74      <nav className='navbar__elements'>
75        <Logo />
76        <NavList />
77        <Link className='link' to='/cart'>
78          <img className='navbar__elements-cart' src={cartIcon} alt='AUDIOPHILE CART ICON' />
79          {itemsSum > 0 ? totalItemsInCart : null}
80        </Link>
81      </nav>
82    </div>
83  )
84}
85
86export default Navbar
87export const reducer = (state, action) => {
88  // returns -1 if product doesn't exist
89  const indexOfProductInCart = state.findIndex((item) => item.productName === action.productName)
90  const newState = state
91
92  switch (action.type) {
93    case 'increment': {
94      if (indexOfProductInCart === -1) {
95        newState[state.length] = { productName: action.productName, count: state.count + 1 }
96        return newState
97      }
98      newState[indexOfProductInCart] = { productName: action.productName, count: state.count + 1 }
99      return newState
100    }
101    case 'decrement': {
102      if (indexOfProductInCart === -1) {
103        newState[state.length] = { productName: action.productName, count: state.count - 1 }
104        return newState
105      }
106      newState[indexOfProductInCart] = { productName: action.productName, count: state.count - 1 }
107      return newState
108    }
109    case 'addToCart': {
110      if (indexOfProductInCart === -1) {
111        newState[state.length] = { productName: action.productName, count: action.count }
112        return newState
113      }
114      newState[indexOfProductInCart] = { productName: action.productName, count: action.count }
115      return newState
116    }
117    case 'remove': return state.splice(indexOfProductInCart, 1)
118    default: return state
119  }
120}
121import React, { createContext, useMemo, useReducer } from 'react'
122import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
123import Navbar from './components/Navbar/Navbar'
124import Homepage from './pages/Homepage/Homepage'
125import Footer from './components/Footer/Footer'
126import ErrorPage from './pages/ErrorPage/ErrorPage'
127import SelectedCategory from './pages/SelectedCategory/SelectedCategory'
128import SingleProduct from './pages/SingleProduct/SingleProduct'
129import ScrollToTop from './services/ScrollToTop'
130import store from './services/data.json'
131import { reducer } from './services/ItemCounter'
132import './scss/main.scss'
133
134export const StoreContext = createContext(store)
135export const ItemCounterContext = createContext()
136
137function App() {
138  const initialState = [{ productName: '', count: 0 }]
139  const [state, dispatch] = useReducer(reducer, initialState)
140  const counter = useMemo(() => ({ state, dispatch }), [])
141
142  return (
143    <div className='app'>
144      <StoreContext.Provider value={store}>
145        <ItemCounterContext.Provider value={counter}>
146          <Router>
147            <ScrollToTop />
148            <Navbar />
149            <Routes>
150              <Route path='/' element={<Homepage />} />
151              <Route path='/:selectedCategory' element={<SelectedCategory />} />
152              <Route path='/:selectedCategory/:singleProduct' element={<SingleProduct />} />
153              <Route path='*' element={<ErrorPage />} />
154            </Routes>
155            <Footer />
156          </Router>
157        </ItemCounterContext.Provider>
158      </StoreContext.Provider>
159    </div>
160  )
161}
162
163export default App
164

1<dependency>
2    <groupId>io.springfox</groupId>
3    <artifactId>springfox-swagger2</artifactId>
4    <version>2.9.2</version>
5</dependency>
6
7<dependency>
8    <groupId>io.springfox</groupId>
9    <artifactId>springfox-swagger-ui</artifactId>
10    <version>2.9.2</version>
11</dependency>
12        <dependency>
13    <groupId>org.springframework.boot</groupId>
14    <artifactId>spring-boot-starter-data-mongodb</artifactId>
15</dependency>
16<dependency>
17    <groupId>org.springframework.boot</groupId>
18    <artifactId>spring-boot-starter-web</artifactId>
19</dependency>
20@RestController
21@RequestMapping("/api")
22@CrossOrigin
23public class UserController {
24    @Autowired
25    private UserRepository userRepository;
26
27    @GetMapping("/")
28    public List<User> GetUsers() {
29        return userRepository.findAll();
30    }
31    @GetMapping("/{id}")
32    public User GetUser(@PathVariable String id) {
33        return userRepository.findById(id).orElse(null);
34    }
35    @PostMapping("/")
36    public User postMethodName(@RequestBody User user) {
37        return userRepository.save(user);
38    }
39    @PutMapping("/")
40    public User PutMapping(@RequestBody User newUser) {
41        User oldUser = userRepository.findById(newUser.getId()).orElse(null);
42        oldUser.setName(newUser.getName());
43        oldUser.setEmail(newUser.getEmail());
44        oldUser.setPassword(newUser.getPassword());
45        userRepository.save(oldUser);
46        return oldUser;
47    }
48    @DeleteMapping("/{id}")
49    public String DeleteUser(@PathVariable String id) {
50        userRepository.deleteById(id);
51        return id;
52    }
53}
54package com.omazon.ecommerce;
55
56import org.springframework.boot.SpringApplication;
57import org.springframework.boot.autoconfigure.SpringBootApplication;
58
59import springfox.documentation.swagger2.annotations.EnableSwagger2;
60
61@SpringBootApplication
62@EnableSwagger2
63public class ECommerceApplication {
64
65    public static void main(String[] args) {
66        SpringApplication.run(ECommerceApplication.class, args);
67    }
68
69}
70spring.data.mongodb.uri=mongodb://localhost:27017/e-commerce
71...
72@Bean //Don't forget the @Bean annotation
73public Docket customImplementation(){
74   return new Docket()
75         .apiInfo(apiInfo());
76         //... more options available
77...
78

1class Product(models.Model):
2   amount_in_storage = models.PositiveIntegerField() # for design reasons, this amount is unchangeable, it must be only evaluated once during initialization like constants in C++
3
4   @property
5   def amount_available_for_purchase(self):
6       return self.amount_in_storage - Purchase.objects.filter(product=self.id).aggregate(models.Sum('amount'))["sum__amount"]
7class Purchase(models.Model):
8   product = models.ForeignKey(Product, ...)
9   amount = models.PositiveIntegerField()
10   payment_method = ...
11
12@atomic_transaction
13def func(product_id, amount_to_purchase):
14   product = Product.objects.get(...)
15   if product.amount_available_for_purchase > amount_to_purchase:
16     # do payment related stuff
17     Purchase.objects.create(product=product, amount=amount_to_purchase)
18     # do more stuff
19class Product(models.Model):
20   amount_in_storage = models.PositiveIntegerField()
21   version = models.PositiveIntegerField() # we use this field just to write to it, no reading will take place
22
23   @property
24   def amount_available_for_purchase(self):
25       return self.amount_in_storage - Purchase.objects.filter(product=self.id).aggregate(models.Sum('amount'))["sum__amount"]
26
27@atomic_transaction
28def func(product_id, amount_to_purchase):
29   product = Product.objects.select_for_update.get(...)
30
31   # acquiring a lock
32   product.version += 1 
33   product.save()
34
35   if product.amount_available_for_purchase > amount_to_purchase:
36     # do payment related stuff
37     Purchase.objects.create(product=product, amount=amount_to_purchase)
38     # do more stuff
39@atomic_transaction
40def func(product_id, amount_to_purchase):
41    # Forcefully acquiring a lock
42    product = list(Product.objects.select_for_update.filter(...))[0]
43
44    if product.amount_available_for_purchase > amount_to_purchase:
45      # do payment related stuff
46      Purchase.objects.create(product=product, amount=amount_to_purchase)
47      # do more stuff
48