Topics covering webhook creation & management, event handling, Pub/Sub, and Eventbridge, in Shopify apps.
I want to display the data from Acuity my Shopify website. By sending a server-side API request in my PHP file to Acuity(because I cannot use PHP in my Shopify theme and tried using JS but ran into a Cors error) So I wanted to make the request through my server and allow Access-Control-Allow-Origin for the Shopify domain to retrieve the data through a fetch.
I'm trying to fetch JSON data from a hosted PHP file into my Shopify theme. But getting this error:"Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Invalid name".
This is my JS function loaded into my Shopify:
async function getAppointments() { const response = await fetch('https://*******.be/test.php', { method: 'GET', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Access-Control-Allow-Origin' : '*', 'Access-Control-Allow-Credentials ': true } }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); console.log(data); // alert(data); const appointmentsContainer = document.querySelector('.appointments-container'); appointmentsContainer.innerHTML = ''; for (const appointment of data.appointments) { appointmentsContainer.innerHTML += ` <div class="appointment"> <h2>${appointment.title}</h2> <p>${appointment.start_time}</p> </div> `; } } getAppointments();
And this is the php file (https://*******.be/test.php)I'm trying to fetch the data from:
<?php $curl = curl_init(); curl_setopt_array($curl, [ CURLOPT_URL => "https://acuityscheduling.com/api/v1/appointments?max=100&canceled=false&email=******%40hotmail.com&excludeForms=false&direction=DESC", CURLOPT_RETURNTRANSFER => true, CURLOPT_ENCODING => "", CURLOPT_MAXREDIRS => 10, CURLOPT_TIMEOUT => 30, CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1, CURLOPT_CUSTOMREQUEST => "GET", CURLOPT_HTTPHEADER => [ "accept: application/json", "authorization: Basic ****************API********************" ], ]); $response = curl_exec($curl); $err = curl_error($curl); curl_close($curl); if ($err) { echo "cURL Error #:" . $err; } else { echo $response; $appointments = json_decode($response, true); return response()->json([ 'appointments' => $appointments ]); }
And this PHP file outputs the data when I open it in my browser:
I have tried debugging by throwing an error if the response isn't
if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); }