Shopify API请求
我正在尝试访问Shopify后端,以使用Vanilla JS更新客户的电子邮件,电话和名称。请求正在成功返回,但实际值未更改。 为我的商店创建了一个自定义应用程序,并遵循了文档以访问Shopify
HTML:
<div class="container with_background">
<form action="" method="" id="updateCustomerForm" class="page-width">
<div class="input-wrapper form-row --100">
<label for="AddressFirstName">First Name</label>
<input type="text" name="address[id]" id="customerId" value="{{customer.id}}" autocapitalize="words" disabled style="display:none;">
<input type="text" name="address[first_name]" id="customerFirstName" value="{{customer.first_name}}" autocapitalize="words">
</div>
<div class="input-wrapper form-row --100">
<label for="AddressLastName">Last Name</label>
<input type="text" name="address[Last_name]" id="customerLarstName" value="{{customer.last_name}}" autocapitalize="words">
</div>
<div class="input-wrapper form-row --100">
<label for="AddressEmail">Email Address</label>
<input type="email" name="address[Email_address]" id="customerEmail" value="{{customer.email}}" autocapitalize="words">
</div>
<div class="input-wrapper form-row --100">
<label for="AddressPhone">Mobile Number</label>
<input type="tel" name="address[Phone]" id="customerPhone" value="{{customer.phone}}">
</div>
<button type="submit" id="saveCustomerToggle" class="btn btn--logout tablinks">Save</button>
</form>
</div>
JS:
document.getElementById("updateCustomerForm").addEventListener("submit", function(e){
e.preventDefault();
e.stopPropagation();
let custID = document.getElementById("customerId").value ;
let custFN = document.getElementById("customerFirstName").value ;
let custLN = document.getElementById("customerLarstName").value ;
let custEM = document.getElementById("customerEmail").value ;
let custPH = document.getElementById("customerPhone").value ;
console.log(custFN);
let customerdata = {
"customer": {
"customer.id": custID,
"customer.first_name": custFN ,
"customer.last_name": custLN,
"customer.email": custEM,
"customer.phone": custPH,
}
};
console.table(customerdata);
let formData = new FormData(document.getElementById("updateCustomerForm"));
console.log(formData);
const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('PUT', "https://{api_key}:{api_password}@{store}.myshopify.com/admin/api/2022-04/customers/" + {{customer.id}} +".json", true);
xhr.setRequestHeader("Content-type", "application/json")
xhr.send(JSON.stringify(customerdata));
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr);
console.log("1");
console.log(formData);
console.table(customerdata);
} else {
console.log(xhr);
console.log("2");
console.log(formData);
}
} else {
console.log(xhr);
console.log("3");
console.log(formData);
}
};
知道为什么它返回真实,但对实际值没有采取行动?
I am trying to access the Shopify backend to update a customer's email, phone, and name using vanilla JS. the request is returning successfully but the actual values are not changed.
created a custom app for my store and followed the documentation to get access to api for shopify
HTML:
<div class="container with_background">
<form action="" method="" id="updateCustomerForm" class="page-width">
<div class="input-wrapper form-row --100">
<label for="AddressFirstName">First Name</label>
<input type="text" name="address[id]" id="customerId" value="{{customer.id}}" autocapitalize="words" disabled style="display:none;">
<input type="text" name="address[first_name]" id="customerFirstName" value="{{customer.first_name}}" autocapitalize="words">
</div>
<div class="input-wrapper form-row --100">
<label for="AddressLastName">Last Name</label>
<input type="text" name="address[Last_name]" id="customerLarstName" value="{{customer.last_name}}" autocapitalize="words">
</div>
<div class="input-wrapper form-row --100">
<label for="AddressEmail">Email Address</label>
<input type="email" name="address[Email_address]" id="customerEmail" value="{{customer.email}}" autocapitalize="words">
</div>
<div class="input-wrapper form-row --100">
<label for="AddressPhone">Mobile Number</label>
<input type="tel" name="address[Phone]" id="customerPhone" value="{{customer.phone}}">
</div>
<button type="submit" id="saveCustomerToggle" class="btn btn--logout tablinks">Save</button>
</form>
</div>
JS:
document.getElementById("updateCustomerForm").addEventListener("submit", function(e){
e.preventDefault();
e.stopPropagation();
let custID = document.getElementById("customerId").value ;
let custFN = document.getElementById("customerFirstName").value ;
let custLN = document.getElementById("customerLarstName").value ;
let custEM = document.getElementById("customerEmail").value ;
let custPH = document.getElementById("customerPhone").value ;
console.log(custFN);
let customerdata = {
"customer": {
"customer.id": custID,
"customer.first_name": custFN ,
"customer.last_name": custLN,
"customer.email": custEM,
"customer.phone": custPH,
}
};
console.table(customerdata);
let formData = new FormData(document.getElementById("updateCustomerForm"));
console.log(formData);
const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('PUT', "https://{api_key}:{api_password}@{store}.myshopify.com/admin/api/2022-04/customers/" + {{customer.id}} +".json", true);
xhr.setRequestHeader("Content-type", "application/json")
xhr.send(JSON.stringify(customerdata));
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr);
console.log("1");
console.log(formData);
console.table(customerdata);
} else {
console.log(xhr);
console.log("2");
console.log(formData);
}
} else {
console.log(xhr);
console.log("3");
console.log(formData);
}
};
any idea why it's returning true but it's not taking action for the actual values?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论