Jump to content
xt:Commerce Community Forum
Sign in to follow this  
gswkaiser

xtc und AJAX, ein Traumpaar!

Recommended Posts

AJAX ist ein Akronym f?r die Wortfolge Asynchronous Javascript And XML.

Es bezeichnet ein Konzept der Daten?bertragung zwischen einem Server und dem Browser, welches es erm?glicht, dass die HTML-Seite nicht mit jeder HTTP-Protokoll-Anfrage komplett neu geladen werden muss. Das eigentliche Novum besteht in der Tatsache, dass nur gewisse Teile einer HTML-Seite sukzessive bei Bedarf nachgeladen werden.

AJAX ist derzeit das "Hot-Topic" in der Web-Entwicklung.

(Weitere Info dazu z.B. ?ber http://de.wikipedia.org/wiki/Ajax_(Programmierung) .)

Nach einigen ?berlegungen zum Thema bin ich dann zu dem Ergebnis gekommen, dass die notwendigen ?nderungen in xtc, dank des "Smarty"-Template-Konzepts, erstaunlich moderat sein w?rden, und habe das mal implemetiert (mit xtc Version 2).

(Mit osCommerce z.B. h?tte ich dieses Konzept nie verfolgen k?nnen, da damit, wegen der ?berall verstreuten HTML-Generierung, ein enormer Aufwand verbunden gewesen w?re. Ein Hoch auf "Smarty"! Daher funktioniert das Konzept auch nur im User-Bereich, nicht im Admin-Bereich, da der noch sehr "osCommerce"-ig ist.)

Der mit der AJAX-Technik ?bertragene Text sollte die folgenden 10 Abschnitte enthalten:

(Das sind m.E. alle Bereiche, die sich bei jeder Verarbeitung ?ndern k?nnen. Alle anderen Bereiche sind mehr oder weniger statisch!)

(Die Bereichs-Namen m?ssen den in den Templates verwendeten "Smarty"-Namen f?r die Inhalte entsprechen.)

Name --> Seiten-Bereich

===================================================================================

navtrail --> Inhalt des oberen Navigationsbereichs

box_CATEGORIES --> Inhalt des Kategorienbereichs (Kategorien-Box)

box_WHATSNEW --> Inhalt des Neuigkeitenbereichs (Neuigkeiten-Box)

box_REVIEWS --> Inhalt des Bewertungenbereichs (Bewertungen-Box)

main_content --> Inhalt des mittleren Anzeigbereichs

box_CART --> Inhalt des Warenkorbs (Warenkorb-Box)

box_LOGIN --> Inhalt des Login-Bereichs (Login-Box)

box_ADMIN --> Inhalt des Admin-Bereichs (Admin-Box)

box_NOTIFICATIONS --> Inhalt des Benachrichtigungen-Bereichs (Benachrichtigungen-Box)

box_TELL_FRIEND --> Inhalt des Empfehlen-Bereichs (Empfehlen-Box) (Wenn ?berhaupt verwendet.)

Um AJAX-f?hig zu sein, muss die "index.html" des Templates so modifiziert werden, dass die zuvor genannten Bereiche f?r Javascript identifizierbar sind, da man mit der AJAX-Technik ja erreichen will, m?glichst kleine Bereiche auszutauschen.

Das erreicht man dadurch, dass diese Bereiche in identifizierbare HTML-Elemente plaziert werden, diese m?ssen also einen Namen ("ID") erhalten.

"{main_content}" ist i.d.R. schon in einen "TD"-Tag eingeschlossen, so dass darin nur der der Bereichs-ID (ID="Name") zu setzen ist.

("<TD ID="main_content" ....>")

Die restlichen Elemente ("{$box_xxxxx}" und "{$navtrail}") m?ssen in einen "SPAN"-Tag eingeschlossen werden:

{$Name} wird so zu <SPAN Id="Name">{$Name}</SPAN>.

Beispiele:

Navigation und Main-Content

<span id="navtrail">{$navtrail}</span>

<td id="main_content" class="tableBody" align="left" valign="top" width="61%">{$main_content}</td>

Linke Spalte

<span id="box_CATEGORIES">{$box_CATEGORIES}</span>

<span id="box_SEARCH">{$box_SEARCH}</span>

<span id="box_ADD_QUICKIE">{$box_ADD_QUICKIE}</span>

<span id="box_INFORMATION">{$box_INFORMATION}</span>

<span id="box_WHATSNEW">{$box_WHATSNEW}</span>

<span id="box_AFFILIATE">{$box_AFFILIATE}</span>

<span id="box_CONTENT">{$box_CONTENT}</span>

<span id="box_REVIEWS">{$box_REVIEWS}</span>

<span id="box_INFORMATION">{$box_INFORMATION}</span>

<span id="box_SPECIALS">{$box_SPECIALS}</span>

Rechte Spalte

<span id="box_CART">{$box_CART}</span>

<span id="box_LOGIN">{$box_LOGIN}</span>

<span id="box_INFOBOX">{$box_INFOBOX}</span>

<span id="box_ADMIN">{$box_ADMIN}</span>

<span id="box_BESTSELLERS">{$box_BESTSELLERS}</span>

<span id="box_ADMIN">{$box_ADMIN}</span>

<span id="box_NOTIFICATIONS">{$box_NOTIFICATIONS}</span>

<span id="box_TELL_FRIEND">{$box_TELL_FRIEND}</span>

Im "AJAX-Modus" wird von xtc eine Seite zur?ckgegeben, die den HTML-Text jedes ber?cksichtigten Bereichs (wenn er denn erstellt wurde), eingeschlossen in das Label "#Name#" (wobei "Name" einer der vorstehenden Namen ist).

(box_LOGIN wird z.B. nur bis zum Login erstellt, box_ADMIN erscheint nur nach einem Admin-Login.)

Beispiel: #box_TELL_FRIEND#HTML-Text f?r die TELL_FRIEND-Box#box_TELL_FRIEND#.

?ber ein Javascript-Modul wird der mit AJAX-Technik ?bertragene Text anhand der Abschnittsmarken ("#Name#") getrennt, der entsprechende HTML-Text wird dann in das entsprechende Seiten-Element (mit "ID="Name") der xtc-Seite eingef?gt.

===============================================================================================

Die ?nderungen in xtc sind ausserordentlich moderat, und betreffen die folgenden Module:

In der "includes/application_top.php" wird

- definiert, ob ?berhaupt mit AJAX gearbeitet werden soll

- (einmalig) gepr?ft, ob der Client-Browser Javascript aktiviert hat

(Wenn nicht, wird keine AJAX-Verarbeitung durchgef?hrt.)

- gepr?ft, ob die aktuelle Anforderung an xtc im AJAX-Modus ausgef?hrt werden soll

(Der Parameter "ajax=true" ist vorhanden).

- festgelegt, welche HTML-Bereiche der Seite mit AJAX bearbeitet werden sollen

("define('AJAX_DATA_ELEMENTS', "navtrail box_CATEGORIES box_WHATSNEW box_REVIEWS main_content box_CART box_LOGIN box_ADMIN box_NOTIFICATIONS box_TELL_FRIEND");")

In der "inc/xtc_href_link.inc.php" wird

- im AJAX-Modus der Link in eine Javascript-Routine eingeschlossen.

Statt

"http://www.meinserver.de/index.php?...."

wird dann ein Link der Form

javascript:make_AJAX_Request("http://www.meinserver.de/index.php?....&ajax=true")

generiert.

In der "includes/header.php" wird

- wird das f?r den AJAX-Suport notwendige Javascript-Modul in die Seite eingebaut

function make_AJAX_Request(url)

--> Kennzeichnet den Link als "AJAX"-Link und sendet eine asynchrone Anforderung an den Server

function setContents()

--> Empf?ngt die Daten asynchron vom Server, splittet den Inhalt in die einzelnen Bereiche,

und schreibt diese (HTML-)Daten in den zugeh?rigen Bereich des HTML-Dokuments.

("document.getElementById("ID-Name").innerHTML = HTML-Text")

function extractText(textstring, delimiter)

--> Extrahiert einen mit "#delimiter#" eingeschlossenen Text aus einem Gesamttext.

In der "includes/classes/smarty_2.6.2/Smarty.class.php" wird

- an den Anfang der "function fetch" Zusatzcode eingef?gt (nur ca. 25 Zeilen!),

der im AJAX-Modus nur den HTML-Code aller f?r die AJAX-Verarbeitung definierten HTML-Module

("define('AJAX_DATA_ELEMENTS'....") ausgibt.

Das zeitaufw?ndige Kompilieren der gesamten "index.html" entf?llt dann!

(Die ?nderung der "Smarty.class.php" hat mir eigentlich nicht so gefallen, weil das eine entsprechende ?nderung in evtl. neuen "Smarty"-Versionen erfordert. Die Alternative w?re aber eine ?nderung in "zig" xtc-PHP-Modulen gewesen. Da diese ?nderung an einer Stelle konzentriert und zudem sehr moderat ist, habe ich mich dann doch daf?r entschieden.)

Was hat man aber nun davon???

Zum Einen wird die Verabeitung etwas schneller werden, da nicht mehr die gesamte "index.html" von "Smarty" gerendert werden muss.

Zum Anderen (und das ist wirklich spektakul?r!) wird die Seite bei einem "Klick" im Browser nicht gel?scht und komplett wieder aufgebaut, sondern es werden nur die ge?nderten Teile der HTML-Seite aktualisiert. Das Browserbild bleibt bestehen und flackert nicht mehr!

===============================================================================================

Die Implemtierung ist recht weit fortgeschritten, muss aber noch ausf?hrlicher getestet werden.

Wenn gen?gend allgemeines Interesse daran besteht, w?rde ich das Ganze als Contribution dokumentieren und bereitstellen.

Bei Interesse also bitte eMail an mich.

Share this post


Link to post
Share on other sites

H?rt sich sehr sehr interessant an.

Ich w?re an sowas auch f?r 3.0.X interessiert.

Ich glaube n?mlich dass die Unterschiede zwischen Version 2 und Version 3 zu gro? sein werden um es auf die 3er Version ?bertragen zu k?nnen.

Auch wenn ich es evtl.nicht nutzen werden kann, trotzdem Vielen Dank f?r deine M?hen! Freue mich jedesmal ?ber Beitr?ge von dir!

Share this post


Link to post
Share on other sites

ja, hatte vor kurzem nen interessanten bericht ?ber ajax inner ix gelesen.

ist sicherlich f?r xtc interessent, jedoch bleibt zu beachten das daf?r zwingend javascript erforderlich ist.

f?r die template elemente ist ajax eigentlich nicht so interessant (da das nachladen der ganzen seite sowieso kaum last erzeugt), ajax ist vorallem in der form validierung evtl einsetzbar.

Share this post


Link to post
Share on other sites

Sehr interessantes Thema!

Ich hatte auch gerade etwas ?ber AJAX gelesen und direkt an xtc gedacht.

Vielen Dank f?r die detailreiche Ausf?hrungen, gswkaiser! Das klingt ja so, als h?ttest Du die Sache schon so gut wie fertig. Hast Du eine Testseite?

Ich halte es besonders dann f?r interessant, wenn der Kunde ein Produkt in den Warenkorb legt. Bei entsprechender Anpassung wird dann nur die Warenkorbbox neu geladen. Das w?rde sich besonders beim Button "Sofortkauf" im Produktlisting bemerkbar machen.

Gr??e

p3e

Share this post


Link to post
Share on other sites

Originally posted by mzanier+Jan 4 2006, 02:04 PM--><div class='quotetop'>QUOTE(mzanier @ Jan 4 2006, 02:04 PM)</div><div class='quotemain'>f?r die template elemente ist ajax eigentlich nicht so interessant (da das nachladen der ganzen seite sowieso kaum last erzeugt)

Quoted post

Was ich mir auf jeden Fall spare ist das Rendern der index.html, Smarty muss halt nur noch die Boxen rendern. Und ein paar von den Boxen kann ich mir auch sparen, da sie statisch sind

Mir gef?llt aber sowieso am Besten die flickerfreie Bilddarstellung, das alleine ist mir schon den (ja ?berraschend geringen) Aufwand wert. Und der subjektive Eindruck beim Laden einer Kategorie z.B. ist: sauschnell im Vergleich zum kompletten nachladen!

Originally posted by [email protected] 4 2006, 02:04 PM

ajax ist vorallem in der form validierung evtl einsetzbar.

Quoted post

F?r die Form-Validierung muss man m.E. doch sehr gro?e ?nderungen an xtc/Client Javascript-Code vornehmen.

<!--QuoteBegin-mzanier@Jan 4 2006, 02:04 PM

jedoch bleibt zu beachten das daf?r zwingend javascript erforderlich st

Quoted post

Share this post


Link to post
Share on other sites

Originally posted by peeeters+Jan 4 2006, 03:04 PM--><div class='quotetop'>QUOTE(peeeters @ Jan 4 2006, 03:04 PM)</div><div class='quotemain'>Das klingt ja so, als h?ttest Du die Sache schon so gut wie fertig. Hast Du eine Testseite?

Quoted post

Es ist in der Tat schon sehr weit gediehen, aber noch nicht online, sondern nur lokal. Das Konzept funktioniert auf jeden Fall aber schon.

<!--QuoteBegin-peeeters@Jan 4 2006, 03:04 PM

Ich halte es besonders dann f?r interessant, wenn der Kunde ein Produkt in den Warenkorb legt. Bei entsprechender Anpassung wird dann nur die Warenkorbbox neu geladen. Das w?rde sich besonders beim Button "Sofortkauf" im Produktlisting bemerkbar machen.

Quoted post

Share this post


Link to post
Share on other sites

Kurzer Status-Update:

Mir ist es jetzt doch gelungen eine (einfache) L?sung daf?r zu finden, nur noch die HTML-Bereiche (Boxen) von Smarty rendern zu lassen, die auch tats?chlich angezeigt werden sollen. Das spart weitere Bearbeitungszeit.

In diesem Zusammenhang konnte ich auch "peeeters" Vorschlag, bei der Bestellung nur noch den Warenkorb zu aktualisieren, gleich mit l?sen!

Das ist einfach supermegaoberaffengeil!

Allerdings w?re noch zu ?berlegen, ob man nicht doch auch noch die "WHATSNEW"-Box mit ?ndert, damit auch dann auf ein neues Produkt hingwiesen wird.

Und wenn die Option, "nach Hinzuf?gen zum Warenkorb diesen anzeigen" gesetzt ist, muss auch doch noch der "main-content" neu angezeigt werden.

Wenn Ihr noch Ideen/Vorschl?ge habt, welche weiteren xtc-Abl?ufe sich noch so drastisch reduzieren lassen, wie der "Kaufen"-Vorgang, lasst es mich wissen.

Share this post


Link to post
Share on other sites

Noch ein Status-Update.

Man kann das AJAX-Konzept, nur noch die Teile zu erstellen, die wirklich ben?tigt werden, auf sehr einfache Art und Weise noch viel weiter treiben.

Durch geeignete ?nderung der "boxes.php" werden im AJAX-Modus die nicht ben?tigten Boxen nicht nur nicht mehr gerendert, sondern der komplette PHP-Code dieser ?berfl?ssigen Boxen wird gar nicht mehr ausgef?hrt!

Ich denke, so langsam kommen da doch auch merkliche Beschleunigungen der Ausf?hrung zu Stande.

Ich habe das Ganze mal eingehend analysiert:

Standardm??ig sind in xct2 folgende Boxen definiert:

box_ADD_QUICKIE

box_ADMIN *

box_AFFILIATE

box_BESTSELLERS

box_CART *

box_CATEGORIES *

box_CONTENT

box_CURRENCIES

box_HISTORY

box_INFOBOX

box_INFORMATION

box_LANGUAGES

box_LOGIN *

box_MANUFACTURERS

box_MANUFACTURERS_INFO

box_NEWSLETTER

box_NOTIFICATIONS *

box_REVIEWS *

box_SEARCH

box_SPECIALS

box_TELL_FRIEND *

box_WHATSNEW *

Der Inhalt der mit "*" gekennzeichneten Boxen kann sich, abh?ngig von der Verarbeitung, ?ndern,

die anderen Boxen sind (nach gegenw?rtigem Kennnisstand) statisch, und brauchen nicht jedesmal

neu erstellt werden.

Hinzu kommen noch die Bereiche

"main_content" f?r den Hautpanzeige-Bereich zwischen den linken und rechten Boxen

"navtrail" f?r die obere Navigationsleiste

Das Ausf?hren der PHP-Programme und das "Smarty"-Rendern der Boxen

box_ADD_QUICKIE

box_AFFILIATE

box_BESTSELLERS

box_CONTENT

box_CURRENCIES

box_HISTORY

box_INFOBOX

box_INFORMATION

box_LANGUAGES

box_MANUFACTURERS

box_MANUFACTURERS_INFO

box_NEWSLETTER

box_SEARCH

box_SPECIALS

und das Rendern der Gesamtseite "index.html" kann bei der AJAX-Verarbeitung also eingespart werden!

Und beim Hinzuf?gen eines Artikels zum Warenkorb reduziert sich das Ganze auf die Berechnung und das Rendern von:

box_CART

box_WHATSNEW (Muss nicht notwendigerweise erfolgen, sondern, nur wenn man auch dann neue Artikel anzeigen will.)

Wenn die Option, "nach Hinzuf?gen zum Warenkorb diesen anzeigen" gesetzt ist, muss auch noch

"main_content" f?r den Hautpanzeige-Bereich zwischen den linken und rechten Boxen

"navtrail" f?r die obere Navigationsleiste

neu angezeigt werden.

Wenn diese Option nicht gesetzt ist, k?nnte man sich sogar noch die Berechnung des "main_content" ersparen (das kriegen wir sicher auch noch hin...)

Im Gegensatz zu mzanier denke ich mittlerweile doch, dass sich mit dem AJAX-Konzept, neben der viel harmonischeren Optik, auch einiges an Verabeitungszeit einsparen l?sst.

Im konventionellen xtc-Prozess wird halt immer alles neu berechnet und gerendert, auch wenn das vom Ablauf her gar nicht notwendig ist. Da aber die xtc-Seite bisher immer komplett neu erstellt wird, muss man das halt tun.

==============================================================================

Und das (auch f?r mich) Verbl?ffende daran ist, dass man f?r all das nur einen vergleichsweise geringen ?nderungs-Aufwand treiben muss.

Wenn Ihr noch Ideen/Vorschl?ge habt, welche weiteren xtc-Abl?ufe sich noch so drastisch reduzieren lassen, wie der "Kaufen"-Vorgang, lasst es mich wissen.

Share this post


Link to post
Share on other sites

die neueberechnung der boxen befindet sich im MS bereich, von daher ist da der einsatz von ajax hier nicht relevant.

zudem, mit aktiviertem cache erfolgt gar keine neuladung der php file, sondern es wird die fertige html geladen. (3.04)

geschwindigkeitvorteile die hier durch ajax enstehen sind im bereich unter 0.01 sec.

Im konventionellen xtc-Prozess wird halt immer alles neu berechnet und gerendert,

n?, bei aktiviertem cache werden nur die n?tigen teile neu berechnet, und der rest wird als fertige html datei vom cache folder geladen, ohne das smarty hier ein erneutes rendering machen muss.

ajax ist f?r xtc nur f?r die live formvalidierung interessant, d.h. user gibt im formfeld einen Wert ein, und sofort wenn er mit der maus/tab auf das n?chste feld wechselt, wird das zuvor eingegebene ?berpr?ft, das spart die validierung bei absenden des formulars.

ajax in dieser form in eine 2.0 einzubauen ist reine zeitverschwendung, selbiges gilt f?r 3.x

Share this post


Link to post
Share on other sites

Es geht ja gar nicht unbedingt darum, dass der Shop dadurch gravierend schneller berechnet wird. Die ?bertragung zum Kunden w?rde sich dadurch deutlich beschleunigen.

F?r einen Shop, in dem i.d.R. einzelne Produkte bestellt werden, macht das keinen gro?en Unterschied. Sobald aber mehrere Artikel hintereinander in den Warenkorb gelegt werden, muss die Seite jedes mal komplett neu ?bertragen und vom Browser aufgebaut werden.

Mit AJAX kommt es einen jedoch so vor, als ob der Shop gar nicht auf irgendeinem Server, sondern direkt vom Browser ausgef?hrt wird.

Ich habe im Netz nach einem Beispielshop gesucht und leider nur ein etwas sehr verspieltes Beispiel gefunden. Vielleicht hat ja noch jemand ein besseres Beispiel parat, bis dahin eine etwas verspielte AJAX-Shop-Variante.

Share this post


Link to post
Share on other sites

Es geht ja gar nicht unbedingt darum, dass der Shop dadurch gravierend schneller berechnet wird. Die ?bertragung zum Kunden w?rde sich dadurch deutlich beschleunigen.

wie leben im jahre 2006 ;) da hat sogut wie jeder einen breitband anschluss bzw ?ber 56,6

ajax in dieser form w?re vor x jahren interessant gewesen, aber heutzutage ist das nachladen einer html datei eigentlich nichtmehr relevant, der haupteinsatzpunkt von ajax liegt derzeit eher wie geschrieben im sofortigen validieren von benutzereingaben.

es sieht zwar nett aus aber irgendwelche relevanten geschwindigkeitvorteile gibt es dadurch nicht, bevor man sich die arbeit antut ist es wesentlich effektiver ein containerlayout zu verwenden, denn dies bringt entscheidente geschwindwigkeitsvorteile in der darstellung.

Share this post


Link to post
Share on other sites

Ich k?nnte mir vorstellen, dass man die Categories-Box noch zerpfl?cken und eine sehr benutzerfreundliche Navigation realisieren k?nnte...

Aber stell doch mal deine Version online, dann kommen bestimmt noch viele Ideen ;-)

