Hello, I created the functionality that retrieves the ID of the logged-in customer and, based on that ID, identifies the staff assigned to the company associated with the logged-in customer. I have few roles assigned to staff members in admin, So my question is I want to filter the staff member list according to specific roles assigned to them. For example, Staff member - Jaspreet Singh and his role is B2B-Sales Op Manager and same there are few more roles assigned to different staff members. Show on storefront. Below is my code..
<script>
// Step 1: Get the logged-in customer ID using Liquid
const customerId = 'gid://shopify/Customer/{{ customer.id | json }}';
const accessToken = 'xxxxxxxxxxxxxxxxxxxxx'; // Replace with your actual access token
console.log('customerId:', customerId);
// Step 2: Query to fetch the company ID associated with the customer
const companyQuery = `
query {
customer(id: "${customerId}") {
companyContactProfiles {
company {
id
}
}
}
}
`;
fetch(`https://usa-therabody.myshopify.com/admin/api/unstable/graphql.json`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Shopify-Access-Token': accessToken,
},
body: JSON.stringify({ query: companyQuery }),
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
const company = data.data.customer.companyContactProfiles[0]?.company;
if (!company) {
throw new Error('Company data not found');
}
const companyId = company.id;
// Step 3: Query to fetch staff members and customers assigned to the company
const graphqlQuery = `
query {
company(id: "${companyId}") {
locations(first: 10) {
edges {
node {
id
name
staffMemberAssignments(first: 10) {
edges {
node {
id
staffMember {
id
firstName
lastName
email
}
}
}
}
}
}
}
}
}
`;
// Step 4: Fetch staff members and customers assigned to the company
return fetch(`https://usa-therabody.myshopify.com/admin/api/unstable/graphql.json`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Shopify-Access-Token': accessToken,
},
body: JSON.stringify({ query: graphqlQuery }),
});
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
const companyData = data.data.company;
if (!companyData) {
throw new Error('Company data not found');
}
const staffAssignments = companyData.locations.edges.flatMap(location => {
return location.node.staffMemberAssignments.edges.map(edge => edge.node);
});
const staffList = document.getElementById('staff-members');
staffList.innerHTML = ''; // Clear existing content
staffAssignments.forEach(assignment => {
const staffMember = assignment.staffMember;
const listItem = document.createElement('li');
listItem.textContent = `${staffMember.firstName} ${staffMember.lastName} - ${staffMember.email}`;
staffList.appendChild(listItem);
});
})
.catch(error => {
console.error('Error fetching data:', error);
});
</script>
