This blog post is available in german language on our official OXID Blog.
Data access via open APIs and headless are the terms that are causing a change in the e-commerce world today. The customer experience of modern e-commerce spans across multiple channels and touchpoints. The online store must pick up the customer seamlessly. Website, mobile app, inventory management, CRM and more connect to the shop through a common language: How about the GraphQL Query Language? A proven technology making its way into the OXID world.
The comprehensive OXID GraphQL Interface offers a detailed schema for all the requirements of store front clients. It even allows the connection of completely independent store fronts, which provides endless possibilities in the choice of technology, design or UX. For example, a modern JavaScript framework such as React can be used as the tool of work. This can be utilized to implement a complete custom interface, an app for mobile devices, or just individual sections such as the account administration. The OXID platform is ready for it.
The OXID GraphQL Base Module, which provides the basic functionality, and the OXID GraphQL Storefront Module, which extends the GraphQL schema with the features of the OXID eShop frontend, are installed with just one Composer command - then you can start right away.
Present Your Products Perfectly
In the last webinar OXID & GraphQL - Mehr Freiheitsgrade im Client (only available in German) Dr. Heike Reuter from our Development Team has already shown what the interface is capable of. The potential customer visits our online shop. What do we want to show them? Of course, the plenty of great products, finely structured in categories. So the first thing we need is the information which categories are available in our store. With GraphQL this is a simple query:
1 query {
2 categories {
3 title
4 parent {
5 title
6 }
7 children {
8 title
9 }
10 }
11 }
Here we get the entire category tree with all links to parent and child categories. However, we do not receive any unnecessary data, but only the titles of the respective categories, as specified in the example. This makes the load of data much smaller - an advantage of the GraphQL Query Language.
Once we have the categories, we can then also retrieve the products, filter them, sort them and read out their details. In short, we can access any data from the product catalog using the OXID GraphQL Interface and display it in our own customized frontend. A detailed tutorial can be found in our documentation.
Turning the Visitor Into a Customer
If the visitor decides to buy something in the shop, they often registers a user account first. In this case, we are also not limited when building our own application using GraphQL. The interface does not work with the well-known sessions of PHP, but instead a user verifies by a JSON web token. Once the user has registered - of course also purely through requests from our own client to the OXID GraphQL Interface - they can log in as usual, edit their account details and add addresses. This is also described in the online documentation.
Shopping Experience According to Own Principles
In the end we want the customer to make a purchase. The Storefront Module provides suitable requests for this purpose as well. With the mutation basketCreate a basket can be created. With basketAddItem the product can be added. Then execute placeOrder and the revenue can increase. Also coupons can be applied as known from the OXID eShop. That was a bit fast? Therefore you find it in the detailed tutorial in our documentation, too.
The possibility of the order process via GraphQL opens new ways in the design of the shopping experience. The popular One-Page-Checkout, where the customer has everything directly on one page, becomes a piece of cake. Especially with powerful JavaScript frameworks like React, dynamic pages can be built very quickly, which in interaction with the OXID platform and the translator in between, the GraphQL Query Language, raise the perspectives of your e-commerce solution to new levels.
More Know-How Needed?
GraphQL quickly became a popular basis for modern software and more and more developers are gaining the knowledge about. But even for GraphQL veterans, one question may still remain unanswered: How does it work together with OXID? The OXID Academy will soon provide the answers.
Our Academy Team is working closely together with our Development Team to establish a new training format focusing on GraphQL. The training is aimed at experienced OXID developers, but GraphQL beginners. The basics are quickly understood. GraphQL is powerful, yet easy to learn at the same time. Our e-commerce framework is also known for offering strong extensibility. When it comes to GraphQL, we naturally continue this. With custom queries and mutations customer-specific solutions can be addressed with the interface.
This extensibility will be explained in the upcoming training and, as usual, immediately intensified by our well-known focus on practical exercises. Together with the enjoyable, relaxed atmosphere in our training courses, we have been educating our partners and customers for many years. Starting in 2023, the OXID Academy will also be speaking GraphQL and we look forward to welcoming you to our training. Already crazy about the first date? Sign up for our newsletter to be the first to grab one of the highly requested spots in the upcoming training format.