B2C API React exampleEdit on GitHub
As a part of documentation related to Spryker Glue REST API, we have also developed a B2C API React example. It is a React single-page application based on a webpack dev server, Typescript, Redux, and Material UI.
The application has been developed for four primary purposes:
- Provide a simple yet fully functional example of Glue REST API usage.
- Illustrate a complete B2C Spryker experience using REST endpoints, starting from selecting the necessary product all the way through to placing an order. The shop also demonstrates the use of API resources to create such features as the product catalog, search, auto-suggestions, customer registration, cart management, and displaying order details.
- Let you try Glue REST API without any coding.
- Provide sample REST requests that can facilitate custom touchpoint development.
The shop is provided only for display purposes and must under no circumstances be used as a starting point for any project.
The Demo Shop was built using and demonstrates the use of the endpoints and resources provided by the following APIs:
Getting suggestions for auto-completion and search
|Retrieving category trees
|Retrieving abstract products
Glue API: Retrieving concrete products
|Product Availability API
|Retrieve abstract product availability
Retrieve concrete product availability
|Product Price API
|Retrieving abstract product prices
Retrieving concrete product prices
|Product Tax Sets API
|Retrieving product tax sets
|Product Image Sets API
|Retrieving image sets of abstract products
Retrieving image sets of concrete products
|Product Labels API
|Retrieving product labels
|Authentication and authorization
Carts of registered users
|Checking out purchases and getting checkout data
|Order History API
|Retrieving customer’s order history
|Retrieving store configuration
Running the example application
The app source code can be found in the following GitHub repository: https://github.com/spryker-shop/b2c-api-react-example. You can install it inside Spryker Development Virtual Machine or on a dedicated web server.
To install the example application, see Install B2C API React example.
After installing and running the example app, you can try its functionality. Depending on how you installed it, the shop is available at the following endpoints:
http://glue.de.b2c-demo-shop.local/react/—if installed in the VM.
http://react.local—if installed on a separate web server.
To get a list of Glue API requests that have been used to build a page, follow these steps:
- Open the F12 menu of your web browser.
- Activate the Console section.
- To get details of a specific request, expand it in the console.
For submitting the form