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 }}
