Is there any replacement for Shopify.Checkout.OrderStatus.addContentBox now that Order status page additional scripts is deprecated?

Extensions
1

I’ve been using the Additional Scripts box on the checkout settings to display a content box based on order tags and fulfilment status.

It says ‘Additional scripts is deprecated. your current customizations, then recreate the customizations you want to keep using pixels in [customer events] and app blocks in the editor.’

I can’t seem to find any examples of how to migrate this using either pixels or app blocks - is it possible?

I am not using Shopify Plus.

Here’s the code:

<script>

const tags = {{ checkout.order.tags | json }};
const fulfillment = {{ checkout.order.fulfillment_status | json }};
let progress_message = '';

if (fulfillment == 'partial') {
	progress_message = 'Orders with multiple items are manufactured and shipped separately as soon as possible.<br><br>Your mats still in production are ';
}
if (fulfillment == 'unfulfilled') {
	progress_message = 'Your mats are ';
}



if (progress_message) {
	
	if (tags.includes('x READYFORSHIPPING')) {
		progress_message += 'packed and on their way to Evri.  You will be emailed your tracking links shortly.';
	}
	else if (tags.includes('x EMBROIDERY')) {
		progress_message += 'now being embroidered.';
	}
	else if (tags.includes('x SEWING_MACHINIST')) {
		progress_message += 'currently being sewn.';
	}
	else if (tags.includes('x CUTTER')) {
		progress_message += 'being expertly cut by a CNC cutting machine to fit your vehicle.';
	}
	else {
		progress_message += 'ready to go into production. Our team are getting ready.';
	}
	
 Shopify.Checkout.OrderStatus.addContentBox(
		'<div class="text-container"><h2>Order status</h2><p>' + progress_message + '</p></div>'
	)
}
</script>
2

If you’re adding content like this you’ll need to utilize Checkout UI Extensions

3

Do I need to have a Shopify Plus account for this?

4

Hi Ashley,

You would only need to have a Plus account if you were trying to add UI Extensions to the actual checkout itself. But much like additional scripts allowed, any plan is able to add UI Extensions to the Thank You and Order Status Page (there is a note of this availability here).

The APIs you’ll want to use are actually the Customer Account Extension APIs for targets on the Order Status Page. The Checkout Ui Extensions would be for the Thank You Locations.

For what you’re trying to do in your existing code, I would suggest starting with the Banner and seeing if that suits your needs.

To get the fulfillment status, you can use the Customer Account Extensibility API to query the Fulfillment Status, and you may consider querying the Fulfilment more generally.

Hopefully this helps get you underway!

2 Likes
5

Perfect - thanks John!

1 Like