Solved

Is it possible to split a component file in Checkout UI Extention?

Monesynth
Shopify Partner
2 1 0

Hi, I'm new to develop Checkout UI Extension.

Is it possible to split JSX components from 'Checkout.jsx' file by creating own custom directories and files like this.

 

スクリーンショット 2023-12-24 18.08.09.png

 

In Checkout.jsx:

 

 

import { reactExtension } from "@shopify/ui-extensions-react/checkout";
import { ShippingOptions } from "./components/ShippingOptions"; // <= 🆕 This is what I created.

const shippingOptionListAfterRneder = reactExtension(
"purchase.checkout.shipping-option-list.render-after",
() => <ShippingOptions />
);
export { shippingOptionListAfterRneder };

 

 

 

I created '/components/' directory in '/src' directory. and put own 'ShippingOptions' component file in it. Then I import that component from 'Checkout.jsx'. but the Shopify CLI says the following:

 

スクリーンショット 2023-12-24 18.26.58.png

 

shopify.extension.toml:

api_version = "2023-10"

[capabilities]
api_access = true
network_access = true
block_progress = true

[[extensions]]
type = "ui_extension"
name = "checkout-ui"
handle = "checkout-ui"

# [START order-status.config-extension]
[[extensions.targeting]]
target = "purchase.checkout.shipping-option-list.render-after"
module = "./src/Checkout.jsx"
export = "shippingOptionListAfterRneder"

 

I wanted to split jsx components from main module, because that file might be so fat, but it's not possible?

Accepted Solution (1)

Monesynth
Shopify Partner
2 1 0

This is an accepted solution.

It's been solved, this is just a js typo problem, I created 'ShippingOptions.jsx', but 'ShippingOptions.js' is right. I renamed it, and it works!

View solution in original post

Replies 2 (2)

Monesynth
Shopify Partner
2 1 0

This is an accepted solution.

It's been solved, this is just a js typo problem, I created 'ShippingOptions.jsx', but 'ShippingOptions.js' is right. I renamed it, and it works!

Liam
Shopify Staff
2731 302 783

Glad you figured this out and thanks for coming back to post your solution!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog