REST API cURL Post Request via Construct 3 AJAX Module

5
  • 3 favourites

Stats

3,275 visits, 4,419 views

Translations

This tutorial hasn't been translated.

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

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.

  • 2 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

    • I haven't looked in here forever. Apologies for never replying! I looked at my code and... I'm not quite sure.

      The REST API endpoint was already existing within WooCommerce and is accessible via key & code. If that wasn't in the URL it would just kickback as authentication failed.

      And I don't know what CORS is.