OXID & GraphQL - Mehr Freiheiten im Client
Datenzugriffe über offene APIs und Headless sind heute die Themen, die für Umschwung in der E-Commerce Welt sorgen. Die Customer Experience des modernen E-Commerce erstreckt sich über mehrere Channels und Touchpoints. Der Onlineshop muss den Kunden ganzheitlich und nahtlos abholen. Webseite, Mobile App, Warenwirtschaft, CRM und mehr verbinden sich hierzu durch eine gemeinsame Sprache mit dem Shop: Wie wäre es mit der GraphQL Query Language? Eine bewährte Technologie, die Einzug in die OXID Welt nimmt.
Die umfängliche OXID GraphQL Schnittstelle bietet ein ausführliches Schema für sämtliche Anforderungen von Store Front Clients. Sie ermöglicht sogar die Anbindung gänzlich unabhängiger Store Fronts, was volle Freiheiten bietet bei der Wahl der Technologie oder des Designs, bzw. der UX. Als Werkzeug kann zum Beispiel ein modernes JavaScript Framework wie React eingesetzt werden. Damit kann man eine vollständige eigene Oberfläche, eine App für mobile Endgeräte oder auch ausschließlich einzelne Bereiche wie die Kontoverwaltung realisieren. Die OXID Plattform ist dazu bereit.
Das OXID GraphQL Base Module, das die Grundfunktionalität bereitstellt und das OXID GraphQL Storefront Module, welches das GraphQL Schema für den Funktionsumfang des OXID eShop Frontend liefert, sind mit nur einem Composer Befehl installiert - danach kann es direkt losgehen.
Produkte perfekt präsentieren
Im vergangenen Webinar OXID & GraphQL - Mehr Freiheitsgrade im Client hat Dr. Heike Reuter von unserem Entwicklungsteam bereits gezeigt zu was die Schnittstelle in der Lage ist. Der potentielle Kunde besucht unseren Onlineshop. Was wollen wir ihm zeigen? Natürlich die Fülle an tollen Produkten, fein strukturiert in Kategorien. Also benötigen wir als erstes die Information welche Kategorien es in unserem Shop gibt. Mit GraphQL ist dies ein simples Query:
query {
categories {
title
parent {
title
}
children {
title
}
}
}
Wir erhalten hier den gesamten Kategoriebaum mit allen Verknüpfungen zu Ober- und Unterkategorie. Doch erreichen uns keine unnötigen Daten, sondern lediglich, wie im Beispiel spezifiziert, die Titel der jeweiligen Kategorien. Die Datenmenge wird dadurch deutlich kleiner - ein Vorteil der GraphQL Query Language.
Haben wir die Kategorien, so können wir anschließend auch die Produkte abrufen, diese filtern, sortieren und deren Details auslesen. Kurz gesagt: Wir können jegliche Daten des Produktkatalogs über die GraphQL Schnittstelle abfragen und diese in unserem eigenen, auf unsere Kunden zugeschnittenen Frontend darstellen. Ein detailliertes Tutorial findet sich in unserer Dokumentation.
Den Besucher zum Kunden machen
Entschließt sich der Besucher etwas im Shop zu kaufen, so registriert er oft zuerst ein Kundenkonto. Auch hierbei werden wir keineswegs eingeschränkt, wenn wir unsere eigene Applikation mithilfe von GraphQL aufbauen. Die Schnittstelle arbeitet zwar nicht mit den bekannten Sessions von PHP, jedoch verifiziert sich ein Nutzer stattdessen durch ein JSON Web Token. Hat sich der Nutzer erstmal registriert - natürlich ebenfalls rein durch Requests vom eigenen Client hin zur OXID GraphQL Schnittstelle - so kann sich dieser wie gewohnt anmelden, seinen Account bearbeiten und Adressen hinterlegen. Auch dies beschreiben wir in der Onlinedokumentation.
Kauferlebnis nach eigenem Prinzip
Am Ende möchten wir natürlich, dass der Kunde auch einen Einkauf tätigt. Das Storefront Modul bietet auch hierzu geeignete Requests. Mit der Mutation basketCreate lässt sich ein Warenkorb erstellen. Durch basketAddItem dann das Produkt hineinlegen. Am Ende noch placeOrder ausführen und schon kann der Umsatz steigen. Auch Gutscheine können wie bekannt aus dem OXID eShop angewendet werden. Das ging nun etwas schnell? Deshalb auch hierzu das ausführliche Tutorial in unserer Dokumentation.
Die Möglichkeit des Bestellvorgangs über GraphQL eröffnet neue Wege in der Gestaltung des Einkaufserlebnisses. Der beliebte One-Page-Checkout bei dem der Kunde direkt alles auf einer Seite hat, wird hiermit zu einem Kinderspiel. Besonders mit mächtigen JavaScript Frameworks wie React lassen sich sehr schnell dynamische Seiten aufbauen, die in Zusammenarbeit mit der OXID Plattform und dem Übersetzer dazwischen, die GraphQL Query Language, die Perspektiven deiner E-Commerce Lösung auf neue Ebenen heben.
Noch etwas Know-How gefällig?
GraphQL entwickelte sich rasch zu einer beliebten Basis für moderne Software und das Wissen eignen sich immer mehr Entwickler an. Doch selbst für GraphQL Veteranen mag eine Frage noch offen bleiben: Wie funktioniert das Zusammenspiel mit OXID? Die OXID Academy wird hierzu schon bald die Antworten liefern.
Unser Academy Team arbeitet eng mit unserer Entwicklung zusammen, um ein neues Schulungsformat zum Thema GraphQL zu etablieren. Die Schulung richtet sich an erfahrene OXID Entwickler, jedoch GraphQL Einsteiger. Die Basics sind schnell verstanden. GraphQL ist mächtig, doch zugleich einfach zu erlernen. Unser E-Commerce Framework ist zudem dafür bekannt eine starke Erweiterbarkeit zu bieten. Beim Thema GraphQL führen wir dies natürlich fort. Durch eigene Queries und Mutations können auch kundenspezifische Lösungen über die Schnittstelle angesprochen werden.
Diese Möglichkeit der Erweiterbarkeit wird in der kommenden Schulung erklärt und wie gewohnt durch den bekannten Fokus auf praktische Übungen umgehend vertieft. Gemeinsam mit der angenehmen, lockeren Atmosphäre in unseren Schulungen bilden wir schon seit vielen Jahren unsere Partner und Kunden fort. Ab 2023 spricht auch die OXID Academy GraphQL und wir freuen uns dich in unserer Schulung zu begrüßen. Schon heiß auf den ersten Termin? Registriere dich für unseren Newsletter, damit du als erster einen der begehrten Plätze im kommenden Schulungsformat ergattern kannst.
On-Demand Webinar:
OXID & GraphQL - Mehr Freiheitsgrade im Client
Im Zeitalter der APIs und Headlesslösungen setzt OXID auf eine GraphQL Schnittstelle, um verschiedensten Clients Zugriff auf Daten und Business Logic aus der OXID E-Commerce Plattform zu ermöglichen. Die Wahl fiel auf GraphQL, weil bei diesem Ansatz die Flexibilität der Clients im Fokus steht.
Die Schnittstelle ist bereits produktiv einsetzbar und wir klären im Webinar folgende Fragen mit dir:
- Wo steht OXID nun eigentlich bei GraphQL?
- Was kann ich heute schon umsetzen?
- Und was wird mich zukünftig noch erwarten?