Checkout UI Extension not rendering: purchase.checkout.cart-line-item.render-after

[YannicC]

Hello everyone,

I got an issue regarding a Checkout UI Extension that I built to implement an upselling widget. Within the extension I defined two targets that should be rendered to: One is a dynamic block target and the other is a static cart line item target.

The block target renders the upselling widget which works perfectly fine. The cart line item target on the other hand should render a remove button underneath each line item that was added via the upselling widget.

That one is also rendering and working as it should within the development preview. But once I deploy the app and turn off the preview mode, the cart line item target won't render anymore at all.

This is how the extension renders in the development preview with npm run dev running:

But once I deactivate the development store preview and kill the dev script the remove button won't render anymore:

Seemingly it isn't even attempting to render the cart line item component since any console logs inside of it are not being triggered. If I add console logs within the widget component they appear just as expected on the other hand.

Any help would be greatly appreciated since I really start to feel desperate about this issue.

Thank you!

[YannicC · Accepted solution]

Luckily I could solve it!

In case anyone would be facing the same problem: The solution was not to export multiple types of targets within one extension. Since I tried to export a Block Extension and a Static Extension at once, only the first one was being rendered.

What I did instead now was to export only one target per extension and instead created a second extension solely for rendering the remove button via the cart line item target. Hope it helps anyone who might be facing the same issue!

[Colin_Brogan]

Thank you. I had the exact same problem. Three targets on a single extension. All three rendered on development site. Only one on live production site (driving my client mad, as I told him we were all ready to go). The same tweak fixed it. Incase anyone is curious how to seperate each module into a seperate extension, it can all be done with a TOML file like so:

api_version = "2023-10"

[[extensions]]
type = "ui_extension"
name = "details-per-shipping-option"
handle = "details-per-shipping-option"


	# This is a static extension target
	[[extensions.targeting]]
	module = "./src/Checkout.jsx"
	target = "purchase.checkout.shipping-option-item.details.render"

	[extensions.capabilities]
	# Gives your extension access to make external network calls, using the
	# JavaScript `fetch()` API. Learn more:
	# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#network-access
	network_access = true
	# Gives your extension access to directly query Shopify’s storefront API.
	# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#api-access
	api_access = true

[[extensions]]
type = "ui_extension"
name = "shipping-disclaimer"
handle = "shipping-disclaimer"

	# This is also a static extension target
	[[extensions.targeting]]
	module = "./src/ShippingDisclaimer.jsx"
	target = "purchase.checkout.shipping-option-list.render-after"

	[extensions.capabilities]
	# Gives your extension access to directly query Shopify’s storefront API.
	# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#api-access
	# Gives your extension access to make external network calls, using the
	# JavaScript `fetch()` API. Learn more:
	# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#network-access
	block_progress = true

[[extensions]]
type = "ui_extension"
name = "shipping-option-byline"
handle = "shipping-option-byline"

	# This is also a static extension target
	[[extensions.targeting]]
	module = "./src/ShippingOptionByline.jsx"
	target = "purchase.checkout.shipping-option-item.render-after"


	[extensions.capabilities]

	# Gives your extension access to make external network calls, using the
	# JavaScript `fetch()` API. Learn more:
	# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#network-access
	network_access = true

[YannicC]

Awesome, thanks for the addition. I wasn't aware that you could actually configure the TOML file to allow multiple extensions, definitely helpful.