Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
To get cart data in storefront api need the card Id. The createCart mutation creates a new cart and returns the cart id in the response but where can I get the cart id to show the cart data on the cart page when a user logins to his account
Hi Rakibul,
When a user logs in to their account on your storefront, you can use the `customerAccessTokenCreate` mutation to generate a customer access token. The customer access token can then be used to retrieve the user's cart data using the `customer` query.
Here's an example of how to retrieve a user's cart data using the customer access token in Javascript:
const fetch = require('node-fetch');
// Replace {storefront_access_token} with your storefront access token
const storefrontAccessToken = '{storefront_access_token}';
// Replace {customer_access_token} with the customer access token generated when the user logs in
const customerAccessToken = '{customer_access_token}';
const query = `
query {
customer(customerAccessToken: "${customerAccessToken}") {
id
email
cart {
id
webUrl
lineItems(first: 10) {
edges {
node {
id
title
quantity
variant {
id
title
price
}
}
}
}
}
}
}
`;
fetch(`https://{your_store_name}.myshopify.com/api/2021-07/graphql.json`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Shopify-Storefront-Access-Token': storefrontAccessToken,
},
body: JSON.stringify({ query }),
})
.then((response) => response.json())
.then((data) => {
const cart = data.data.customer.cart;
// Do something with the cart data
})
.catch((error) => console.error('Failed to retrieve cart data:', error));
In this example, the `fetch` function is used to make a POST request to the GraphQL API endpoint. The `headers` object includes the storefront access token required to authenticate the request. The `query` variable contains a GraphQL query that retrieves the user's cart data, including the cart ID, web URL, and line items.
When the request is successful, the cart data is returned in the `data` object. You can then extract the cart data and use it to display the user's cart on the cart page.
Note that the `customerAccessTokenCreate` mutation requires the user's email and password to generate a customer access token. You can prompt the user to enter their email and password when they log in to their account on your storefront, and then use these credentials to generate the customer access token.
Hope this helps!
Liam | Developer Advocate @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog
I have tried your graphql query to get cart by customerAccessTocken but it shows `cannot query field "cart" on type "Customer
query {
customer(customerAccessToken: "f85b441254a34de4d432f2c9063c8bcc") {
id
email
cart {
id
webUrl
lineItems(first: 10) {
edges {
node {
id
title
quantity
variant {
id
title
price
}
}
}
}
}
}
}
Please help me to get cart items using customerAccessTocken.