Solved

Adding notes to order in checkout ui extension

imabhijithak
Shopify Partner
5 0 0
Hey, I'm a young Shopify developer, and I'm trying to create a Shopify checkout extension where the text the user added should be added to the order note as well. Could you please help me figure this out?
Also, please suggest how I could use 
useNote()
import
{
  reactExtension,
  TextField,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return <TextField name="checkout[note]" id="checkout_note" label="PO # / Note" />;
}
Accepted Solution (1)

Rishihuptech
Shopify Partner
589 105 119

This is an accepted solution.

Hello @imabhijithak 

You can use the below code to add notes in order

import {
  reactExtension,
  TextField,
  useApplyNoteChange,
} from '@shopify/ui-extensions-react/checkout';
import { Button } from '@shopify/ui-extensions/checkout';
import {  useState } from 'react';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
 const applyNoteChange= useApplyNoteChange();
 const [note,setNote]=useState("")
 const [loader,setLoader]=useState(false)
const handleValue=async(value)=>{
  setNote(value)
}
const addNote=async()=>{
  setLoader(true)
  try {
    const data=await applyNoteChange({
      type:"updateNote",
      note:note
     })
     console.log(data)
     if(data?.type =="success"){
      setLoader(false)
     }
  } catch (error) {
    setLoader(false)
  }
}
  return<>
  <TextField name="checkout[note]" onInput={handleValue} id="checkout_note" label="PO # / Note" />
  <Button  onPress={addNote}>{loader?"Adding..":"Add Note"} </Button>
  </> 
}

 

 

If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge the support you received and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.

 

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Reply 1 (1)

Rishihuptech
Shopify Partner
589 105 119

This is an accepted solution.

Hello @imabhijithak 

You can use the below code to add notes in order

import {
  reactExtension,
  TextField,
  useApplyNoteChange,
} from '@shopify/ui-extensions-react/checkout';
import { Button } from '@shopify/ui-extensions/checkout';
import {  useState } from 'react';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
 const applyNoteChange= useApplyNoteChange();
 const [note,setNote]=useState("")
 const [loader,setLoader]=useState(false)
const handleValue=async(value)=>{
  setNote(value)
}
const addNote=async()=>{
  setLoader(true)
  try {
    const data=await applyNoteChange({
      type:"updateNote",
      note:note
     })
     console.log(data)
     if(data?.type =="success"){
      setLoader(false)
     }
  } catch (error) {
    setLoader(false)
  }
}
  return<>
  <TextField name="checkout[note]" onInput={handleValue} id="checkout_note" label="PO # / Note" />
  <Button  onPress={addNote}>{loader?"Adding..":"Add Note"} </Button>
  </> 
}

 

 

If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge the support you received and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.

 

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required