Hi all,
I’m building a checkout-ui-extension app that creates an extra field in the checkout. The selected value is placed in a metafield. But when i look at the function input the content of this metafield is null. Which is expected because there no selection made. But after updating the metafield from the checkout-ui-extension the function is not triggered again.
Question: How can I trigger the function when there is a new selection made?
Update metafield inside checkout-ui-extension
applyMetafieldsChange(
{
type: 'updateMetafield',
namespace: '$app:ils',
key: 'selected_delivery',
value: <selectedValue>,
valueType: 'string',
}
);
Input GraphQL query
query RunInput {
deliveryCustomization {
metafield(namespace: "$app:ils", key: "selected_delivery") {
value
}
}
cart {
deliveryGroups {
deliveryOptions {
description
handle
title
code
}
}
}
}
Input JSON
{
"deliveryCustomization": {
"metafield": null
},
"cart": {
"deliveryGroups": [
{
"deliveryOptions": [
{
"description": "",
"handle": "61a65f33b3598880127e654812d5b554-01ca9f1dd9a59fa4e1c6c4a7081d88ef",
"title": "Standaard",
"code": "Standaard"
}
]
}
]
}
}
checkout-ui-extension TOML
[[extensions.metafields]]
namespace = "$app:ils"
key = "selected_delivery"
function TOML
[extensions.input.variables]
namespace = "$app:ils"
key = "selected_delivery"
Did you define metafields in extension configuration file?
@remy727 I did in the checkout-ui-extension
do i need to do the same in the function-extension
as well?
I included it in the post.
Yes. You need to include [extensions.input.variables] in Shopify functions configuration file.
@remy727 Thank you for the direction I need to go. So I changed the checkout-ui-extension
metafield to JSON. But I have a problem with “using” it in my function GraphQL. In de GraphQL I don’t need the variable. I only need it in my function logic.
I updated the function to the values below. But now $selected is not used and that is not permitted. I’m I missing something from the docs?
Metafield value
JSON.stringify({selected: "dhl"})
Function TOML
[extensions.input.variables]
namespace = "$app:ils"
key = "selected_delivery"
Function input GraphQL
query RunInput($selected: String) {
cart {
deliveryGroups {
deliveryOptions {
description
handle
title
code
}
}
}
}
Does this work?
query RunInput {
deliveryCustomization {
metafield(
namespace: "$app:ils",
key: "selected_delivery"
) {
value
}
}
cart {
deliveryGroups {
deliveryOptions {
description
handle
title
code
}
}
}
}
@remy727 when I remove the extensions.input.variables
from the TOML file (because I don’t use the input) I do get the standard data back that is in the metafield. But I think i’m making a scoping error. Because this is not tight to the current cart right. So I think I need to update the Cart Attributes instead?
mutation {
deliveryCustomizationCreate(deliveryCustomization: {
functionId: "0e07aaa2-xxxxxxx"
title: "Filter delivery methods based on selected carrier"
enabled: true
metafields: [
{
namespace: "ils",
type: "json",
key: "selected_delivery",
value: "{\"selected\":\"\"}"
}
]
}) {
deliveryCustomization {
id
}
userErrors {
message
}
}
}
Sorry, I revisited your question again and I understood what you want 
Question: How can I trigger the function when there is a new selection made?
You need to update cart(maybe line attributes) via checkout UI extension to trigger Shopify function.
So I think I need to update the Cart Attributes instead?
Yes. You can check Adjust Prices via Checkout UI Extension to see how to update cart line attributes via checkout UI extension.
1 Like
@remy727 yes, this worked! Thanks for all the assist.