Checkout Input Field Capturing the Value

Solved
Highlighted
Tourist
10 1 2

I was wondering is there any way we can capture the value of custom input field from checkout information page to the order object in shopify when the order is placed.

Being on a Shopify Plus and editing the checkout.liquid File, I successfully got the input field on the front end but when the order is placed I want it to append it to the order object . Is there a specific code or method I need to use ? 

 

0 Likes
Highlighted

You need to use the checkout.attributes property of Checkout object 

And name the input like for example

<input id="shipping-preference" name="attributes[shipping-preference]">

 

When the order is created you'll be able to see the value inside Additional Details section of the order.

(as you correctly stated, this is possible only on Shopify Plus)

• If the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
Highlighted
Tourist
10 1 2

Thanks for the reply. Any Ideas on how to use that ? currently i am using the following input field.

<input id="purchase-order-number" name="checkout[attributes][purchase-order-number]" placeholder="Purchase Order Number" autocorrect="off" aria-required="true" size="30"> 

  and do I need to add scripts and make an ajax call to the post the input value to the order object or it will do it automatically after i complete the checkout process.

0 Likes
Highlighted

It should be automatic

• If the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
Highlighted
Tourist
10 1 2

I cant find it anywhere on the order object after the order is created. I fetched the order from the api and could not find any info related to the custom input field anywhere on the json object. 

0 Likes
Highlighted

If you open the order in backend on the right sidebar is there a section called Additional Details under Notes?

Is the field purchase-order-number visible there with its value?

If not there is a problem with the code. Let me know and in case I'll try to replicate a working solution

• If the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
Highlighted
Tourist
10 1 2

This is an accepted solution.

Alright, Thanks for all the help, I have got it fixed and got it in the additional details section of the order as well and the following thread helped me a lot where I was missing a  parameter in my code.

Incase someone needs to have a code for reference, you can find it right here. 

Add custom text input field to Shopify Plus checkout

0 Likes