Need help related Checkout-ui-extension with select list

[devPramod]

Hello,
I have created the select list successfully using the checkout extension.
But when I change the option it is not changing on the front. please check:- https://d.pr/v/cUTzWM
It is happing because I use the applyCartLinesChange method inside the on-change method.

onChange: (value) => {
const attributes = [
{
key: DELIVERY_ATTRIBUTE,
value: value
}
];

applyCartLinesChange({
type: 'updateCartLine',
id: target.current.lines[0].id,
attributes: attributes
}).then()
},

Can anyone tell me what I am doing wrong.

[devPramod]

import {extend, Select, Grid, View, GridItem, Text, Heading, Divider, BlockSpacer} from "@shopify/checkout-ui-extensions";

extend("Checkout::CartLineDetails::RenderAfter", (root, {target, applyCartLinesChange, appMetafields}) => {
    
   
    const select = root.createComponent(Select, {
      label: 'DeliveryType',
      value: '1',
      onChange: (value) => {
        console.log(value);
        const attributes = [
            {
            key: 'Store',
            value: 'pramod test'
            }
        ];
        applyCartLinesChange({
            type: 'updateCartLine',
            id: target.current.lines[0].id,
            attributes: attributes
        }).then(console.log)
    },

      options: [
        {
          value: '1',
          label: 'Pickup',
        },
        {
          value: '2',
          label: 'Ship',
        },        
      ],

    });
  
    root.appendChild(select);
  });​

full sample code

[devPramod]

Hello Shopify team,
Again this issue occurs. any update on this?

[mishareyzlin]

Hey, your code needs to reflect the updated value back onto the select component:

So that onChange handler would read as follos:

onChange: (value) => {
  const attributes = [
    {
      key: "Store",
      value: "pramod test",
    },
  ];
  applyCartLinesChange({
    type: "updateCartLine",
    id: target.current.lines[0].id,
    attributes: attributes,
  });
  select.updateProps({ value }); // <-- this 
},

[devPramod]

@mishareyzlin ,
Thanks for the solution. its working perfectly.
Have one question, how can I find updated functions example like this.if possible can you please share documentation link to check updated examples for each component.

[mishareyzlin]

Hey, I’m glad to hear that the suggested fix worked for you!

@devPramod

@mishareyzlin , Thanks for the solution. its working perfectly. Have one question, how can I find updated functions example like this.if possible can you please share documentation link to check updated examples for each component.

At the moment, your best bet will be:

• Rely on suggestions provided by Typescript as part of our API, you don’t have to choose to author your extension code in Typescript, at least VS Code will provide the auto-complete also for .js files that aren’t directly using typescript.
• Examine Remote UI Core docs https://github.com/Shopify/remote-ui/tree/main/packages/core#remotecomponent

We are gradually improving our documentation, we have recently updated several sections of the Standard API docs (such as Storefront API access or client-side validation example and quite some more). We’ll hopefully soon cover the gap for pure JS based component API docs as well.