Hello Construct Community! This Tutorial is made as a little thought experiment but might have some merit for the one or other person.
The principles still are valid for other purposes you might have with the REST API, and I included the .c3p on the bottom of this tutorial. There are more elegant ways about feeding the arrays of information to the application, but this is a quick demo as proof-of-concept that I put together within 2 hours and felt like sharing it due to the lack of API and AJAX information for Construct 3.
Here is the entire code in a single screenshot:
The Code Broken Down once we click on 'Create Product' button:
- productjson is an obligatory text field outside of the viewport on the layout.
- productjson contains our entire payload data pre-formatted as json to allow the REST API to work properly.
- The payload contains dynamically created content which are the forms in the layout such as product name, sku, price, etc.
- The AJAX module that I renamed AJAX_Data will set the Request_Header to "Content-Type" with the value of "application/json", because the REST API via cURL request will utilize JSON.
- The next AJAX_Data with the 'Post to URL' request will be our actual API request.
- The Tag is merely a name which can be utilized for example to return the values of the request, in the example of my project - as debugging information.
- The URL will start with your domain, i.e. 'https://www.example.com'
- The next part of the URL is the API request you would like to make, in our example as per WooCommerce documentation to add a product we need '/wp-json/wc/v3/products?'
- Last but not least for the URL we need the consumer key and secret in this manner: 'consumer_key=<consumer_key>&consumer_secret=<consumer_secret>'
- The full URL looks like this: "https://www.example.com/wp-json/wc/v3/products?consumer_key=<consumer_key>&consumer_secret=<consumer_secret>"
- Next up is the Data. This is simple since we already have made a text box for this exact purpose. Simply refer to it here, in my example the Data will be 'productjson.Text'.
- And at the very end, what type of Request. Since we are creating a product we will need 'POST', if we were to retrieve a product we would want a 'GET' request, see the respective documentation of the API you are using.
.c3p File Download:
https://drive.google.com/open?id=16DKq5RJD5tCw57oZPruGk_mtTIAe-Um9
Requirements for my .c3p example
- WordPress Installation with WooCommerce installed
- REST API enabled and issued a consumer secret & key
- Replace my API secret and key example in the code
- Uploaded an image in the media gallery within WordPress
- Created a Product Category within WordPress/WooCommerce
If you need a free WordPress environment to play around with, I used https://pantheon.io, under the free plan you can get 2 sandbox sites. Just make sure to install the WP-CORS plugin first and set allowed sites to '*' as seen in their documentation here:
https://pantheon.io/docs/platform-considerations/#cors
https://wordpress.org/plugins/wp-cors/
API Source Information & Relevant C3 Documentation:
WooCommerce REST API Documentation
Construct 3 AJAX Documentation
JSON Validator tool to verify if your JSON is properly formatted.