Share this post


Link to post
Share on other sites

Originally posted by mzanier+Jan 5 2006, 01:58 PM--><div class='quotetop'>QUOTE(mzanier @ Jan 5 2006, 01:58 PM)</div><div class='quotemain'>die neueberechnung der boxen befindet sich im MS bereich

Quoted post

Was ist der "MS bereich"?

Originally posted by [email protected] 5 2006, 01:58 PM

zudem, mit aktiviertem cache erfolgt gar keine neuladung der php file, sondern es wird die fertige html geladen. (3.04)

Quoted post

Wie soll das denn (zumindest bei xtc2) gehen??

Das "Caching ist eine "Smarty"-Funktion, und da ja alle Boxen immer neu berechnet werden (die "boxes.php" sowie der PHP-Code f?r die einzelnen Boxen enth?lt keinerlei Code, der eine bedingte Neuberechnung auf PHP-Ebene erm?glichen w?rde) kann Smarty m.E. gar nicht cachen, da es ja nicht weiss, ob sich der Code der Boxen ge?ndert hat oder nicht.

Ein eingeschalteter Smarty-Cache erl?st mich ja nicht von der Neuberechnung der Boxen (da diese sich ja ?ndern k?nnen), die Verwendung des Smarty-Caches ist jedoch eine systemweite Einstellung, die nicht den aktuellen Status der Box ber?cksichtigt.

