how to call cartj.js without disable store password?

[rushikesh93]

hello, I'm trying to call get cart API in my custom Shopify app, below is , my code,

const shopDomain = 'myshop.myshopify.com';
  const accessToken = 'sh0dfe2de8c1c791a9a8e2c7a2de9a5901'; 
  const url = `https://${shopDomain}/cart.js`;

  fetch(url, {
    mode: "no-cors",
    headers: {
      'X-Shopify-Access-Token': 'shp0dfe2de8c1c791a9a8e2c7a2de9a5901',
      'Content-Type'    : 'application/json',
      'X-Requested-With': 'XMLHttpRequest', 
      'Access-Control-Allow-Origin': shopDomain,
    },
  })
  .then(response => response.json())
  .then(data => {
    // Handle the cart data
    console.log('Cart data:', data);
  })
  .catch(error => {
    console.error('Error fetching cart data:', error);
  });

but when I run this code, it asks me for the password in Network->Response Tab.

so my question is how to get cart details without a store password?

@kbarcant @NomtechSolution @made4Uo @joeldebruijn @PaulNewton 

[NomtechSolution]

To retrieve cart details without requiring the store password, you need to use the Shopify Storefront API. The Storefront API allows you to access storefront data, including the cart, products, collections, etc.

To use the Storefront API, you'll need to make GraphQL queries instead of using the fetch function with the cart.js endpoint. Here's an example of how you can retrieve cart details using the Storefront API in a custom Shopify app:

const fetch = require('node-fetch');

const shopDomain = 'myshop.myshopify.com';
const accessToken = 'YOUR_STOREFRONT_ACCESS_TOKEN';
const url = `https://${shopDomain}/api/2021-07/graphql.json`;

const query = `
  query {
    customer {
      cart {
        id
        totalPrice
        lineItems(first: 10) {
          edges {
            node {
              id
              title
              quantity
              variant {
                id
                title
                price
              }
            }
          }
        }
      }
    }
  }
`;

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Shopify-Storefront-Access-Token': accessToken,
  },
  body: JSON.stringify({ query }),
})
  .then(response => response.json())
  .then(data => {
    // Handle the cart data
    console.log('Cart data:', data.data.customer.cart);
  })
  .catch(error => {
    console.error('Error fetching cart data:', error);
  });

[rushikesh93]

Hello, thanks for your reply,
I'm developing an app using Shopify PHP App Template,

it's my Router

Route::get('/api/get-cart-details', [App\Http\Controllers\FormController::class, 'fetchCartDetails']);

Controller

public function fetchCartDetails(Request $request)
{
//https://shopify.dev/docs/api/storefront -> for dynamic $shopDomain and $accessToken

$shopDomain = 'myshop.myshopify.com';
$apiKey = '47ff03ffb186ff9c5a9aeb5f1b1ea853';
$accessToken = 'shpat2de8c1c791a9a8e2c7a2de9a5901';

//$url = "https://$shopDomain/admin/api/2023-04/cart.json";
$url = "https://$shopDomain/cart.js";

$response = Http::withHeaders([
'X-Shopify-Access-Token' => $accessToken,
])->get($url);

if ($response->failed()) {
$statusCode = $response->status();
$errorResponse = $response->json();
return response()->json(['error' => 'Error fetching cart details', 'statusCode' => $statusCode, 'response' => $errorResponse], 500);
//return response()->json(['error' => 'Error fetching cart details'], 500);
}

$cartData = $response->json();
return response()->json($cartData);
}

JSX file

const shopDomain = 'myshop.myshopify.com';
const accessToken = 'shpat2de8c1c791a9a8e2c7a2de9a5901';
const url = `https://${shopDomain}/cart.js`;

fetch(url, {
mode: "no-cors",
headers: {
'X-Shopify-Access-Token': 'shpat2de8c1c791a9a8e2c7a2de9a5901',
'Content-Type' : 'application/json',
'X-Requested-With': 'XMLHttpRequest',
'Access-Control-Allow-Origin': shopDomain,
},
})
.then(response => response.json())
.then(data => {
// Handle the cart data
console.log('Cart data:', data);
})
.catch(error => {
console.error('Error fetching cart data:', error);
});

how can I use the above-suggested code in my code? please help me with this.
Thanks.