Hallo zämä
Ich könnte etwas Unterstützung bei JavaScript brauchen, da ich da nicht wirklich fit darin bin.
Im Shop, möchte ich zwei unterschiedliche Listen-Ansichten anbieten.
Habe dazu zwei Links mit den Icons gesetzt:
HTML-Code:
<div id="contentswitcher">
<a id="ansicht_hori" onclick="add()">{{image::06cabf3a-1446-11eb-9f68-001c429f067c}}</a>
<a id="ansicht_vert" onclick="remove()">{{image::06d7ebe1-1446-11eb-9f68-001c429f067c}}</a>
</div>
Damit ich jeweils nur das korrekte Icon angezeigt bekommen, wird per JS bei Klick eine Klasse hinzugefügt/entfernt:
Code:
function add() {
document.getElementById("ansicht_hori").className = "noactive";
document.getElementById("ansicht_vert").className = "active";
document.getElementById("list").className = "product_list_vertical";
}
function remove() {
document.getElementById("ansicht_hori").className = "active";
document.getElementById("ansicht_vert").className = "noactive";
document.getElementById("list").className = "product_list";
}
Frage 1: Kann man dieses JS gebündelter schreiben oder ist das okay?
Soweit funktioniert das ziemlich gut. Jetzt besteht mein Problem darin, das wenn die Seite neu geladen wird, zum Beispiel wenn man ein Produkt dem Warenkorb hinzufügt oder wenn man auf eine andere Produkteseite geht, werden die Klassen wieder zurückgesetzt. Nun war meine Idee, dass mittels "localStorage" zu lösen.
Das ist mein Versuch, welcher aber leider nicht greift:
Code:
function saveContent(){
var listenansicht =$('#ansicht_hori', '#ansicht_vert', '#product_list').html();
localStorage['#ansicht_hori', '#ansicht_vert', '#product_list']=listenansicht;
}
function restoreContent(){
var mylistenansicht = localStorage['listenansicht'];
if (mylistenansicht != undefined) {
$('#ansicht_hori', '#ansicht_vert', '#product_list').html(mylistenansicht);
}
Ich verstehe zwar wie "localStorage" funktioniert, weiss aber nicht wirklich wie man das anwendet.
Kann man darüber auch Klassen speichern oder gilt das nur für Inhalt?
Würde mir wer von euch JS Helden hier bitte etwas unter die Arme greifen?
Lesezeichen