m.E. kann man des Vermeiden von Neuberechnung (PHP-Code) und Rendering (Smarty) nur dann erreichen, wenn man, wie ich das jetzt mache, auf der Anwendungsebene entscheidet, welche Box-PHP-Module ich ausf?hren und rendern lassen muss.

Und damit kann man m.E. mittlerweile doch eine Menge an xtc-Verabeitung sparen!

Statt 22 Boxen muss ich jetzt i.d.R. nur noch 7 Boxen neu berechnen und rendern (im Extremfall des Hinzuf?gens zum Warenkorb sogar nur noch 1 Box (bzw. 2 Boxen, wenn ich "WHATSNEW" auch dann neu berechne)). Das Rendern der "index.html" in xtc entf?llt (ausser beim ersten Aufruf von xtc) komplett.

Nicht vergessen darf man auch, dass der Browser ja dann auch nicht mehr die ganze Seite, sondern nur noch die ge?nderten Teilbereiche neu rendern muss. (Meine client-seitige AJAX-Support-Javascript-Routine pr?ft bei allen Bereichen (ausser "main_content") sogar noch, ob der neu ?bermittelte Inhalt der Bereiche wirklich anders ist, als der aktuelle, damit auch nur wirklich die ge?nderten Bereiche vom Browser neu gerendert werden m?ssen, weil das eine ziemnlich aufw?ndige Geschichte ist.)

