nicht angemeldet
Produkt als Favorit speichern
Rolf BHallo,
auf vielen Seite kann ich einen Artikel in eine Favoritenliste speichern ohne die Seite neu laden zu müssen. Dazu klicke ich auf einen Stern, danach wird dieser Gelb.
Wollte so eine Option selbst auf meiner Seite haben. Mein Aufbau ist stark gekürzt so
<div class="produkt" data-item-id="1">Fav</div>
<div class="produkt" data-item-id="2">Fav</div>
<div class="produkt" data-item-id="3">Fav</div>
<div class="produkt" data-item-id="4">Fav</div>
<div class="produkt" data-item-id="5">Fav</div>
Wenn ich auf Fav klicke soll der Eintrag im Hintergrund gespeichert werden und aus Fav soll Fav entfernen werden bzw. später dann durch einen grauen / gelben Stern ersetzt werden.
Ist dieses mögolich auch wenn ich nicht viel Kenntnisse in jQuery habe?
-
Moin,
dafür könntest du zum Beispiel localStorage verwenden. Dann blieben die Favoriten dauerhaft auf dem Rechner gespeichert.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Hallo, keine gute Idee. Ich weiß nicht ob der User sich ständig vom gleichen Rechner anmeldet. Die Daten müssen in einer Datenbank gespeichert werden.
-
Moin,
Dann helfen dir Cookies weiter.
Aus deiner Frageformulierung war nicht ersichtlich, dass du mit dem Server kommunizieren willst.
Du brauchst dann auf der Serverseite noch irgend ein Programm was die Daten in die Datenbank speichert und zum gegebenen Zeitpunkt wieder aufruft. Idealerweise sollte dies an einem Login mit Session gekoppelt sein. Da man ja sonst den User nicht zuordnen könnte.
Die Übertragung der ID der Favoriten erfolgt am besten asynchron, z.B. mittels Ajax.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-
-
-
Hallo Yvonne,
jQuery ist eine Möglichkeit von vielen, einen Abschnitt dieses Weges zurückzulegen.
\1. Favoriten offline oder online speichern?
Eine JavaScript-Lösung könnte, wie von Bobby vorgeschlagen, den localStorage verwenden. Darauf musst Du in der Datenschutzerklärung der Seite hinweisen. Es hat den Vorteil, dass Du nichts auf deinem Server speichern musst. Es hat den Nachteil, dass diese Favoriteneinstellung nur auf dem Computer und in dem Browser gilt, wo sie vorgenommen wurde.
Eine servergestützte Lösung ohne JavaScript könnte auch Cookies verwenden. Auch darauf muss die Datenschutzerklärung hinweisen.
Eine JavaScript-Lösung kann auch Cookies zum Speichern verwenden, aber der Umgang mit Cookies ist, vor allem beim Lesen, relativ sperrig.
Wenn Du die Favoriten unabhängig vom Gerät speichern willst, brauchst Du eine Benutzeranmeldung, und eine serverseitige Datenbank. Und einen Datenschutzhinweis, dass Du die Favoriten auf deinem Server speicherst.
\2. JavaScript oder serverseitige Logik?
Wenn Du in JavaScript nicht firm bist, kannst Du eine reine form-basierende Lösung bauen. Bette die Produktliste in ein form ein und setze als Fav-Funktion einen Submit-Button. Den kannst Du mit CSS so stylen, dass er gar nicht wie ein Button aussieht - es sollte aber schon erkennbar sein, dass dies ein interaktives Element ist. Die Logik kannst Du dann als Reaktion auf dem vom form ausgelösten POST komplett auf dem Server in PHP ausführen, und die Produktliste so aufbereiten, dass Favoriten und Nichtfavoriten als solche erkennbar sind. Ob Du die Favoriten am Server speicherst oder als Cookie, ist deine Entscheidung. Nachteil: Ein vollständiger POST bedeutet einen Neuaufbau des Seiteninhaltes, es werden viele Daten übertragen und der Bildschirm kann kurz flackern.
Mit Einsatz von JavaScript kannst Du das Bildschirmflackern vermeiden, musst dann aber sowohl das Speichern der Favoriteneinstellungen als auch den Update des DOM selbst ausführen. Früher war jQuery dazu fast unverzichtbar, heute gibt es relativ bequeme Möglichkeiten, das mit nativem JavaScript auszuführen. Wenn Du jQuery noch nicht gut kannst, lohnt es sich, statt dessen die nativen APIs zu erlernen. Unser Wiki enthält einiges zum DOM, relevant sind vor allem Document und Element.
Wenn Du die Darstellung von Elementen in JavaScript ändern willst, empfiehlt es sich, die classList zu manipulieren, so dass Du über Klassen-Selektoren im CSS die gewünschte Darstellung vorgeben kannst.
Wenn das Setzen/Löschen eines Elements als Favorit die Sortierung der Produktliste ändern soll, wird es umständlich. Egal ob jQuery oder nicht, das Umbauen des DOM ist mit JavaScript einfach Arbeit. Wir haben hier neulich über einen <table> Sortierer diskutiert, daraus entstand dieser Eintrag im Wiki. Da kannst Du Dir angucken, was beim Umsortieren auf Dich zukommt. Ein Postback und serverseitiger Neuaufbau kann da einfacher sein.
Rolf
--
sumpsi - posui - clusi -
Hallo Yvonne,
<div class="produkt" data-item-id="1">Fav</div> <div class="produkt" data-item-id="2">Fav</div> <div class="produkt" data-item-id="3">Fav</div> <div class="produkt" data-item-id="4">Fav</div> <div class="produkt" data-item-id="5">Fav</div>Wenn ich auf Fav klicke soll der Eintrag im Hintergrund gespeichert werden und aus Fav soll Fav entfernen werden bzw. später dann durch einen grauen / gelben Stern ersetzt werden.
Ist dieses mögolich auch wenn ich nicht viel Kenntnisse in jQuery habe?
Das ist prinzipiell möglich (Cookies, localStorage, Webservice-Call, …). Allerdings möchtest du keine
div-Elemente, sondernbuttonverwenden.Viele Grüße
Robert