Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.
Solved

Need help related Checkout-ui-extension with select list

devPramod
Shopify Partner
16 0 11

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.

 

Accepted Solution (1)
mishareyzlin
Shopify Staff (Retired)
2 1 0

This is an accepted solution.

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 
},

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

Replies 5 (5)

devPramod
Shopify Partner
16 0 11

 

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
Shopify Partner
16 0 11

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

mishareyzlin
Shopify Staff (Retired)
2 1 0

This is an accepted solution.

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 
},

To learn more visit the Shopify Help Center or the Community Blog.

devPramod
Shopify Partner
16 0 11

@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
Shopify Staff (Retired)
2 1 0

 

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


@devPramod wrote:

@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:

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.

To learn more visit the Shopify Help Center or the Community Blog.