Ich habe noch keine Timing-Tests gemacht, aber der subjektive Eindruck l?sst doch eine Beschleunigung erkennen.

Aber wie schon ?fters erw?hnt, finde ich das Beste an der ganzen Sache sowieso die viel harmonischere Darstellung am Bildschirm, auf dem sich halt nur noch Teilbereiche dynamisch ?ndern. Wenn man sich auf einem "Shared Hoster" eingemietet hat, bekommt man bei einer neuen Anforderung an den Server doch eine gut sichtbare Verz?gerung zwischen dem L?schen des Bildschirms und dem komplett neu aufgebauten Bildschirm, was mit AJAX entf?llt.

<!--QuoteBegin-mzanier@Jan 5 2006, 01:58 PM

ajax ist f?r xtc nur f?r die live formvalidierung interessant, d.h. user gibt im formfeld einen Wert ein, und sofort wenn er mit der maus/tab auf das n?chste feld wechselt, wird das zuvor eingegebene ?berpr?ft, das spart die validierung bei absenden des formulars.

Quoted post

Share this post


Link to post
Share on other sites

Originally posted by gswkaiser@Jan 6 2006, 08:40 AM

Eigentlich m?sste ich ja meine L?sung in AJAH (Asynchronous Javascript And HTML) umtaufen, weil ich kein XML sondern HTML f?r den Datenaustausch mit dem Server verwende. Aber ich werde wohl bei AJAX bleiben, da weiss halt jeder, worum es geht.

