Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

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

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

Lynn89
Shopify Partner
4 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)