AJAX Shop mit Drag & Drop (Work In Progress)

intergraphica · 01.04.2009

Dieser Shop befindet sich derzeitig (01.04.2009) in Entwicklung. Konzept: Artikel per Drag & Drop in den Warenkorb ziehen. Um sie wieder zu löschen: Artikel herausziehen. Anmerkung: Die Dame auf dem Foto im Warenkorb ist geklaut, das Foto wird in Kürze nachgebaut.

Troubleshooting: In Safari 4 gibt es noch einen Bug mit dem Web2.0 typischen Spiegeleffekt, hier verrutschen teilweise die per AJAX geladenen Thumbnails. Auch macht der Internet Explorer Probleme mit der Aktualisierung des Warenkorb-Cookies. In Firefox läuft's soweit.

Screendesign hier.
Beta-Version hier.

rm -r * · 01.04.2009

Huhu intergraphica
Interessante Sache und das Design finde ich auch ganz schön.

Imho solltest Du aber nicht nur aus Web 2.0 achten, sondern auch auf gutes, valides X-HTML.

Du setzt zwar teilweise divs ein und arbeitest ein wenig mit CSS, aber trotzdem benutzt Du Tabellenelemente für Abstände usw.

CSS solltest Du auch konsequent in eigene Dateien auslagern und nicht in die Seite packen.

Wenn Du vorhast die Seite X-HTML strict/transitional zu machen, solltest Du das noch in Deinem HTML-Seitenkopf definieren und vor allen NICHTS über Deinem HTML-Quelltext ausgeben.

<html>

Das oben, geht ja mal gar nicht.

Ansonsten schöne Spielerei (Drag + Drop), um mal zu zeigen, was man alles machen kann, aber wenn ich die Wahl habe, per Mousebewegung irgendein Item auf den Warenkorb zu ziehen, oder einfach auf das Warenkorbsymbol zu klicken, würde ich das letztere machen.

Nachtrag: Ach ja. Oben die graue Navigation auf dem roten Hintergrund mit den Streifen, ist ja schon für Menschen ohne Sehschwäche, kaum zu lesen.
Da solltest Du nochmal ran.

Nachtrag2: Ohne Javascript passiert auf der Seite gar nichts. Das ist ein wenig Schade.

Nachtrag3: Im IE6 kann ich auf der rechten Seite den Warenkorb gar nicht sehen.

intergraphica · 01.04.2009

PHP Funktionen zur Preisberechnung

Diese PHP Funktion wandelt Float (=Preis wie z.B. 24.5) in einen String mit Komma und stets 2stelliger Centanzeige:

PHP:

function kaufmannswert ($wert) {
$wert = number_format($wert, 2, '.', ' ');
$wert = str_replace('.', ',', $wert);
return $wert; 
}

Aufruf des Parsers:

PHP:

$preis_neu = kaufmannswert ($preis_alt);
echo $preis_neu;

Dieses Skript fasst alle gleichen Artikel zusammen, vergleichbar mit einer mySQL Anweisung wie ORDER BY. Der ausgelesene Cookie enthält alle im Warenkorb gesammelten Artikel, durch Kommata getrennt. Diese werden nach der id (=Bestellnummer) mit der Datenbank verglichen und die jeweiligen Preise ermittelt (hier nicht aufgeführt).

PHP:

// Fetch Cookie
$cookie = $_COOKIE["THE_CART"];
$artikel = spliti (",", $cookie);
$gesamtpreis=0;

// Gleiche Artikel zusammenfassen
$AnzahlGleicherArt = array_count_values($artikel);

foreach($AnzahlGleicherArt as $item=>$wieviel) {

      $preis = 29.99; // wird aus Datenbank ausgelesen
      $einzelpreis = $preis * $wieviel;
      $gesamtpreis += $einzelpreis;
      echo "Artikel: ".$item." 
           Anzahl: ".$wieviel." 
           Einzelpreis: ".kaufmannswert($einzelpreis)."<br>";
}

echo "Gesamtpreis: ".kaufmannswert($gesamtpreis)."";

Emagdnim · 01.04.2009

Bei mir werden items schon zum Warenkorb hinzugefügt, wenn ich sie nur 20 Pixel weit verschiebe.

Ich würde von dem Spiegeleffekt absehen. Je grösser die Produktanzahl auf einer Seite ist, desto unübersichtlicher wird die Geschichte.

intergraphica · 01.04.2009

rm -r * schrieb:
Du setzt zwar teilweise divs ein und arbeitest ein wenig mit CSS, aber trotzdem benutzt Du Tabellenelemente für Abstände usw.

CSS solltest Du auch konsequent in eigene Dateien auslagern und nicht in die Seite packen.

