How to access liquid objects with JavaScript / JQuery

Technical Q&A
1

Hi there,

My question might be easy to answer, but I could not find a solution after searching and trying things for hours now. So this is what I would like to do:

My Status: Using Shopify Plus, I have access to the checkout.liquid which allows me to use Javascript/Jquery during the checkout process.

My task: At the final checkout page, which is “payment_method” for me, I would like to load the countries as given in the the shipping and billing address to my JQuery code in order to have some tests (specific combinations of countries I would like to allow, others I would like to prevent).

My question: How do I do this? I found the checkout object list here and

{{ shipping_address.country }}

as well as

{{ billing_address.country }}

are the right objects in my opinion. But how can I access these liquid objects with JQuery and, e.g. store them in a JS variable? I only managed to access the billing address country from the input with JQuery, but only if it is separately entered by the customers. That is not the same as accessing the objects. Read only access is enough, I don’t need to override the user inputs. I would just like to show a message like “this combination of countries is not allowed…” to the customer so that s/he can change the country if neccessary.

Thanks in advance!

2 
{{ shipping_address.country }}

and other such objects output static text, so you need to find it with jQuery in the DOM and process it as text.

You dont’ run jquery IN liquid where those objects are being rendered.
Basically jQuery happens on the clientside AFTER liquid objects have resolved.

Sometimes the billing address IS the shipping address.

If you are also trying to find your shipping zones try

You will probably want to hide it with attribute 'style=“display:none;” on the select tag.

You may be able to handle this during the shipping step with a checkoutscript for shipping.

3

Thanks Paul,

I was thinking that I could access the liquid object in Jquery. But of course, they are converted while loading a website, which is before Jquery comes into play. So the objects are no longer available at that point. I guess I was playing around with the issue for too long during night :wink:

So thanks for your response and clarification. And yes, I was then able to collect the shipping country by running a jquery script at the final checkout page. The address is summarised at that step and I managed to extract the country out of that summary. Stored in a variable, I can now easily check if we can allow an order to that country or if we need additional information from the customer by simply running that script when the “Order” button is clicked. That works perfectly fine now.

1 Like
4

or you could use a script tag and save var globally
2 Likes