Shopify Liquid snippet requires {% raw %} for object to output

Question

I would like to compare a string object but cant seem to because the only way it outputs data is when it has {% raw %} tags. This example outputs {{ myBatch.my_CountryOfOrigin }}:

{% raw %}<p class="info-part" v-if="isBatches" v-for="(myBatch, l) in myyy.batches" :data-batch="'batch-' + l">
  Country of Origin: {{ myBatch.my_CountryOfOrigin }}
</p>{% endraw %}

However when I remove {% raw %} tags then {{ myBatch.my_CountryOfOrigin }} is blank.

I need to compare a string value

{% assign myc = myBatch.my_CountryOfOrigin | strip | upcase %}
{% if myc == "ABCD" %}
...

Can anyone lend a hand please.

Dave B Dave B · Accepted Answer · 2020-02-12T20:56:59

You're running into an issue where there's actually two different template styles in play. The double-curly-brackets notation is actually quite common among template languages, so Shopify has {% raw %} tags to allow you to include template assets for not-Shopify templating - for example, to make a template that uses the Handlebars or Moustache javascript libraries.

You won't be able to make the comparison through Liquid, as the myBatch.my_countryOfOrigin variable isn't coming through Liquid. You'll need to find the javascript file that is using this template and make the comparison using javascript there.

I can't help you find the file in question unfortunately, but if you look in the file you're editing above you should see that you are inside a <script> tag with a type of something like text/template that tells the browser that this is not a block of code to display or execute. That script element will probably have an ID associated with it, and you should be able to use that ID value to search your theme's javascript files and find where that template is being read, which will point you in the right general direction to find where you need to make your comparison.

Good luck!

Shopify Liquid snippet requires {% raw %} for object to output

1 Answers