Naja wenn dein HTML-Dokument wohlgeformt ist bzw. XHTML-valide, dann kommts ja aufs selbe raus :D

Alles in allem finde ich das Thema AJAX sehr interessant und werde allein schon deshalb auf deine L?sung warten und mal in einen Shop einbauen. Ich w?rde es aber aufjedenfall auch mal in der 3er integrieren.

Wenn tats?chlich das Gef?hl einer "lokalen" Dektopanwendung entsteht (zumindest ann?hernd), dann hat diese Arbeit in meinen Augen auch einen tats?chlichen Sinn.

Wobei sich mir auch gleich Zweifel wie die von mzanier aufdr?ngen, ob die ?berpr?fung einer Box auf tats?chliche ?nderung z.B. nicht sogar ein Performancer?ckschritt ist. Naja mal sehen. Ich w?nsch dir aufjedenfall viel Gl?ck und freu mich aufs Ergebnis und lass dich blos nicht unterkriegen :D

Share this post


Link to post
Share on other sites

Was ist der "MS bereich"?

MilliSekunden.

kann Smarty m.E. gar nicht cachen, da es ja nicht weiss, ob sich der Code der Boxen ge?ndert hat oder nicht.

klar kann smarty das. cache files sind f?r eine zeit x valide.

Ein eingeschalteter Smarty-Cache erl?st mich ja nicht von der Neuberechnung der Boxen (da diese sich ja ?ndern k?nnen), die Verwendung des Smarty-Caches ist jedoch eine systemweite Einstellung, die nicht den aktuellen Status der Box ber?cksichtigt.

