Hugo: Using getJSON to fetch remote REST API in hugo template

Hugo is very powerful static site builder, it can fetch any JSON rest API and build content out of it. In this example we will use getJSON hugo function to fetch the json data from Woocommerce site. You can develope this further and create a full fledged headless e-commerce website with hugo at the frontend wordpress and woocommerce as a backend.

To access woocommerce REST API we need Consumer Key, Consumer Secret and URL endpoint. Follow this step-by-step guide on how to configure REST API in woocommerce admin.

{{ $key := "ck_111111111111111111111111111111111" }}
{{ $secret := "cs_2222222222222222222222222222222" }}

Next setup header, this step is depended on API.

{{ $base64 := base64Encode (printf "%s:%s" $key $secret) }}
{{ $basic := printf "%s %s" "Basic" $base64 }}
{{ $headers := dict "Authorization" (printf "Basic %s" $base64) }}

Fetch data using getJSON hugo function to fetch the json data from Woocommerce site. The json response can be found here

{{ $product_id := 121 }}
{{ $url := (printf "https://devnodes.in/wp-json/wc/v3/products/%s" (string $product_id)) }}

{{ $JsonData := getJSON $url $headers  }}

on success the getJSON will return a json response similar to below.

{
  "id": 794,
  "name": "Premium Quality",
  "slug": "premium-quality-19",
  "price": "21.99",
  "regular_price": "21.99",
  "sale_price": "10.59",
  "stock_status": "instock",
}

Now the json keys can be accessed as shown below.

{{ $regular_price := float $JsonData.regular_price }}
{{ $sale_price := float $JsonData.sale_price }}
{{ $stock_status := $JsonData.stock_status }}

or 

<h1>{{ $JsonData.name }}</h1>

Here is the full source code.


{{ $key := "ck_111111111111111111111111111111111" }}
{{ $secret := "cs_2222222222222222222222222222222" }}

{{ $base64 := base64Encode (printf "%s:%s" $key $secret) }}
{{ $basic := printf "%s %s" "Basic" $base64 }}
{{ $headers := dict "Authorization" (printf "Basic %s" $base64) }}

{{ $product_id := 121 }}
{{ $url := (printf "https://devnodes.in/wp-json/wc/v3/products/%s" (string $product_id)) }}

{{ $JsonData := getJSON $url $headers  }}

{{ $regular_price := float $JsonData.regular_price }}
{{ $sale_price := float $JsonData.sale_price }}
{{ $stock_status := $JsonData.stock_status }}

Hugo: Using getJSON to fetch remote REST API in hugo template

Read also

Wordpress: How to send email using wp_email()

Wordpress: Schedule a hook to be triggered by at the specified interval.

Hugo: frontmatter title block code snippet for Visual Studio Code

Wordpress: remove/unregister all hooks from a action

Hugo: How to escape Hugo shortcodes