{% set search = craft.app.request.getParam('suche') %}
{% set filter_kameraart = craft.app.request.getParam('kameraart') %}
{% set geraeteklasse = craft.app.request.getParam('geraeteklasse') %}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/css/shop.css">
<title>CameraBuy - Shop</title>
<link rel="stylesheet" href="https://use.typekit.net/mtk3vtw.css">
</head>
<body>
<header>
<nav>
<div class="navigation_image" id="logo_container">
<a href="#"><img src="/assets/img/logo.svg" alt="CameraBuy Logo"></a>
</div>
<div id="navigation">
<a href="/">Neuigkeiten</a>
<a href="/shop" >Shop</a>
<a href="/contact" >Kontakt</a>
</div>
<div class="navigation_image" id="shopping_cart_container">
<a href="/cart"><img src="/assets/img/cart.svg" alt="Shopping Cart"></a>
</div>
</nav>
</header>
<main>
<section id="showroom_shop">
<div>
<h1>Finde die richtige Kamera für dich.</h1>
<p>Stöbere in unserer großen Auswahl an Foto- und Videokameras verschiedenster Hersteller.</p>
</div>
{%if search %}
{% set placeholder = search %}
{% else %}
{% set placeholder = "Ich suche nach..."%}
{% endif %}
<input type="search" id="searchfield" placeholder="{{placeholder}}">
<button class="buttonlarge darkbutton" onclick="setsearch('suche',document.getElementById('searchfield').value)">Suchen</button>
</section>
<div id="filter">
<div>
<button class="buttonlarge" id="Fotokamera" onclick="togglesearch('kameraart',this.id)">Fotokameras</button>
<button class="buttonlarge" id="Videokamera" onclick="togglesearch('kameraart',this.id)">Videokameras</button>
<button class="buttonlarge" id="Hybrid-kamera" onclick="togglesearch('kameraart',this.id)">Hybrid-Kameras</button>
</div>
<div>
<button class="buttonlarge" id="Einsteiger" onclick="togglesearch('geraeteklasse',this.id)">Einsteiger</button>
<button class="buttonlarge" id="Fortgeschritten" onclick="togglesearch('geraeteklasse',this.id)">Fortgeschritten</button>
<button class="buttonlarge" id="Professionell" onclick="togglesearch('geraeteklasse',this.id)">Profi</button>
</div>
</div>
<section id="product_list">
{% set search_query = "" %}
{% if search %}
{% set search_query = search %}
{% endif %}
{% if filter_kameraart %}
{% set search_query = search_query ~ " " ~ "kameraart" ~ ":" ~ filter_kameraart %}
{% endif %}
{% if geraeteklasse %}
{% set search_query = search_query ~ " " ~ "geraeteklasse" ~ ":" ~ geraeteklasse %}
{% endif %}
{% if not search_query == "" %}
{% set products = craft.entries().search(search_query).all() %}
{% else %}
{% set products = craft.entries.section('shop').all() %}
{% endif %}
{% if products %}
{% for key , product in products %}
<article>
{% set preview_image = product.productimg.kind('image').one() %}
<img src='/assets/filesystem/productimg/{{ preview_image.getUrl() }}' alt='{{ preview_image.title }}'>
<div>
{% if product.tags %}
<p class='tag'>{{product.tags}}</p>
{% endif %}
<h3>{{product.title}}</h3>
<p class='productdiscription'>{{product.description}}</p>
<p class='price'>{{product.price|money}}</p>
</div>
<div>
<a class="mehr_erfahren" href="/shop/{{product.slug}}">Mehr erfahren</a>
</div>
</article>
{% endfor %}
{% else %}
<h3>Leider keine Ergebnisse.</h3>
{% endif %}
<script>
//initialising the array
searchinformation = {
suche:
{% if (search) %}
'{{search}}'
{% else %}
false
{%endif%},
kameraart:
{% if (filter_kameraart) %}
'{{filter_kameraart}}'
{% else %}
false
{%endif%},
geraeteklasse:
{% if (geraeteklasse) %}
'{{geraeteklasse}}'
{% else %}
false
{%endif%}
}
//this function will update the buttons to display if they are selected
//the buttons id are matching with the value they print into the searchinformation object
function updatebuttonlooks(){
for (parameter in searchinformation){
// trying to acess the elments -> this will only be sucessfull if the element exists
button = document.getElementById(searchinformation[parameter])
if (button){
button.classList.add("filter-activated")
}
}
}
updatebuttonlooks()
//this function manipulates the search object it includes a toggle functionality
function togglesearch(key,value){
if (searchinformation[key] == value){
searchinformation[key] = false
}else{
searchinformation[key] = value
}
sendsearch()
}
//this function manipulates the search object it does NOT include a toggle functionality but sets the value directly if not empty
function setsearch(key,value){
if (value != ""){
searchinformation[key] = value
}else{
searchinformation[key] = false
}
sendsearch()
}
//this function generates a searchquery from the searcharray
function sendsearch(){
//starting the url of with ? to indicate get parameters
url = "?"
//writing the parameter and its value if set and adding & in case another parameter is set
for (parameter in searchinformation){
if (searchinformation[parameter]){
url += parameter + "=" + searchinformation[parameter] + "&"
}
}
// delete the last & sothat the url does not end with &
url = url.slice(0, -1)
//if nothing was added to the query, reload the page without parameter (chatgpt)
if (url == ""){
history.replaceState({}, document.title, window.location.pathname);
window.location.reload()
}else{
url += "#product_list"
//reload the page
window.location.href = url
}
}
</script>
</section>
</main>
{{ include ('footer.html') }}
</body>
</html>