Contao-Camp 2024
Ergebnis 1 bis 12 von 12

Thema: Unterschiedliche Listenansicht -> JS localStorage

  1. #1
    Contao-Fan
    Registriert seit
    17.10.2012.
    Ort
    Bern - Schweiz
    Beiträge
    443

    Standard Unterschiedliche Listenansicht -> JS localStorage

    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?

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.898
    Partner-ID
    10107

  3. #3
    Contao-Fan
    Registriert seit
    17.10.2012.
    Ort
    Bern - Schweiz
    Beiträge
    443

    Standard

    hmmm... schnalle es irgendwie nicht:

    Zum speichern der Daten:
    Code:
    localStorage.setItem('ansicht_hori','ansicht_vert','list');
    Kann man das so schreiben?

    Zum ausgeben, dann etwa so?
    Code:
    const cat = localStorage.getItem('ansicht_hori','ansicht_vert','list');

  4. #4
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.898
    Partner-ID
    10107

    Standard

    Nein, das ist falsch, siehe die Definition von setItem und getItem.

  5. #5
    Contao-Fan
    Registriert seit
    17.10.2012.
    Ort
    Bern - Schweiz
    Beiträge
    443

    Standard

    Ok, ich glaube langsam zu begreifen
    Was ich noch nicht verstehe: Wie weiss ich, welchen keyValue (das wäre ja nun die entsprechende Klasse) der User momentan aktiv hat?

  6. #6
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.898
    Partner-ID
    10107

    Standard

    Ich verstehe leider deinen Code und dein Vorhaben nicht, daher kann ich dir das nicht beantworten

  7. #7
    Contao-Fan
    Registriert seit
    17.10.2012.
    Ort
    Bern - Schweiz
    Beiträge
    443

    Standard

    Im Shop werden die Produkte als Kacheln dargestellt.
    Nun möchte ich die Möglichkeit bieten, das man per Klick auf ein Icon, die Produkte anstatt in der Kachelansicht als Listenansicht erhält.

    Das sind die zwei Icons:
    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>
    Nun ändere ich per Klick auf ein Icon, die entsprechende Klasse damit ich dies dann als Listenansicht stylen kann.

    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";
          }

    Hat ein User also auf die Listenansicht umgestellt, sollte dies gespeichert werden, ansonsten kriegt er beim Wechsel auf eine andere Produkteseite oder beim hinzufügen in den Warenkorb wieder die Kachelansicht.

    Nun müsste ich ja wissen, welche Ansicht der User eingestellt hat damit die entsprechende Klasse gespeichert werden kann.

  8. #8
    Contao-Fan
    Registriert seit
    17.10.2012.
    Ort
    Bern - Schweiz
    Beiträge
    443

    Standard

    Da ich sicher nicht der Erste bin der so etwas umsetzen möchte, würde mich interessieren, wie ihr das umgesetzt habt?
    Ist mein gewählter Weg eventuell nicht geeignet?

    Zudem: Können Klassen per localStorage überhaupt gespeichert werden oder ist dies eher nur für Werte?

  9. #9
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.898
    Partner-ID
    10107

    Standard

    Eine CSS Klasse ist ja nur ein String. Den kannst du auf jeden Fall in localStorage speichern.

  10. #10
    Contao-Fan
    Registriert seit
    17.10.2012.
    Ort
    Bern - Schweiz
    Beiträge
    443

    Standard

    Super, dann sollte das ja gehen. Wie genau ich das nun bewerkstellige weiss ich noch nicht so genau

    Also den Wert in localStorage schreiben:

    Code:
    function populateStorage() {
      localStorage.setItem('ansicht_hori');
      localStorage.setItem('ansicht_hori');
      localStorage.setItem('list');
    }

    Dann zum Ausgeben würde es etwa so aussehen:

    Code:
    function setStyles() {
      var ansichtHori = localStorage.getItem('ansicht_hori');
      var ansichtVert = localStorage.getItem('ansicht_vert');
      var list = localStorage.getItem('list');
    
      document.getElementById('ansicht_hori').value = ansichtHori;
      document.getElementById('ansichtVert').value = ansichtVert;
      document.getElementById('list').value = list;
    Beim speichern fehlt mir ja nun der keyValue. Wie kriege ich den aktuell gesetzten Wert da rein?

  11. #11
    Contao-Fan
    Registriert seit
    17.10.2012.
    Ort
    Bern - Schweiz
    Beiträge
    443

    Standard

    Die Klassen werden nun wie folgt gespeichert:
    Code:
    function populateStorage() {
      localStorage.setItem('ansicht_hori', document.getElementById("ansicht_hori").className);
      localStorage.setItem('ansicht_vert', document.getElementById("ansicht_vert").className);
      localStorage.setItem('list', document.getElementById("list").className);
    }
    Nun hänge ich aber an der Ausgabe fest. Wie genau kriege ich das nun wieder ausgelesen?
    Code:
    function setStyles() {
      var ansichtHori = localStorage.getItem('ansicht_hori');
      var ansichtVert = localStorage.getItem('ansicht_vert');
      var list = localStorage.getItem('list');
    
      document.getElementById('ansicht_hori').value = ansichtHori;
      document.getElementById('ansichtVert').value = ansichtVert;
      document.getElementById('list').value = list;
    }
    Geändert von Dee (23.10.2020 um 17:20 Uhr)

  12. #12
    Contao-Fan
    Registriert seit
    17.10.2012.
    Ort
    Bern - Schweiz
    Beiträge
    443

    Standard

    Irgendwie funktioniert das nicht und ich habe keine Idee warum.

    Hier der Code um die Daten zu speichern:
    Code:
    function saveInLocalStorage() {
    if(hasLocalStorage()) {
      window.localStorage.setItem('ansicht_hori', document.getElementById("ansicht_hori").className);
      window.localStorage.setItem('ansicht_vert', document.getElementById("ansicht_vert").className);
      window.localStorage.setItem('list', document.getElementById("list").className);
    }
    Gleichzeitig muss dies ja auch wieder ausgegeben werden:

    Code:
    function getLocalStorage() {
      if(hasLocalStorage()) {
        if (window.localStorage.getItem("ansicht_hori") !== null) {
          document.getElementById('ansicht_hori').className = window.localStorage.getItem('ansicht_hori');
        }
        if (window.localStorage.getItem("ansicht_vert") !== null) {
          document.getElementById('ansicht_vert').className = window.localStorage.getItem('ansicht_vert');
        }
        if (window.localStorage.getItem("list") !== null) {
          document.getElementById('list').className = window.localStorage.getItem('list');
        }
      }
    }
    Habe keinen Plan, ob ich damit auf dem richtigen Weg bin. Einige Tipps und Anregungen würden sicher weiterhelfen.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •