Falaa galera,
Estou criando pela primeira vez uma API na shopify e estou com alguns problemas, primeiramente vou explicar um pouco do que estou querendo com essa API, o objetivo dela é que com o CPF o cliente consiga pesquisar todos os seus pedidos no cadastro dentro da shopify, o aplicativo dentro do shopify já foi desenvolvido e todas as permissões estão liberadas.
vamos para as dificuldades, começando que minha empresa adaptou o campo empresa (no cadastro do cliente) para que o CPF fosse preenchido, pois a algum tempo atrás o campo CPF não existia no shopify por não ser uma empresa brasileira, então o campo de pesquisa seria o company e assim ele retornar com o número das ordens que esse cliente teria, mas por fim isso não está dando certo, abaixo deixo o código utilizado, alguém tem alguma dica?
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 500px;
margin: 40px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(5, 5, 5, 5.1);
}
h1 {
text-align: center;
}
form {
display: flex;
align-items: center;
}
label {
margin-right: 10px;
}
input[type="text"] {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
background-color: #000;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
}
button:hover {
background-color: #c1c1c1;
color: #000;
}
#result {
margin-top: 20px;
}
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Pesquisar Pedidos por Empresa</h1>
<form id="orderSearchForm">
<label for="companyInput">Empresa:</label>
<input type="text" id="companyInput" required>
<button type="submit">Pesquisar</button>
</form>
<div id="result"></div>
</div>
<script>
const storeName = 'xxxxxxxxxx.myshopify.com';
const accessToken = 'shpat_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxcb5';
document.getElementById('orderSearchForm').addEventListener('submit', async (event) => {
event.preventDefault();
const company = document.getElementById('companyInput').value;
try {
// Busca os clientes com base na empresa fornecida
const customerResponse = await fetch(`https://${storeName}/admin/api/2023-07/customers/search.json?query=company:${encodeURIComponent(company)}`, {
headers: {
'X-Shopify-Access-Token': accessToken
}
});
if (!customerResponse.ok) {
throw new Error('Erro ao buscar os clientes.');
}
const customerData = await customerResponse.json();
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = '';
if (customerData.customers.length > 0) {
const customerIdList = customerData.customers.map(customer => customer.id);
const customerIdQueryParam = customerIdList.join(',');
// Busca os pedidos associados aos clientes encontrados
const orderResponse = await fetch(`https://${storeName}/admin/api/2023-07/orders.json?customer_ids=${customerIdQueryParam}`, {
headers: {
'X-Shopify-Access-Token': accessToken
}
});
if (!orderResponse.ok) {
throw new Error('Erro ao buscar os pedidos dos clientes.');
}
const orderData = await orderResponse.json();
if (orderData.orders.length > 0) {
const ul = document.createElement('ul');
orderData.orders.forEach(order => {
const li = document.createElement('li');
li.textContent = `Número do Pedido: ${order.id}`;
ul.appendChild(li);
});
resultDiv.appendChild(ul);
} else {
const p = document.createElement('p');
p.textContent = 'Nenhuma ordem encontrada para esta empresa.';
resultDiv.appendChild(p);
}
} else {
const p = document.createElement('p');
p.textContent = 'Empresa não encontrada.';
resultDiv.appendChild(p);
}
} catch (error) {
console.error(error);
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = '<p>Pedidos não encontrados.</p>';
}
});
</script>
</body>
</html>