nat?rlich erspart ein aktiver smarty cache von der neuberechnung.

die boxen werdem mit cache ids gespeichert, und bei bedarf als fertige html datei geladen, ohne das die box neu berechnet werden muss. (xt3).

Ich habe noch keine Timing-Tests gemacht, aber der subjektive Eindruck l?sst doch eine Beschleunigung erkennen.

ich aber ;).

der vorteil liegt hier wie gesagt im bereich von millisekunden.

aber wenn du zuviel zeit hast, viel spa? ;)

Share this post


Link to post
Share on other sites

...wo du gerade dabei bist: die Artikeloptionen schreien ja geradezu nach AJAX ;-)

Leider m?sste man die Neuberechnung des Preises wohl noch erledigen. Aber es gibt ja immer wieder gen?gend Foren-Beitr?ge, in denen danach gefragt wird...

Zur Performance: ohne es nun bisher gesehen zu haben k?nnte ich mir vorstellen, dass der subjektive Geschwindigkeitszuwachs beim User eine nicht unerhebliche Rolle spielt. Ergonomisch d?rfte die AJAX-Version klar ?berlegen sein. Die Wichtigkeit der Ergonomie im Bezug auf die Kaufentscheidung wird leider oft untersch?tzt...

Share this post


Link to post
Share on other sites

