Trying to set a JS Variable using liquid

Question

I'm working on a JS mod for Shopify. I have been told that Liquid renders first, then JS.

With that in mind, I'm a bit confused as to how to implement a piece of logic.

I want to check if the customer object is present (logged in) and if so I want to set a JS variable customerID to the value of the customer's ID attribute.

Currently, I'm working with

{% if customer %}

    <script>
    var sasCustomerId = {{ customer.id }};
    </script>

{% endif %}

What I don't understand is how this can render properly. If the Liquid goes first, that would leave

{% if customer %}

    {{ customer.id }}

{% endif %}

Which seems strange. Is this an instantaneous thing where it happens "first" but is instantaneous from the user's point of view?

Sorry if this is a dumb question. Not a Compsci guy myself though I'd love to learn more about how all these scripts I write actually work if anyone would care to educate me.

Thanks!

Black · Accepted Answer · 2016-12-28 13:41:49Z

1

It works like PHP, the liquid condition is going to be evaluated, if it is true, then your JavaScript is rendered, e.g.:

<script>
var sasCustomerId = 123;
</script>

If not, then nothing is going to be rendered.

answered Dec 28, 2016 at 13:41

Black

20.9k47 gold badges188 silver badges300 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

itchyspacesuit Over a year ago

Makes sense. I guess it's more like order of operations?

Black Over a year ago

Yes, your whole code is only executed after the liquid rendered completly.

Collectives™ on Stack Overflow

Trying to set a JS Variable using liquid

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related