62 lines
2.1 KiB
HTML
62 lines
2.1 KiB
HTML
<div class="bg-white">
|
|
<div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl">
|
|
<h2 class="text-2xl font-bold tracking-tight text-gray-900">Available Zines</h2>
|
|
|
|
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
|
|
<div class="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 md:grid-cols-2 xl:grid-cols-4">
|
|
{{ range .data.shopItems }}
|
|
|
|
<div class="myClass group relative">
|
|
<a href="/shopitems/{{ .ID }}">
|
|
<img loading="lazy" src="/{{ .Image }}" alt="Product Image" class="aspect-4/5 mx-auto rounded bg-gray-200 object-cover group-hover:opacity-75 lg:aspect-auto lg:h-80">
|
|
</a>
|
|
<div class="mt-4 flex justify-between">
|
|
<div>
|
|
<h3 class="text-sm text-gray-700">
|
|
<a href="/shopitems/{{ .ID }}">
|
|
{{ .Name }}
|
|
</a>
|
|
</h3>
|
|
<p class="mt-1 text-sm text-gray-500">{{ .Abstract }}</p>
|
|
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
{{ range .Tags }}
|
|
<a href="/tags/{{ .ID }}"><span class="bg-{{ .Color }}-100 text-{{ .Color }}-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-{{ .Color }}-900 dark:text-{{ .Color }}-300">{{ .Name }}</span></a>
|
|
{{ end }}
|
|
</p>
|
|
</div>
|
|
{{ if $.loggedIn }}
|
|
<p class="text-sm font-medium text-gray-900">{{ .BasePrice }}€</p>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
|
|
{{ end }}
|
|
|
|
<script>
|
|
function myFunction() {
|
|
// Declare variables
|
|
var input, filter, ul, li, a, i, txtValue;
|
|
input = document.getElementById('myInput');
|
|
filter = input.value.toUpperCase();
|
|
//ul = document.getElementById("myUL");
|
|
//li = ul.getElementsByTagName('li');
|
|
li = document.getElementsByClassName("myClass");
|
|
|
|
console.log(li)
|
|
// Loop through all list items, and hide those who don't match the search query
|
|
for (i = 0; i < li.length; i++) {
|
|
a = li[i].getElementsByTagName("a")[1];
|
|
txtValue = a.textContent || a.innerText;
|
|
if (txtValue.toUpperCase().indexOf(filter) > -1) {
|
|
li[i].style.display = "";
|
|
} else {
|
|
li[i].style.display = "none";
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|