Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Show the Order Note on checkout , using checkout extension

Show the Order Note on checkout , using checkout extension

VsisodiyaDesign
Shopify Partner
60 2 9

I need help to understand why i not got value based on following code -

Its working fine order note is showing on the checkout but no value on order note , can anyone help me ?

import React from 'react';
import { useApplyNoteChange, useNote, reactExtension, TextField } from "@shopify/ui-extensions-react/checkout";

export default reactExtension("purchase.checkout.payment-method-list.render-after", () => <NoteDealer />);

function NoteDealer() {
  const applyNoteChange = useApplyNoteChange();
  const note = useNote();

  // Function to handle note change
  const handleNoteChange = (newNote) => {
    applyNoteChange(newNote); // Apply the new note using the provided hook
  };

  return (
    <TextField
      id="note"
      name="note"
      placeholder="Add a note to your order"
      value={note || ''} // Bind the value of the TextField to the note state
      onChange={handleNoteChange} // Call handleNoteChange function on change
      multiline // Enable multiline for the TextField
    />
  );
}
Looking for a skilled Shopify developer to handle tasks or provide monthly retainer services?
Please contact me at

 https://vsisodiyadesign.com

Replies 3 (3)

saumya__22
Shopify Partner
2 0 0

I also get the same error but I have completed this task with the help of metafields if it helps you.
Here is the code

import {
extension,
TextField,
BlockStack,
Checkbox,
} from "@shopify/ui-extensions/checkout";
// Set the entry point for the extension
export default extension("purchase.checkout.payment-method-list.render-after", (root, api) => {
// Keep track of the UI state
const state = {
metafields: api.metafields.current,
showDeliveryInstructions: false,
};

// Render the initial extension UI
renderUI({ root, api, state });
// Keep track if metafields change. If they do, then re-render.
api.metafields.subscribe((newMetafields) => {
state.metafields = newMetafields;
renderUI({ root, api, state });
});
});

function renderUI({ root, api, state }) {
const { applyMetafieldChange } = api;

// In case this is a re-render, then remove all previous children
for (const child of root.children) {
root.removeChild(child);
}

// Define the metafield namespace and key
const metafieldNamespace = "custom";
const metafieldKey = "delivery_instructions";

// Get a reference to the metafield
const delivery_instructions = state.metafields?.find(
(field) =>
field.namespace === metafieldNamespace && field.key === metafieldKey
);
// Create the Checkbox component
const app = root.createComponent(BlockStack, {}, [
root.createComponent(
Checkbox,
{
checked: state.showDelivery_instructions,
onChange: () => {
state.showDelivery_instructions = !state.showDelivery_instructions;
renderUI({ root, api, state });
},
},
"Provide delivery instructions"
),
]);

// If the Checkbox component is selected, then create a TextField component
if (state.showDelivery_instructions) {
app.appendChild(
root.createComponent(TextField, {
multiline: 3,
label: "Delivery instructions",
onChange: (value) => {
// Apply the change to the metafield
applyMetafieldChange({
type: "updateMetafield",
namespace: metafieldNamespace,
key: metafieldKey,
valueType: "string",
note:`there comes the note`,
value,
});
},
value: delivery_instructions?.value,
})
);
}

// Render the extension components
root.appendChild(app);
}

VsisodiyaDesign
Shopify Partner
60 2 9
Without using metafield - thats show the order note for only to b2b customer .
 
import React, { useState } from 'react';
import {
  useApplyNoteChange,
  useNote,
  reactExtension,
  TextField,
  BlockStack,
  usePurchasingCompany,
} from "@shopify/ui-extensions-react/checkout";

// Define the extension point where the component will be injected
export default reactExtension("purchase.checkout.payment-method-list.render-after", () => <NoteDealer />);

function NoteDealer() {
  const purchasingCompany = usePurchasingCompany();
  if(!purchasingCompany) {
    return null;
  }

  const note = useNote();
const applyNoteChange = useApplyNoteChange();

  return (
    <BlockStack>
      <TextField
        label="Notes(Optional)"
        multiline={2}
        onChange={(value) => {
          // Apply the change to the order note
          applyNoteChange({
            type: "updateNote",
            note: value,
          });
        }}
        value={note}
      />
    </BlockStack>
  );
}
Looking for a skilled Shopify developer to handle tasks or provide monthly retainer services?
Please contact me at

 https://vsisodiyadesign.com

saumya__22
Shopify Partner
2 0 0

I want this value in note_attribute but it's not working Can you please guide me.