Get values from subscription extension fields - Argo admin

manektech
Tourist
6 0 1

I am trying to use newly launched Shopify Subscription APIs on my dev store which has approved access. I have installed the Argo admin in local environment. Now I want to make a request to the server, from the server I will call GraphQL API to create subscription plan with plan title, the delivery frequency, and the discount percentage. 

For calling GraphQL API to create subscription plan with all the fields I have to pass these fields value to the server first. Is there any way to get the field values from subscription extension fields - Argo admin?

I have explored and referred many documentation to find solution for this but I have not find anything. 

Can anyone help me here? it will be great help for me.

Thanks.

 

0 Likes
Trish_Ta
Shopify Staff
Shopify Staff
56 13 21

Hi manektech,

Can you clarify what you mean by getting the field values from subscription extension fields?

If your extension is creating a brand new subscription plan then the plan title, frequency and etc should be managed in local state by your extension. For example, your extension can display a form to the merchant to fill out these fields. You would pass the form state to your app server in order to make the Graphql API call to create a subscription plan.

Hope this helps!

0 Likes
manektech
Tourist
6 0 1

Hi @Trish_Ta , Thanks for the reply and for suggestion you have given.

What I mean by getting the field values from subscription extension fields is that, How we can capture the values of the fields which is automatically generated by Shopify Argo extension and those fields are not displaying under form. So, for getting those fields value using JavaScript what we have to do?

Generally, in HTML, JavaScript we can capture the value of the fields like this: var a = $("#testId").val();

But this is not working in Argo extension template. I have used vanilla JavaScript template.

As you have suggested to use the form to display fields to the merchant, Argo extension is using their own template so I can not make any changes on that and can not display fields inside the form.

Anyway, I have found one solution for this by storing fields values in one array when fields value will get change. 

const planTitleField = root.createComponent(TextField, {
label: 'Plan title',
name:"planTitle",
value: '',
id:"planTitle",
onChange(value) {
planTitleField.updateProps({
value,
});
dataArr['planTitle'] = value;
},
});
In above code snippet, dataArr array is the globally used array in particular function(create plan). I have stored the value of plantitle field to the dataArr array on change of that field and then I have used that global array on click of create plan to pass the plan details to the server as shown below:

const primaryButton = root.createComponent(Button, {
title: 'Create plan',
primary: true,
onPress: async () => {
const token = await sessionToken.getSessionToken();
let planTitle = dataArr['planTitle'];
let planDeliveryFrequency = dataArr['planDeliveryFrequency'];
let planPercentageOff = dataArr['planPercentageOff'];
let billingIntervalField = dataArr['billingIntervalField'];
let sellingplanGroupName = dataArr['sellingplanGroupName'];
let _data = {
"Plan_Title": planTitle,
"plan_DeliveryFrequency":planDeliveryFrequency,
"plan_PercentageOff":planPercentageOff,
"plan_productId":data.productId,
"plan_billingIntervalField":billingIntervalField,
"plan_sellingplanGroupName":sellingplanGroupName,
}
const response = await fetch('server URL goes here', {
method: "POST",
body: JSON.stringify(_data),
headers: {"Content-type": "application/json","Authorization":token || 'unknownToken'}
});
if (response.ok) {
let json = await response.json();
console.log(JSON.stringify(json));
} else {
alert("HTTP-Error: " + response.status);
}
done();
},
}) ;

So it works for me.

Thanks!

0 Likes