Shopify Chrome Extension For Admin - json

Question

I'm trying to create an extension that adds 2 fields to the admin product page of shopify in order to add a metafield.
I know there are some extensions out there, like ShopifyFD and CustomFields, but mine is really, really simple, i'm by no means trying to copied it, this is very custom for my shopify store.
All I want, is to add 2 specific metafields to the page, and save it when i click the button Save.
That said, Everything is already working, but i'm having a problem during POST/PUT. It keeps returning status '303 See Other' and redirecting me to login, behavior that I do not encounter on neither of the 2 extensions i cited in the beginning. I wonder if the approach i'm using is the problem or what else could it be, so i'm resourcing to your help.
here how the header look like:
Request URL:https://mywebsite.myshopify.com/admin/products/461395295/metafields/9911129091.json
Request Method:PUT
Status Code:303 See Other
Remote Address:23.227.38.70:443
Like I mentioned I used a different approach as ShopifyFD or CustomFields, instead of loading a script, i'm using the content script.
here how my manifest look like:
"content_scripts": [
{
"all_frames": true,
"matches": [
"https://*.myshopify.com/admin/products/*"
],
"run_at": "document_end",
"js": [
"scripts/vendors/jquery.js",
"scripts/vendors/handlebars-v3.0.0.js",
"scripts/vendors/handlebars-helpers.js",
"scripts/utils.js",
"scripts/shopify-product-addon.js"
]
}
]
1 - I replace the current Save button with a new one so i can save the metafields before submitting the native form
2 - I append the POST/PUT method to the new Save button i have replaced
here how my post/put looks like:
Note: record is the values i'm saving.
var metaJSON;
if (record.update) {
metaJSON = {
'metafield': {
'id': record.metafield_id,
'value': record.value,
'value_type': record.value_type
}
}
method = 'PUT';
url = '/admin/' + route_url + '/metafields/' + record.metafield_id + '.json';
} else {
metaJSON = {
'metafield': {
'namespace': record.namespace,
'key': record.key,
'value': record.value,
'value_type': record.value_type
}
};
url = '/admin/' + route_url + '/metafields.json';
method = 'POST';
}
$.ajax({
type: method,
url: url,
data: metaJSON,
dataType: 'json',
success: function(d) {
console.log('SUCCESS');
},
error: function(d) {
console.log('ERROR');
}
});
The problem is that It fails everytime. I wonder what's wrong. Is the method i'm using?
I'm doing pretty much as the ShopifyFD is when posting/putting to the ajax api, just not sure what's missing. the only difference i've found was that on the ShopifyFD, there is a cookie set to request_method=PUT or request_method=POST. I don't know how this cookie is set, because it's not on the script. I even tried to set it manually, but it doesn't work.
As you can see, i have tried pretty much everything.
Does anyone else has any other suggestion?! :P
Thanks

Answer 1

I didn't figure it out why ShopifyFD works, i would really like to understand thou, but i found another way to make it work.
You need to set the CSRF token before you request the header.
Works like a charm!
$.ajax({
type: method,
url: url,
data: metaJSON,
beforeSend: function (request) {
var token = $("meta[name=csrf-token]").attr('content');
request.setRequestHeader("X-CSRF-Token", token);
},
.
.
.