How to update a order metafield using new shopify checkout ui extensions[urgent].

How to update a order metafield using new shopify checkout ui extensions[urgent].

testingdev
Shopify Partner
6 0 0

I am trying to add data to a order meta field using shopify checkout ui  extensions.
trying to figure out a way  when a transaction or order placement is completed then how to pass/update data in order metafields.
my code works when I do it other way that is creating an input in ui and getting its value to pass it to applymetafieldchanges hook but is there any way i can directly update metafield data.
below is code that i want to change 

 

 

 

 

import React, { useState } from "react";
import {
reactExtension,
TextField,
BlockStack,
useApplyMetafieldsChange,
useMetafield,
Checkbox,
useBuyerJourneyCompleted,
} from "@shopify/ui-extensions-react/checkout";

// Set the entry point for the extension
export default reactExtension("purchase.checkout.shipping-option-list.render-after", () => <App />);

function App() {
// Set up the checkbox state
const [checked, setChecked] = useState(false);

// Define the metafield namespace and key
const metafieldNamespace = "details";
const metafieldKey = "date";

// Get a reference to the metafield
const deliveryInstructions = useMetafield({
namespace: metafieldNamespace,
key: metafieldKey,
});
// Set a function to handle updating a metafield
const applyMetafieldsChange = useApplyMetafieldsChange();

// Set a function to handle the Checkbox component's onChange event
const handleChange = () => {
setChecked(!checked);
};
// Render the extension components
return (
<BlockStack>
<Checkbox checked={checked} onChange={handleChange}>
Provide delivery instructions
</Checkbox>
{checked && (
<TextField
label="Delivery instructions"
multiline={3}
onChange={(value) => {
// Apply the change to the metafield
applyMetafieldsChange({
type: "updateMetafield",
namespace: metafieldNamespace,
key: metafieldKey,
valueType: "string",
value,
});
}}
value={deliveryInstructions?.value}
/>
)}
</BlockStack>
);
}

 

 

 

Reply 1 (1)

EasifyApps-Zoe
Shopify Partner
582 14 44

Hi @testingdev,

I have a simpler solution for you to create custom fields without coding. You can use the Free version of the Easify Product Options app. It only takes a few minutes to set up! Here's a quick demo on how to do it:

  • Create a new option set:

EasifyAppsZoe_0-1690987736574.png

 

  • Add a Checkbox for customers to select "Provide delivery instructions" or not.

EasifyAppsZoe_1-1690987785818.png

 

  • Add a Text Area for customers to enter "Delivery instructions" if they select the checkbox using Conditional Logic

EasifyAppsZoe_2-1690987867610.png

EasifyAppsZoe_3-1690987875040.png

 

  • Finally, assign the option set to your relevant products, and you're good to go:

EasifyAppsZoe_4-1690987892276.png

 

I believe this method is super easy, and you should definitely try the app. However, if you still prefer custom code, feel free to ignore my suggestion 😊.

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support