Montag nächster Woche geht ein JTL AMP
Shop online (bei vorzeitigem Bedarf gerne per
PN).
Zeitnah folgen 2 weitere (bereits in der Umsetzung).
Während der Entwicklung konnten auch wir eine Menge darüber lernen und haben unser eigenes Plugin (sehr auf unsere Bedürfnisse abgestimmt) realisiert.
Das Ergebnis gefällt uns allen - allerdings kommt stets ein Wehmutstropfen auf: Richtig clever ist die Lösung AMP mit JTL umzusetzen leider nicht.
AMP lebt davon "nur ein Gerüst" zu sein und alle dynamischen Inhalte (z.B. Produkte) und extra Dateien (z.B. Bilder) nachzuladen.
Der Vergleich:
1. AMP Template & Plugin im JTL Shop: Hier werden alle Daten verarbeitet - sprich JTL "arbeitet" vor der Seitenauslieferung - hier wird lediglich das Rendering der Seite und das Nachladen von Bildern verbessert
2. Statische HTML-Seite die JTL Inhalte nachlädt: Hier findet keinerlei Verarbeitung statt, diese erfolgt erst "live" wenn die Seite dem Besucher schon angezeigt wird.
Die wohl idealste Lösung wäre: Ein schnelles CMS (oder sogar HTML-only Seiten) zu erstellen und alle Daten per "Nachladen" in das Gerüst zu laden (siehe Vergleich - Lösung 2).
Auch das wäre mit unserem Plugin bereits möglich (man müsste eine Art JSON-Template bauen).
Grundlegend hat AMP ein paar Spezifikationen die unser Plugin bereits erledigt:
- Nur inline CSS
- kein Javascript (aus AMP Bibliothek)
- Manche HTML Tags haben sich geändert (zum Nachladen von externen Inhalten wie Bildern und für gängige JavaScript aktionen)
Im Detail macht unser Plugin
Basics:
- Inhalte in UTF-8 umwandeln und ausgeben - Systemanfragen von UTF-8 in die JTL Zeichenkodierung zurückwandeln
- AMP Tag in HTML einfügen
- dynamisch alle AMP Bibliotheken laden (keine Angaben im Template notwendig, so werden pro Seite nur die benötigten geladen)
- AMP Boilerplate einbetten
- Javascript wird komplett entfernt
- weitere Kleinanpassungen wie meta viewport
- Umwandeln von Codes in AMP:
=> img wird zu amp-img
=> form wird angepasst
=> frameset wird angepasst
=> noch nicht automatisch (von uns via Template gelöst): Audio, Video,
CSS Anpassungen:
- alle externen Ressourcen werden inline geschrieben (oder ganz entfernt => Einstellungssache)
- selbiges mit inline styles (werden zu einem zusammengefasst oder entfernt)
- Man kann im Plugin einzelene CSS Dateien für einen Seitentyp definieren (z.B.xxx/artikeldetailseite.css), welches inline nur im jeweiligen Seitentyp geschrieben wird
- Man kann das CSS nach 50.000 Bytes einfach abschneiden, das ist das AMP Maximum (Hinweis: Das EVO Template hat bereits deutlich mehr !)
Unerlaubte Elemente werden komplett entfernt:
- frame, frameset, object, param, applet, embed, base
- font => hier wird der inhalt gelassen, der font tag selbst aber entfernt
Da wir auch relativ viel Daten "live" verarbeiten (z.B: Produkt in Warenkorb legen ohne Seitenreload) haben wir eine Menge AMP-Ajax Anfragen umgeschreieben, dass diese als JSON Objekt beantwortet werden, wie z.B.:
- Bewertungen
- hinweis, cHinweis, Fehler, cFehler, error usw. Rückmeldungen (im Evo-Template z.B. als {if isset($cHinweis)}... zu finden)
- Warenkorbitems
-
Kupon
- Zahlungsarten
- Newsletter
- Wishlist
- Kommentare
- Frage zum Produkt
- Versandrechner
... und noch ein paar dieser Anfragen
Kurzum: Hier sehen wir es schwierig ein einfach "Klick and Go" Plugin zu liefern, wird kaum möglich sein - es ist somit mindestens HTML Kenntnis notwendig, sowie AMP sollte einem nicht ganz fremd sein.
Wir werden daher jedoch in absehbarer Zeit ein entsprechendes Template erstellen, was exakt abgestimmt ist.
Dabei soll alles in AMP funktionieren - lediglich beim Checkout sind wir noch uneinig (dieser läuft zwar, schwierig wird es jedoch auf alle Paymentanbieter abzustimmen).
Grundlegend muss auch gesagt werden: Plugins die JavaScript einsetzen bekommen natürlich auch das JavaScript "weggenommen". In unserem aktuellen Shop haben wir jedoch z.B. auch Dropper im Einsatz und dort deren Template entsprechend modifiziert.
Info: Text nicht nochmal Korrektur gelesen - Fehler dürfen gerne behalten werden