Originally posted by sff@Jan 6 2006, 10:47 AM

...wo du gerade dabei bist: die Artikeloptionen schreien ja geradezu nach AJAX ;-)

Leider m?sste man die Neuberechnung des Preises wohl noch erledigen. Aber es gibt ja immer wieder gen?gend Foren-Beitr?ge, in denen danach gefragt wird...

Die schreit wohl eher nur nach Javascript. Man m?sste ja die ganze Content-Seite oder den Auswahlbereich neu laden. Bei neuberechnen der gazen Contentseite w?re es aber auch kein Problem den Preis neu zu berechnen.

Allerdings ist hier AJAX nicht der richtige Gedanke. Bei sowas wie einer Optionsauswahl halte ich dann Radiobuttons oder Dropdownfelder f?r besser, weil diese komplett ohne irgendeinen Reload auskommen k?nnen. Preisangaben wie +56.00 EUR halte ich auch f?r kein gro?es Hindernis.

Au?erdem w?re es auch denkbar nur ?ber Javascript den Preis neu zu berechnen. Wie man es dreht hier ist mit Sicherheit kein Reload (da keine neue DB-Abfrage n?tig) erforderlich und damit AJAX nicht n?tig.

Share this post


Link to post
Share on other sites

xajax is an open source PHP class library that allows you to easily create powerful, web-based, Ajax applications using HTML, CSS, JavaScript, and PHP. Applications developed with xajax can asynchronously call server-side PHP functions and update content without reloading the page.

http://www.xajaxproject.org/

http://www.drweb.de/weblog/weblog/?p=454

Share this post


Link to post
Share on other sites

F?r die Interessierten zur Info:

Ich bin jetzt unvermutet auf ein schwerwiegendes Problem aufgelaufen, an das ich gar nicht gedacht hatte, aber das nat?rlich vorhanden ist. (Der Teufel steckt, wie immer, im Detail....)

Da man mit AJAX ja den ?blicherweise vom Browser mit dem Server abgewickelten Verkehr umgeht, und die Kommunikation per Javascript ?ber das "XMLHTTP"-Objekt des Browsers selbst abwickelt, funktioniert das prima f?r alle per "GET"-Methode von xtc an den Server ?bertragenen Daten, da diese ja einfach als Parameter an die Server-URL des Requests angeh?ngt werden. (z.B.: Mit der URL "index.php?coID=8" wird die Information "coID=8" per "GET"-Methode an den Server ?bertragen.)

Nur bei den Daten, die mit der "POST"-Methode ?bertragen werden (also z.B. alle Inhalte von Formularen) funktioniert das leider nicht mehr so einfach!

Dazu muss man n?mlich in dem Javascript-Code f?r den Datentransfer per "XMLHTTP" sich die zu sendenden Formular-Daten aus dem DOM ("Document Object Model") der Seite herauslesen, und diese so aufbereiten, dass der Server diesen "POST"-Request richtig versteht.

Das bedeutet, dass alle "form"-Elemente in den xtc-Seiten mit dem "onSubmit"-Event versehen werden m?ssen (das es mir erm?glicht, beim Absenden des Formulars eine Javascript-Routine zu aktivieren, mit der ich die Parameter-Aufbereitung f?r die "POST"-Methode vornehmen kann), und dass alle Forms das "name"-Attribut besitzen m?ssen, damit man das Formular im DOM per Javascript adressieren kann.

Die gute Nachricht ist, dass es prinzipiell in xtc eine Routine gibt, die solche Form-Definitionen erstellt ("xtc_draw_form"), so dass man es zentral l?sen kann, das "onSubmit"-Event in die Formulardefinition einzubauen.

Die schlechte Nachricht ist allerdings, dass diese Routine nicht durchg?ngig in xtc f?r solche Zwecke verwendet wird, in eine paar PHP-Modulen wird die Formulardefinition separat erstellt. Auch in ein paar Smarty-Templates werden verwendete Formulardefinition nicht ?ber eine entsprechend aufbereitete Smarty-Variable importiert, sondern die "<form"-Definition ist direkt im Template enthalten.

Das macht es leider notwendig, hier einzugreifen, und die betreffenden PHP-Module und Smarty-Templates so anzupassen, dass man nur noch ?ber "xtc_draw_form"-erstellte Formulardefinition verwendet. (Das betrifft insgesamt ca. 12 zus?tzliche PHP- und HTML-Dateien, die man f?r den AJAX-Support updaten muss.)

