Add configuration to your delivery customization
You can use metafields for the configuration of your delivery customization function. Metafields provide greater flexibility to use functions, and are a prerequisite to creating a merchant user interface for configuring functions.
What you'll learn
Anchor link to section titled "What you'll learn"In this tutorial, you'll learn how to do the following tasks:
- Add metafields to your GraphQL input query.
- Use metafield values in your function logic.
- Populate metafields on the function owner with GraphQL.
Requirements
Anchor link to section titled "Requirements"- You've completed the Getting started with building delivery customizations tutorial.
Step 1: Configure the function
Anchor link to section titled "Step 1: Configure the function"To make your function reusable, you can replace hardcoded values in your function with metafield values. You can update your input query to request a metafield value on the created delivery customization, which is the function owner for this function API. You can then use that value in your function logic.
Navigate to your function in
extensions/delivery-customization
.Replace the code in the
input.graphql
file with the following code.This update to the input query adds a metafield from the
deliveryCustomization
object, which is the function owner.If you're using JavaScript, then run the following command to regenerate types based on your input query:
Replace the
src/index.js
orsrc/main.rs
file with the following code.This update includes parsing the JSON metafield value, and using values from that JSON in the function logic instead of hardcoded values.
This change is automatically reflected as long as you're running
dev
.
Step 2: Populate the delivery customization configuration metafield
Anchor link to section titled "Step 2: Populate the delivery customization configuration metafield"To populate the configuration metafield, you'll first use the deliveryCustomizations
query to confirm the delivery customization ID, and then use the metafieldsSet
mutation to populate the same metafield that you specified in the input query.
- Open the Shopify GraphiQL app on your development store.
- In the GraphiQL app, in the API Version field, select the 2023-07 version.
Execute the following query, and make note of the
id
value of the delivery customization that you created in the previous tutorial. For more information about global IDs, refer to Global IDs in Shopify APIs.Execute the following mutation and replace
YOUR_CUSTOMIZATION_ID_HERE
with the full global ID of your delivery customization.The value of the metafield specifies that the function should add a message for the
NC
state/province code. You can adjust this to the state/province of your choice.You should receive a GraphQL response that includes the ID of the created metafield. If the response includes any messages under
userErrors
, then review the errors, check that your mutation andownerId
are correct, and try the request again.
Step 3: Test the delivery customization
Anchor link to section titled "Step 3: Test the delivery customization"- Open your development store, build a cart, and proceed to checkout.
- Enter a delivery address that doesn't use the specified state/province code. You shouldn't see any additional messaging on the delivery options.
- Change your shipping address to use your chosen state/province code. Your delivery options should now have the additional messaging.
- To debug your function, or view its output, you can review its logs in your Partner Dashboard.
- Log in to your Partner Dashboard and navigate to Apps > {your app} > Extensions > delivery-customization.
- Click on any function run to view its input, output, and any logs written to
STDERR
.
- Build a delivery customization user interface with App Bridge.
- Learn how to use variables in your input query.