REST API cURL Post Request via Construct 3 AJAX Module

3
  • 1 favourites

Stats

1,074 visits, 1,287 views

Translations

This tutorial hasn't been translated.

Tools

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.

  • 1 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • Hello Uriel1339,

    Thanks for sharing this tutorial. Could you answer a couple of questions for me please?

    I am trying to pass a Score to the WPDB, this used to be a fairly simple process using the $_GET in PHP, however, things seem to have changed a bit in WP since I last did this :)

    Q1 - Did you have to register a REST API endpoint?

    Q2 - Or did you just manage with allowing CORS?

    Thanks in advance