Aber prinzipiell ist auch dieses schwerwiegende Problem schon gel?st, so dass es mit xtc/AJAX weiter gehen kann, es wird halt nur etwas l?nger dauern.

Share this post


Link to post
Share on other sites

So, es ist so weit:

Ich habe eine erste "Proof of Concept" Test-Implemtierung von xtc2/AJAX online gestellt!

Unter http://www.seifenparadies.de/ajax_test/index.php ist diese aufzurufen.

Es gibt nat?rlich ein paar Dinge, die noch nicht richtig funktionieren, aber ich denke, man kann sich doch schon sehr gut einen Eindruck von den M?glichkeiten des Konzeptes machen.

Was noch nicht (richtig) funktioniert:

Login

Zur Kasse gehen

Schnellkauf

Suche

Einkaufen ?ber "In den Warenkorb"-Button

Warenkorbaktualiserung

Das ist aber kein grunds?tzliches Problem, muss halt nochmal debugged werden. (Das sind alles Funktionen, die mit Formularen arbeiten.)

Diese Funktionen daher bitte nicht verwenden!

Bitte auch <span style='color:blue'>keine Test-Bestellungen ausf?hren! Ich habe zwar den Shop in einem separaten Verzeichnis installiert, arbeite aber mit der Live-Datenbank</span>

Was schon wunderbar funktioniert ist die Produkt-Navigation, Produkt in Warenkorb (?ber den "Jetzt Kaufen"-Button in der Produkt- und der Produkt-Detail-Liste), Warenkorb aufrufen, Bestseller, Neue Produkte.

Da kann man sich schon mal wunderbar austoben.

Und verglichen mit dem (Zeit-)Verhalten der Original-Anwendung unter http://www.seifenparadies.de/index.php , sehe ich da, trotz einiger gegenteiliger Unkenrufe, eine ganz unzweifelhafte Verbesserung, sowohl was die Ergonomie als auch die Antwortzeiten betrifft!

======================================================================

Ein grundlegendes Problem gibt es allgemein mit "AJAX": der "Zur?ck"-Butten liefert nicht mehr die erwarteten Ergebnisse!

Da der Browser mit AJAX ja umgangen wird, hat er keine Chance mehr, sich eine Historie anzulegen.

Muss mal dar?ber nachdenken, ob man das auf xtc-Ebene (zumindest teilweise) abfangen kann (in der $_SESSION wird eine Liste der aufgerufenen Links gespeichert, oder so ?hnlich...).

======================================================================

Den sch?nen Effekt, dass der Warenkorb so schnell gef?llt wird, sieht man leider dann nicht mehr, wenn er aus der Sicht gescrolled ist. Da w?re so etwas wie ein "mitwandernder Warenkorb" sehr sch?n.... M?sste eigentlich machbar sein. Da ich mit AJAX ja sowieso schon den Warenkorb-Bereich per Javascript gezielt f?lle, k?nnte man an der Stelle auch noch einen separaten Warenkorb-Bereich f?llen, und in den Sichtbereich des Browsers positionieren.

======================================================================

Getestet habe ich das ganze mit IE 6.1 und Firefox 1.5, zu anderen Browsern kann ich nichts sagen.

Dabei ist mir aufgefallen, dass das mit dem IE deutlich schneller geht, als mit dem Firefox.

(Mir war in anderem Zusammenhang schon mal aufgefallen, dass das Firefox-Javascript deutlich langsamer als das des IE ist, vermutlich ist das der Grund.)

======================================================================

?ber ein Feedback (Kritik, Problemhinweise, Anregungen) w?rde ich mich freuen.

Share this post


Link to post
Share on other sites

Originally posted by sff@Jan 6 2006, 10:47 AM

...wo du gerade dabei bist: die Artikeloptionen schreien ja geradezu nach AJAX ;-)

Leider m?sste man die Neuberechnung des Preises wohl noch erledigen. Aber es gibt ja immer wieder gen?gend Foren-Beitr?ge, in denen danach gefragt wird...

Zur Performance: ohne es nun bisher gesehen zu haben k?nnte ich mir vorstellen, dass der subjektive Geschwindigkeitszuwachs beim User eine nicht unerhebliche Rolle spielt. Ergonomisch d?rfte die AJAX-Version klar ?berlegen sein. Die Wichtigkeit der Ergonomie im Bezug auf die Kaufentscheidung wird leider oft untersch?tzt...

Quoted post

Dem schlie?e ich mich an, eine Preisaktualisierung je nach Artikeloption ist f?r mich momentan das allergr?sste Problem an diesem Shopsystem.........

Daher w?re ich f?r L?sungsans?tze( gleich welcher Art) sehr dankbar.

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...