Guten Morgen und willkommen im Forum!
Um dir dabei besser helfen zu können wäre es gut zu wissen, wie deine Bisherige Webseite gebaut ist (also mit welchen Technologien / Frameworks / CMSs), was du für Ansprüche an das shopping System hast und was du bereit bist für ein shopping System auszugeben.
Es wäre auch gut wenn du uns mitteilen könntest, welche Erfahrung du in der Webentwicklung hast, dann könnten wir das ebenfalls berücksichtigen.
Grüße
Andreas
Da muss ich meinen Vorrednern leider widersprechen. Das Script wirkt zwar ein wenig angestaubt, bildet aber einen fundierten Einstig ind Welt von HTML und Co.
Vor allem Der Aufbau mit den Übungen gefällt mir.
Ich habe im Übrigen, gerade den 2. Teil des Scripts gefunden, in dem unter Anderem Mediaqueries und Grid-Layout Eingeführt wird.
Ohje..., da brummt der Schädel...
Lass dich nicht verunsichern. Das beste an der Softwareentwicklung ist, wenn sich dieses Gefühl in ein "Ach so geht das, jetzt versteh ich was die mir sagen wollten" auflöst.
Wie müsste denn der Befehl aussehen, um z.B. einen sauberen fade von 500ms beim onMouseOver und Out hinzubekommen?
Wie müsste denn der Übergang aussehen?
Hast du schon mal versucht das über CSS zu implementieren?
Kleiner Tip: Um dir viele Probleme zu ersparen, versuche globale Variablen komplett zu vermeiden und global nur Konstanten anzulegen.
Wenn du in Der Funktion animateItemFromCart Werte benötigst, übergibt sie einfach beim Aufruf.
Ich verstehe nicht, wieso du die Werte aus der CSS Klasse .store-item--in-cart benötigst, du benötigst doch nur die Zielwerte des Bildes.
Die Klasse item__image hat gar keinen CSS Selector, und daher auch keine Regeln, die auf ein Element mit dieser Klasse angewandt werden können.
Wie ich in Punkt 4 geschrieben habe, musst du die Zielwerte dynamisch auslesen (Das machen wir schonmal bei der in-cart-animation) und über JS auf das erstelle Element setzen. Dann beginnt die Transition.
Ich sehe da kein Problem.
Du kannst einfach
const iconX = '<img src="myimage.png" />'definieren und beim Click über innerHTML setzen.
Du kannst in der freien Version von Codepen keine Bilder hochladen (Asset Hosting ist ein Pro feature).
Du kannst aber deine Bilder auf einer anderen Platform (zB Dropbox) hochladen und von Codepen aus darauf verweisen.
Tip:
schau dir nochmal das Arbeiten mit EventHandlern an und im speziellen, wie du den selben Handler mehrfach verwenden kannst.
Dadurch kannst du enorm viel Code einsparen.
Wie starte ich aber in animateItemFromCart die rückwärts laufende Animation?
Eine Transition (Die "Animation") startet automatisch, sobald das Item neue Styles bekommt. (Daher gibt es auch bei meinem Beispiel den Timeout)
Hallo lagraf,
ich verwende 2 Icons, die ich in der linken oberen Ecke im Bild nach jedem Click immer mittels JS austausche
Ich verstehe.
Wenn das so ist würde ich dir empfehlen, den Status des Items (ob das Item im Einkaufskorb ist oder nicht) im Element selber zu speichern. zB als data Attribute wie data-is-in-cart="true", das Attribut beim Click auf das Item abzufragen und danach zu entscheiden, ob das Item zum Einkaufskorb oder wieder hinaus animiert werden soll.
Ich wünsche dir viel Spaß beim Basteln.
Übrigens: Wenn du es dir etwas leichter machen möchtest, könntest du auch den Mutation Observer weglassen, die Timeout-Zeit ein wenig erhöhen und den Timeout direkt nach dem Erzeugen des Elementes starten.
Dabei könnte es jedoch passieren, dass auf langsamen Systemen das Element noch nicht da ist, wenn die Animation gestartet wird und das Element dann gleich im Einkaufskorb landet ohne Transition.
Grüße
Andreas
Hallo lagraf.
Wie würde eine Funktion "animateItemFromCart" in deinem Code aussehen [...]?
Im Gunde genau wie die animateItemToCart. In diesem Fall hat allerdings das Ziel eine dynamische Position und nicht der Startpunkt.
Ich würde das so in etwa umsetzen:
1. Einen neuen Click-Listener registrieren, für den "Minus" Button. (Ich weiß, dass du für Plus und Minus den selben Button geplat hast, da würde ich dir aber raten, das doch mit zwei verschiedenen Buttons zu machen.)
2. Wenn der "Minus" Button geklickt wird, würde ich dynamisch an der Stelle des Einkaufkorbes ein neues Element erzeugen (da der Einkaufskorb eine statische Position hat, kannst du das auch super mit der store-item--in-cart Klasse positionieren.)
3. Sobald das Element das erste Mal gerendert wurde (dafür musst du den Mutation Observer anpassen) würde ich, wie vorher ein par ms warten.
4. Zum Schluss würde ich dynamisch die Position und Größe des angeklickten Item-Bildes berechnen (Der Code dafür existiert im Grunde schon) und das Element dann zu dieser Position bewegen. Da die Klasse store-item schon ein transition hat, sollte das ganz automatisch gehen
Hier gibt es einen Unterschied zu der hin-Animation: Da hier zuerst eine Klasse und dann der inline-Style gesetzt wird, ist es nicht nötig, wie vorher den alten Style zu löschen. (Der Spezifität sei Dank)
5. Sobald, die Transition beendet ist, können wir das erzeuge Item wieder löschen.
Grüße
Andreas
Schau dir nochmal die Trennung von Inhalt und Präsentation mit HTML und CSS an. Das hilft dir vielleicht, zu erkennen, welcher Code wo hinein gehört.
Christoph1972 Du kannst den kompletten Code in die main schreiben.
Denk immer daran, dass du auch Funktionen in anderen Funktionen deklarieren und aufrufen kannst.
Außerdem kannst du natürlich auch modul-Funk tionen in einer Funktion aufrufen.
Solange du darauf achtest, dass die main dein Einstiegspunkt für dein Programm ist, ist alles Ok.
Grüße
Andreas
Hallo legraf,
ich habe mal einen Pen erstellt wie ich mir das vorstelle:
Die Umsetzung ist mit Vanilla JS erfolgt, warscheinlich kann man mit JQuery ein wenig Zeilen sparen, aber eigentlich kann Vanilla mittlerweile viele Dinge, für die man früher JQuery brauchte.
https://codepen.io/Mr_Beer/pen/yLaJKpG
ich habe es genauso umgesetzt, wie ich es es oben beschrieben hatte, nur habe ich mich bei der position für fixed anstatt für absolute entschieden.
Wenn du Fragen zum Code hast, frag' einfach 
Ich danke dir für die Frage. Es war eine nette kleine Aufgabe.
Grüße
Andreas
Hallo legraf.
Also wenn ich mal davon ausgehe, dass der Wahrenkorb eine absolute Positionierung auf der Der Seite besitzt, und der anzuklickende Artikel sich auf einem Scrollbaren Bereich mit variabler Höhe befindet würde ich das so angehen:
1. Zuerst würde ich eine CSS-Klasse vorbereiten, die eine transition zum Warenkorb initialisiert.
Indem sie das Bild, absolut über dem Warenkorb
positioniert.
2. Ich würde die Position des angeklickten Artikels relativ zum Fenster (nicht relativ zu der Seite!) berechnen.
3. An dieser Stelle das gewünschte Blid mit position: absolute und den gleichen Eigenschaften wie die CSS Klasse der Endposition (s1.) zB top und left einfügen.
4. Nach einem Renderframe (zB mit requestAnimatinFrame) würde ich die CSS Klasse aus 1. Setzen und die zuvor gesetzten inline Eigenschaften wieder löschen.
Dadurch fliegt dann das Bild an den gewünschten Platz.
Wenn das Bild einem Bogen beschreiben soll, kann man das nicht mit transition machen, aber sonst wäre es der selbe Ablauf.
Ich hoffe das hilft dir ein wenig.
Grüße
Andreas
steffen_72 Also was du benötigst, nennt sich Verknüpfungstabelle. (oder auch m-n Tabelle)
Das würde dann so in Etwa aussehen:
html-seminar.de/woltlab/attachment/2686/
Dadurch benötigst du die show id nicht mehr in der model Tabelle und andersrum.
Kleine Theorie:
In einer relationalen Datenbank gibt es 3 Arten von Verknüpfungen (Beziehungen):
1. Die 1-zu-1 Verknüpfung: Das Standardbeispiel ist hierfür die Ehe. Eine Person hat nur einen einzigen Ehepartner.
Hierbei taucht die ID des jeweiligen Partners in der Tabelle auf.
2. Die 1-zu-n Verknüpfung: Beispielsweise wenn zu einem Model mehrere Bilder gehören (Aber ein Bild NICHT mehreren Models zugeordnet werden kann)
Hierbei taucht die ID des Models mehrfach in der Tabelle für die Bilder auf (In der Tabelle der Models findet sich keine Bild-ID)
3. Die m-zu-n Verknüpfung: Beispielsweise Mehrere Models haben an mehreren Shows teilgenommen.
Hierbei benötigt man eine weitere Tabelle, die als Verknüpfung dient und die Show IDs und die Model IDs beliebig oft enthalten kann. (In der Model und in der Shows Tabelle tauchen keine IDs der jeweils anderen Tabelle auf.)
Sempervivum Du hast recht, an dem Ergebnis hat das Anpassen der Datenbank nichts geändert.
Die Daten wurden nur handhabbarer gemacht.
Ich frage mich gerade, was die Abfrage bringen soll.
Wenn man Alle Shows mit allen Models abfragen, aber kein Model doppelt haben möchte, hat man doch unvollständige Daten.
Wenn man all Models mit Allen Shows abfragen, aber keine Show doppelt haben möchte, hat man ebenfalls unvollständige Daten.
Und wenn man alle shows zu einem Model oder alle Models zu einer Show haben möchte, sollte es keine doppelten Einträge geben.
Oder seh' ich das falsch?
Edit:
steffen_72 Ich sehe gerade, dir fehlt in deinem Schema eine Show Tabelle zu deiner Show-Model m-n-Relation ist das vielleicht das problem?
Hallo Steffen,
Ja das hilft, um eine Übersicht über deine Datenbank zu bekommen.
Kannst jetzt nochmal dein Problem beschreiben?
In irgendeiner Tabelle sind nun doppelte Einträge, die du herausfiltern möchtest.
Um welche Tabelle handelt es sich und warum sind die überhaupt doppelt?
Grüße
Andreas
Nein, als CREATE-TABLE- und INSERT-Querys in Textform.
Das gibt es leider öfters als man vermutet.
Vor Allem wenn man es es mit Migrations zu tun hat.
Hallo Steffen,
Um dir dabei helfen zu können, brauchen wir (oder zumindest ich) Das jetzige Datenbankschema.
Am besten als Diagram (zB. als ER-Diagram)
Viele DBMS (zB phpMyAdmin) können das auch selber generieren.
Übrigens:
Für die Stabilität seiner Datenbak empfehle ich dir dringend Fremdschlüssel zu verwenden.
Grüße
Andreas
Hallo Christoph,
Würde das in dem Fall funktionieren?
wenn du in dem Kontext der main Funktion bis zum Ende bleibst ja. Dann ist das ja so, als wenn du die variable erst in der main deklariert hättest:
function main (users) {
var _users = [];
_users = users;
}Ich hatte deine erste Frage so verstanden, als wenn du auf die geladenen User im übergeordneten Kontext zugreifen möchtest und das ist aus timing Gründen nicht möglich.
Grüße
Andreas
Hallo Steffen,
Ich kann m.scatello da nur zustimmen.
Ein Indikator dafür, dass hier zu viele Daten gemischt werden ist auch der, dass hier in einer Tabelle mehrere IDs gelistet sind (und so wie ich das sehe sind das keine Fremdschlüssel oder?)
Daraus kann man schon mal ablesen, dass du mindestens zwei Tabellen benötigst.
- shows
- models
Grüße
Andreas