Skip to content

Instantly share code, notes, and snippets.

@hlorand

hlorand/api.php

Created September 12, 2023 11:45
Show Gist options
  • Save hlorand/9ad82a02905b9a69ed43b7c5a154f094 to your computer and use it in GitHub Desktop.
Save hlorand/9ad82a02905b9a69ed43b7c5a154f094 to your computer and use it in GitHub Desktop.
Download ZIP
Collapsible panels - https://fb.com/1995384244128452
Raw
api.php
<?php
echo <<<JSON
[
{
"category" : "Népszerű termékek",
"products" : [
{
"url" : "#",
"name" : "Terméknév 1",
"img" : "http://placekitten.com/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"url" : "#",
"name" : "Terméknév 2",
"img" : "https://picsum.photos/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}
]
},
{
"category" : "Kategória 1",
"products" : [
{
"url" : "#",
"name" : "Terméknév 1",
"img" : "https://loremflickr.com/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"url" : "#",
"name" : "Terméknév 2",
"img" : "https://baconmockup.com/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}
]
},
{
"category" : "Kategória 2",
"products" : [
{
"url" : "#",
"name" : "Terméknév 1",
"img" : "https://placebeard.it/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"url" : "#",
"name" : "Terméknév 2",
"img" : "https://placebear.com/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}
]
},
{
"category" : "Kategória 3",
"products" : [
{
"url" : "#",
"name" : "Terméknév 1",
"img" : "https://loremflickr.com/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"url" : "#",
"name" : "Terméknév 2",
"img" : "https://baconmockup.com/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}
]
},
{
"category" : "Kategória 4",
"products" : [
{
"url" : "#",
"name" : "Terméknév 1",
"img" : "https://placebeard.it/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"url" : "#",
"name" : "Terméknév 2",
"img" : "https://placebear.com/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"url" : "#",
"name" : "Terméknév 3",
"img" : "https://picsum.photos/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}
]
},
{
"category" : "Kategória 5",
"products" : [
{
"url" : "#",
"name" : "Terméknév 1",
"img" : "https://loremflickr.com/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"url" : "#",
"name" : "Terméknév 2",
"img" : "https://baconmockup.com/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}
]
},
{
"category" : "Kategória 6",
"products" : [
{
"url" : "#",
"name" : "Terméknév 1",
"img" : "https://placebeard.it/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"url" : "#",
"name" : "Terméknév 2",
"img" : "https://placebear.com/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"url" : "#",
"name" : "Terméknév 3",
"img" : "https://picsum.photos/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"url" : "#",
"name" : "Terméknév 4",
"img" : "https://picsum.photos/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}
]
},
{
"category" : "Kategória 7",
"products" : [
{
"url" : "#",
"name" : "Terméknév 1",
"img" : "https://loremflickr.com/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"url" : "#",
"name" : "Terméknév 2",
"img" : "https://baconmockup.com/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}
]
},
{
"category" : "Kategória 8",
"products" : [
{
"url" : "#",
"name" : "Terméknév 1",
"img" : "https://placebeard.it/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
{
"url" : "#",
"name" : "Terméknév 2",
"img" : "https://placebear.com/800/600",
"desc" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}
]
}
]
JSON;
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
details summary{
background-color: #88d;
padding: 10px;
cursor: pointer;
margin-bottom: 5px;
}
details[open] summary{ background-color: #fcd567; }
details div.product{
display: flex;
flex-direction: column;
}
div, button{
background-color: rgba(0,0,100,0.1);
padding: 10px;
width: 100%;
box-sizing:border-box;
} /* Egy kis reszponzivitás: */
@media only screen and (min-width: 800px) {
details div.product{
flex-direction: row;
}
details div.product div.image{
max-width: 25%;
}
body{
max-width: 75vw;
margin: 0 auto;
}
}
</style>
</head>
<body>
<div id="categories"></div>
<button id="more" onclick="display(loaded, loaded+2)">Továbbiak megjelenítése...</button>
<script>
var data;
var loaded = 0;
function closeAll(exceptThis){
document.querySelectorAll("details").forEach(function(el){
if( el != exceptThis)
el.removeAttribute("open");
});
}
function display(from=0, to=2){
let collapseTemplate = `
<details onclick="closeAll(this)">
<summary>{{category}}</summary>
{{product}}
</details>
`;
let productTemplate = `
<div class="product">
<div class="image">
<img src="{{img}}" style="width:100%;">
</div>
<div class="description">
<h3>{{name}}</h3>
<p>{{desc}}</p>
<p><a href="{{url}}">Tovább &gt;&gt; </a></p>
</div>
</div>
`;
data.forEach(function(item, index){
if (index < from || index > to) return;
if (++loaded == data.length) document.getElementById("more").style.display = "none";
var products = "";
item.products.forEach(function(p){
products += productTemplate.replace("{{img}}",p.img).replace("{{name}}",p.name)
.replace("{{desc}}",p.desc).replace("{{url}}",p.url);
});
var ctFilled = collapseTemplate.replace("{{category}}",item.category)
.replace("{{product}}",products);
if( index == 0)
ctFilled = ctFilled.replace("details", "details open")
document.getElementById("categories").insertAdjacentHTML('beforeend', ctFilled);
});
}
fetch('api.php')
.then(response => response.json())
.then(jsondata => {data = jsondata; display(0,2); })
.catch(error => console.error(error));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment