Total.js is a modern and efficient Node.js framework. In this tutorial, we will show how easy it is to create a headless shopping cart API using Total.js.
Simple Headless Shopping Cart API
In this tutorial, we will show how easy it is to create a headless shopping cart API using Total.js framework. In the following Chapter 2. we will show how easy you can connect a browser with Total.js WebComponents and in our case we will use the webcomponent j-ShoppingCart from https://componentator.com/components/j-shoppingcart/.
To get started we take a moment to explain what actualy will happen in the next chapters.
Creating a headless shoppingcart api without any layout and just data is the way to get started writing modern and independent interfaces. Total.js comes in a way, making it a easy task in everbody's daily work. Following the notation of Total.js, you will get all of the benefits the framework provides to you.
The second chapter will just go in detail how to implement and use the Total.js WebComponent j-ShoppingCart and how you can easly integrate the layout of your choice.
The WebComponent is prepared to be synchronize the data object as a singleton. Including the functionality of synchronizing data between the
LocalStorage and the server.
In the third chapter of this series, we will extend the single page application and deliver it as a progressive web application.
1. create project folder
We create a new folder for our project and change into it.
2. install Nodejs framework Totaljs v4
We install the Totaljs v4 framework using the nodejs package manager
3. create folder structure
We create the necessary folder structure for controllers and schemas:
4. create a config file
Optional but helpful is a ./config file. If there is a config file in the root folder of the application, this file is read when the application is started and can influence the application and the behavior at runtime.
Here are some more informations about Total.js Framework Configurations:
5. create a startup file
We create the index.js startup file in the root folder of the project:
6. Create the API controller
We create the file
in the controllers directory and we use the ROUTE() function of Total.js:
We recommend this introduction of Louis to learn more about Total.js API routing. Totaljs API Routing
7. NoSQL or TextDB as DB interface
Total.js framework provides a built-in NoSQL system or TextDB that we can use as a database interface. To use this, we add the appropriate functions to our controller or schema.
This type of TextDB stores documents (objects) with the predefined schema. In other words: you can store documents with fields only that are defined in the Table schema. The table is much faster than the NoSQL database, but it's limited due to the declaring of the schema.
- TABLE(name) returns TextDB instance
- each database needs defined schema in /config file like example below:
Table schema declared in /config file:
8. create cart schema with built-in NoSQL
In the folder
we create a the cart schema file named cart.js:
9. Testing the API
You can use any REST API client tool like Curl, Postman or SWAGGER.
Let's say we have
/api/cart_insert endpoint for adding products using
- Use the "POST" request type
- Enter the full URL http://localhost:8000/api
- choose request body-type "JSON"
- Enter the api schema action like cart_insert
- Enter the data object with a product data singleton in JSON format
Curl POST JSON Syntax:
Curl POST JSON Example:
To follow the definition of j-ShoppingCart singleton, we use the following json definition:
Preparing CRUD testing
Inserting cart items.
Read the API with specific cart item id
cURL UPDATE API Call
cURL DELETE API Call
An api websocket payload looks like:
Look to the difference building the json object to send to the websocket api implementation
How to test the websocket api implementation:
It can be tricky, but with this cURL command it should be possible get in touch with the Total.js Websocket API Implementation
Advance the API with a payment provider
How to implement a payment gateway provider like paypal, molly or stripe?
If you are interessted in it, just leave a line at email@example.com and we will get in touch.
With Total.js, we can create a powerful API in a short time. The framework's clear structure and intuitive methods speed up the development process significantly. Inlcuding a realtime websocket based api structure, it is now easy to connect with several clients written in Rust, Go, PHP, C/C++, Ruby and more.
Happy coding !