Mach ich später. Ich bin ja noch am rumbasteln, da schieb ich mit css noch innerhalb der Seite rum.

rm -r * schrieb:
Wenn Du vorhast die Seite X-HTML strict/transitional zu machen, solltest Du das noch in Deinem HTML-Seitenkopf definieren und vor allen NICHTS über Deinem HTML-Quelltext ausgeben.

Das oben, geht ja mal gar nicht.

hmmm... Du hast Recht!

rm -r * schrieb:
Nachtrag: Ach ja. Oben die graue Navigation auf dem roten Hintergrund mit den Streifen, ist ja schon für Menschen ohne Sehschwäche, kaum zu lesen.
Da solltest Du nochmal ran.

Naja, mir gefällt's so. Aber bestimmt gibt es eine grafische Grundregel, die das als unschön definiert.

rm -r * schrieb:
Nachtrag2: Ohne Javascript passiert auf der Seite gar nichts. Das ist ein wenig Schade.

Ist wie gesagt ein AJAX-Shop, und AJAX ist Javascript, ohne Javascript geht da nix...

rm -r * schrieb:
...und das Design finde ich auch ganz schön

Hach prima. Wenigstens stößt einmal die Optik auf Gefallen.
Ich bin ein dermassen untalentierter Gestalter.

dehose · 01.04.2009

Das X zum Schließen der Großansicht der Bilder ist deutlich zu klein.

intergraphica · 01.04.2009

Emagdnim schrieb:
Bei mir werden items schon zum Warenkorb hinzugefügt, wenn ich sie nur 20 Pixel weit verschiebe.

Ich muss den Bereich des Warenkorbs in x,y später noch definieren. Derzeitig wird nur geprüft, ob sich die x,y Koordinate beim Drag-Start verändert. Ist noch problematisch, da der ganze Shop ja zentriert ist und ncht mit absoluten Divs arbeitet.

Emagdnim schrieb:
Ich würde von dem Spiegeleffekt absehen. Je grösser die Produktanzahl auf einer Seite ist, desto unübersichtlicher wird die Geschichte.

Ich denke, ich werde eine "Pseudo-Spiegelung" bauen, ohne reflection.js, einfach eine immer-gleiche png-Grafik mit einem transparenten Farbverlauf unten drunter setzen. So viele Thumbs werden auf der Seite übrigens eh nicht zu sehen sein (siehe Screendesign-Konzept), da gibt's bei umfangreicheren Kategorien eine Pagination.

intergraphica · 01.04.2009

dehose schrieb:
Das X zum Schließen der Großansicht der Bilder ist deutlich zu klein.

Das ist noch experimentell. Es wird später keine Popup-Großansicht in dieser Art geben, sondern auch per Ajax in die Seite reingeladen, und in diesem Fall mit einem deutlich sichtbaren "Zurück"-Button.

Mein Konzept ist jedenfalls, daß der Shop jeden Inhalt per AJAX nachlädt und sich alles auf nur einer URL abspielt, so wie hier*

*endgeil gemacht (aber hat in Internet Explorer auch Probleme)

dms · 01.04.2009

In Opera geht gar nix.

intergraphica · 01.04.2009

dms schrieb:
In Opera geht gar nix.

Sieht so aus, als müsste ich die ganze "Spielerei" als Option laufen lassen und doch besser mit herkömmlichen Standards arbeiten... Wenn nur alle User Firefox hätten...

EDIT: würde dann auch bedeuten: Cookies wech, Bestellung per Formular und alle Daten als PHP Session speichern. Mist...

intergraphica · 25.04.2009

So. Es gibt einige Verbesserungen.

1. Drag&Drop im Warenkorb funktioniert nun auch im IE, Grund: Datenzwischenspeichern über Cookies machte Probleme, da sich der Cache nicht zügig aktualisiert hat. Typischer IE Fehler.

2. Eine neue Funktion fragt die X,Y Koordinaten des Drag-Artikels und Warenkorbs ab und prüft, ob sich der Artikel in oder außerhalb des Warenkorbs befindet. Das ganze wurde noch durch zusätzliche Symbole erweitert (und macht jetzt um so mehr Spaß).

3. CSS Code wurde komplett ausgelagert und wird per PHP aus der Datenbank beim Seitenladen eingelesen. Die ganze Seite ist über das Backend im Design anpassbar (inkl. Datei-Upload für Grafiken).

4. Es gibt nun schon 2 Shops, die parallel entwickelt werden. Zum einen der Euch schon bekannte [noparse]moebeltraeume.de/shop.php[/noparse], dann noch ein neuer namens [noparse]animal-beauty-store.de[/noparse]

