ScriptTag with Liquid (or equivalent) ?

Keiichiro
Shopify Partner
4 0 0

Our app needs to show some messages on the "Thank you" page with some information related to the order. To achieve that, I could take advantage of Liquid in "Additional scripts" of settings, but I'd like to use ScriptTag instead. What I couldn't figure out was a way to get dynamic information, like an order number, and use them in my JavaScript source. Are there any workarounds, such as the way to embed Liquid in external JS files?

0 Likes
Britton_Jenner
Shopify Staff (Retired)
Shopify Staff (Retired)
400 0 74

Hi Keiichiro,

Britton here with the Shopify support team.

When you say that you want to use ScriptTag, do you mean embedding javascript between script tags? If so, you should be able to grab information from the order status page [using the checkout object](https://help.shopify.com/themes/liquid/objects/checkout). For example, if you wanted to get the order number you could use something like: 

{{ checkout.order_number }}

Keep in mind two things though. First, doing your code in JS rather than liquid means that it all gets served to the browser so clever people can get access to everything in that code. Writing it in liquid means it gets compiled by the server so only the things you want to display are actuall sent over to the browser to be rendered. The second thing is that because liquid is rendered by the server you can't pull new information using it except on page reload.

I hope that helps!

-Britton

Britton Shopify Guru
0 Likes
Keiichiro
Shopify Partner
4 0 0

Thank you for your reply, Britton! 

What I meant was ScriptTag API. ( https://help.shopify.com/api/reference/scripttag

Now I'm writing a Ruby code which has a line like this,

ShopifyAPI::ScriptTag.create({:src => "#{base_url}/my.js", :event => "onload", :display_scope => "order_status"})

and I am in trouble getting the oreder number in my.js, although I could use '{{ checkout.order_number }}' in "Additional scripts" of store's Settings/Checkout. 

Does it clarify the situation?

 

0 Likes
William22
New Member
10 0 0

Hey Keiichiro, did you get this working?

I'm developing third party app using Rails and I want it to display information about the ordered products on the "Thank You" page using a ScriptTag.

0 Likes
Zetya_Gavin
Shopify Partner
1247 6 96

You can get the order id (from within my.js) using Shopify.checkout.order_id

www.bookthatapp.com
Keiichiro
Shopify Partner
4 0 0

Wow! That's what I am looking for! Thank you BBG!! I'm just wondering if I can ask you where the document of Shopify object is? 

0 Likes
Zetya_Gavin
Shopify Partner
1247 6 96

I remembered that from the Unite conference. I found some documentation here: https://help.shopify.com/themes/customization/order-status/order-status-javascript-asset

www.bookthatapp.com
Keiichiro
Shopify Partner
4 0 0

Thank you again, BBG! I was guessing that there might be such object, having read that page on JavaScript asset, but couldn't find further information. It seems that I need to have some goes and find available methods. Great thanks anyway!

0 Likes
smozgur
Excursionist
17 0 6

Big help! Thank you.

In case for future readers, you can find the Checkout object properties here:

https://shopify.dev/docs/themes/liquid/reference/objects/checkout

0 Likes