Beta 6.4.0 - User Interaction With APIs

Beta
#1

Hi,

I have just had a first look at the new APIs and have a question about filtering of the returned results. I will try and use a very simple example.

Using this API: https://restcountries.com/#rest-countries we can pull through all sorts of information about a country, let’s say the country’s official name, currency and flag. The API is very simple to set up in Cornerstone. The Endpoint would be https://restcountries.com/v3.1/ and the path: all. This brings through all countries from the API.

However, is it possible to enable this data to be filtered by the website’s visitor? For example, could there be an input (search) field where the visitor could enter a part of the country’s name (e.g. America) and this term would be passed to the API - presumably using some type of dynamic content via the API’s path field - with the data being returned showing countries with America in their name?

This may be beyond what the new API features can do at the moment, but I was interested to see if API calls can be used in this way.

Thanks,
Christopher

#2

If you had a form that used the name country and was also a GET form, you could use the below passed into the path control of the endpoint. In other words ?country=USA is in the URL of your country search, because of how the form is setup. Let me know if that helps!

name/{{dc:url:param key="country" fallback="deutschland"}}

#3

Thanks @charlie. Eventually got a working example using WPForms. The steps taken to get this working, in case they are helpful to anyone else are:

  • Add a text field to a blank WPForms form and give it the label “Country”.
  • In the Confirmations tab change the Confirmation type to Go to URL (Redirect).
  • Enter the URL as https://domain.com/sample-page?country={field_id="2")#country. (the field_id value should be the ID of the form’s field. The added #country at the end is the ID to be given to the output section of the page in Cornerstone, so you are taken directly to the result.

In Cornerstone:

  • Add a section with the Form Integration element and select the form we have just created.
  • Add another section which has a Looper Provider and Consumer active.
  • The Looper Provider is set to External API > Run is toggled on > Endpoint is set to https://restcountries.com/v3.1/ > Path is set to name/{{dc:url:param key="country" fallback="GB"}} > All other settings are left at their defaults.
  • Within the section we added three headline elements to display the country name, capital city and flag.
    Country DC - Headline element = {{dc:looper:field key="name.common"}}
    Capital City DC - Headline element = {{dc:looper:field key="capital"}}
    Flag DC - Image element = {{dc:looper:field key="flags.png"}}

On the front end, when the country is entered and the form submitted, the desired country data is displayed.

I am beginning to see how APIs could be used really effectively!

2 Likes