Ich freu mich über Eure Anregungen.

intergraphica · 25.04.2009

Emagdnim schrieb:
Bei mir werden items schon zum Warenkorb hinzugefügt, wenn ich sie nur 20 Pixel weit verschiebe.

Korrigiert. Optimiert.

Emagdnim schrieb:
Ich würde von dem Spiegeleffekt absehen. Je grösser die Produktanzahl auf einer Seite ist, desto unübersichtlicher wird die Geschichte.

Ich hab's alternativ folgendermaßen gelöst:

Code:

.reflection {
padding-bottom: 21px; 
background: url(reflection.gif); 
background-repeat: repeat-x; 
background-position: left bottom; 
}

<img class="reflection" src="artikelbild.jpg">

dms schrieb:
In Opera geht gar nix.

Anpassung folgt noch.

Atarimaster · 26.04.2009

intergraphica schrieb:
Ist wie gesagt ein AJAX-Shop, und AJAX ist Javascript, ohne Javascript geht da nix...

Naja, das heißt ja nicht, dass es unmöglich wäre, den Shop so zu schreiben, dass er auch bei abgeschaltetem JS funktioniert.

Zugegebenermaßen würde mir das auch zweimal überlegen: Ob sich der zusätzliche Entwicklungsaufwand für die paar potentiellen Kunden, die ohne JS daherkommen, wirklich lohnt?
Andererseits werden natürlich auch Suchmaschinen ausgebremst…

intergraphica · 28.04.2009

Atarimaster schrieb:
Zugegebenermaßen würde mir das auch zweimal überlegen: Ob sich der zusätzliche Entwicklungsaufwand für die paar potentiellen Kunden, die ohne JS daherkommen, wirklich lohnt?
Andererseits werden natürlich auch Suchmaschinen ausgebremst…

Kunde wollte das so.
Und ich find das Drag&Drop auch cool, hat nicht jeder.
Ich werde keine extra HTML Version programmieren,
nur soweit anpassen, dass sie crossbrowserkompatibel ist.

Atarimaster · 29.04.2009

intergraphica schrieb:
Kunde wollte das so.

Gut – ich mache mir, zugegebenermaßen, auch keine Arbeit, die ich nicht bezahlt bekomme.

intergraphica schrieb:
Und ich find das Drag&Drop auch cool, hat nicht jeder.

Dagegen sage ich ja auch nichts.

intergraphica schrieb:
Ich werde keine extra HTML Version programmieren

Ich meinte auch nicht (nur, um Missverständnisse zu vermeiden), dass es zwei Shopversionen geben soll – sondern »nur«, dass der Shop so geschrieben ist, dass er zur Not halt auch ohne JS funktioniert.

Möglich ist das – aber eben ein Mehraufwand. Welcher ausdrücklich gewünscht und bezahlt werden muss. Ist dies nicht der Fall, würde ich das auch nicht so anfertigen.

intergraphica · 29.04.2009

Atarimaster schrieb:
Möglich ist das – aber eben ein Mehraufwand. Welcher ausdrücklich gewünscht und bezahlt werden muss. Ist dies nicht der Fall, würde ich das auch nicht so anfertigen.

Ich werd genau diesen Text dem Kunden nochmal unterbreiten. Es würde schon ein größerer Aufwand sein, da:

1. der Warenkorb-Inhalt zwar schon durch eine PHP-Funktion berechnet wird (und nicht über Javascript), jedoch ist AJAX nötig, um die Daten an die Funktion zu senden. Also müßte alles auf Formulare und eine PHP Session umgestellt werden.

2. Die Popupfenster würden entfallen, deren Inhalt würde dann im Mittelteil der Seite ausgegeben werden.

stevemcqueen · 15.05.2009

Hättest du mal lieber vorher im web gesucht

http://www.ajax-onlineshop.de/

Umsonst, Open Source... Im Blog steht ab der nächsten Version mit Suchmaschinenoptimierung, so lange würde ich dann noch evtl. warten, dort steht wenige Wochen...

Viel Spass

AJAX Shop mit Drag & Drop (Work In Progress)

intergraphica

Mitglied

rm -r *

Aktives Mitglied

intergraphica

Mitglied

Emagdnim

Aktives Mitglied

intergraphica

Mitglied

dehose

unregistriert

intergraphica

Mitglied

intergraphica

Mitglied

dms

intergraphica

Mitglied

intergraphica

Mitglied

intergraphica

Mitglied

Atarimaster

Aktives Mitglied

intergraphica

Mitglied

Atarimaster

Aktives Mitglied

intergraphica

Mitglied

stevemcqueen

Registriert