Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Invalid name

Lynn89
Shopify Partner
3 0 0

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:

 

chrome_bEcpErvdgs.png

 

I have tried debugging by throwing an error if the response isn't

if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }

 

Replies 0 (0)