Ecommerce Shopify WordPress Discussion

Shopify Checkout UI Extension & Functions to Update Delivery Option

My aim is to rename a delivery option in the checkout. The title needs to be dynamic and come from the value of a field in a metaobject. This value is selected by the customer. Metaobject name: Delivery Area Fields: Name Zip code Delivery time So far I have: Defined the metaobject and added some entries Created a Checkout UI Extension that retrieves these delivery areas and renders a HTML Select element When the delivery area is selected the shipping address zip code is updated to that of the selected delivery area zip code What I need to do now is rename the delivery option so it picks up the delivery time value of the selected Delivery area and says something like "Express delivery in 2 hours" I followed this tutorial and have managed to add a Delivery Customization Function, and it is working as it should. My question is, is there a way to link the Checkout UI Extension and the Function so that the Function knows when the delivery area has been selected, can pick up the delivery time value and then update the delivery option? Here is my Checkout UI Extension: import { extension, Select } from '@shopify/ui-extensions/checkout'; export default extension('purchase.checkout.delivery-address.render-after', (root, api) => { const state = { deliveryArea: { name: null, zipCode: null } }; api.query( `query ($type: String!, $first: Int!) { metaobjects(type: $type, first: $first) { nodes { name: field(key: "name") { value } zipCode: field (key: "zip_code") { value } } } }`, { variables: { type: 'delivery_area', first: 250 } } ) .then(({ data }) => { // Get & Set initial value in state const firstOption = data.metaobjects.nodes[0]; state.deliveryArea = { name: firstOption.name.value, zipCode: firstOption.zipCode.value } updateAddressZipCode(); // Build object for new Select element options const selectOptions = buildOptions(data.metaobjects.nodes); const select = root.createComponent(Select, { label: 'Choose your area', options: selectOptions, value: null, onChange: onSelectChange, }); root.appendChild(select); }) .catch(console.error); async function onSelectChange(selected) { const selectedValues = selected.split('|'); state.deliveryArea = { name: selectedValues[0], zipCode: selectedValues[1] } await api.applyAttributeChange({ key: 'delivery_area', type: 'updateAttribute', value: selectedValues[0], }); updateAddressZipCode(); } async function updateAddressZipCode() { const result = await api.applyShippingAddressChange({ type: 'updateShippingAddress', address: { zip: state.deliveryArea.zipCode } }); } }); function buildOptions(data) { return data.map((item) => { return { value: `${item.name.value}|${item.zipCode.value}`, label: item.name.value } }); } My Function is exactly the same as it is in the tutorial posted above.
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.