Create A Custom Dashboard Using Woocommerce PHP REST API

Create A Custom Dashboard Using Woocommerce PHP REST API

These days, software and platforms expose API to enable other applications interface with the core application. Developers use API to create custom interfaces and dashboards. I have previously covered REST API in my previous articles.
In this article, I will demonstrate how you could easily create a custom WooCommerce dashboard. Although this dashboard will be pretty basic, you could easily extend it to fit your requirements. I will use WooCommerce PHP API for implementing the Dashboard.
Before going further, you need to know how RESTful APIs work, how they authenticate requests and how responses are returned by the API.

Prerequisites for the Dashboard

Cloudways has taken all the pain out of launching and maintaining a successful WooCommerce store. If you need help in setting up a WooCommerce store on the Cloudways Platform, all you need to do is sign up to the Platform and launch a WooCommerce application.
Next, login to the store’s Admin Panel, go to the WooCommerce Settings and enable REST API. Go to the Key/Apps tab and enter the Key Description, select the permission you want (for the purpose of this tutorial, I have selected Read/Write). Now click the Generate API Key button.
generate api key
You will get the API Key, API Secret and QR code to scan,
api key
I will use these keys in the future to work with the WooCommerce REST API.  But before all this, I will install the PHP API package for WooCommerce.

Install WooCommerce PHP Package API

WooCommerce has an official API package (written in PHP) that can be used for creating custom apps. The package is well maintained and available on GitHub.
For installing the API package, I will launch a PHP stack app. Once the application is up, go to the SSH terminal using the provided Master Credentials. Move to your PHP application and run the Composer command for installing the package.
This command will install the latest version of the package available on GitHub. You can also find composer.json file in your folder. Next, create an index.php file. I will use Bootstrap and jQuery for the frontend. In addition, I will also use JavaScript. So add the following code in the HTML head tag:

Require autoload.php and Dependency Files

After installing the package,  you need to require autoload.php for initializing the library. This API library has HTTP function for sending the requests and getting the responses. I will add the HTTP client library in the index.php:
Now, create the object for Client, providing the Consumer key and the consumer secret in it.
At this point, you are all set to use API calls for GET, POST, DELETE and PUT to work with the stored data. You can use var_dump($woocommerce); to check if the API return TRUE or FALSE.
api return boolean

Get All Orders at the Store

WooCommerce offers a lot of functions and I would recommend you check out the official documentation for detailed coverage of these functions. For the purpose of this tutorial, I have selected a few of these functions including orders, customers, and products. The API also provides exception management.
Here is how the Dashboard will look like. As you could see the Dashboard will display the orders, customers, products and total sales.
woocommerce dashboard in php api
Add the following code to the index.php file.
To show the results, I will add the following basic markup:
This is pretty simple. I got all the values by requesting the WooCommerce API and displayed them in the highlighted fold for quick display. For exception handling, I have used try-catch methods.

Get all Orders via API

You can get all orders through the following single line of code:
Now I will show the order summary in an organized table through the following table code:
In this table, I haven’t displayed all the data. You could extend the display as per your requirements. At this time, the Order table will look like this:
orders list

Update the Order Status

For order status, I have added two options Update and Delete. Normally when an order is placed, it defaults state is processing. As the order moves to the next state,  you can always update the status to reflect the changes. For this purpose, I will pass the order ID to the buttons in this format: data-id=".$details['id']. Now I will catch this ID in a Bootstrap modal and select the state for this order. The modal code will be:
Nothing fancy in it. I have assigned the name and ID’s to the input type and select box. Next I will add jquery to catch order ID in modal.
In the above script, i am simply assigning the data-id value to input box using inputbox ID. Next for updating the status of the order I need to add php code to create a POST call.
This code is pretty simple. The condition will check the submitted form and catch the values. Next, I have appended the order ID to order URL because the update URL need the order ID with the order call, something similar to this: (orders/order-ID, orders/16)
Now, when you click on the Update button, it will show the order ID and you can select the order state and update it:
update order

Delete a Specific Order

For deleting a specific order, I will use the same logic of showing Order ID in modal, and taking the user’s confirmation for deleting the order or canceling the action. The modal code will be:
The jquery code for it:
The PHP code snippet for deleting the order through the Delete button is:
Click the Delete button to delete the order or the Cancel button if you don’t want to do it.
order deletion

Get All Customers

All the customers can be retrieved using the following GET call:
Now to show the details of the customer, add one more Bootstrap container with the table:
This is how the customer list will be displayed:
customers list
I will not cover the CRUD functions for customers in this tutorial.

Get All the Products of the Store

All the products on the store can be retrieved using the following GET call:
Here is the table that will show the details of the products:
The product list will be displayed as follows:
products list
At this point, the dashboard will look like:
dashboard demo

Conclusion

Woocommerce PHP API has lots of options that simplify working with product variation, attributescategories, taxes, coupons, etc. In this tutorial, I have tried to create a basic dashboard that manipulates and highlight orders, customers and products. The custom dashboard can help you take a quick look at how the store is performing at the moment, and quickly process the orders.

Comments