How to use javascript variables in shopify's liquid? like vue.js

userxXxK 0
Viewed 27

some.liquid

<div>this is {{year}}</div>

<script>
var year = ''
if (location.hostname == 'stackoverflow.com') {
  year = 'good'
} else {
  year = 'nood'
}

</script>

Obviously, the idea above cannot be implemented, so what should I do?

liquid shopify javascript
1 Answers

The reason why it can't work that way is that Shopify doesn't execute JavaScript on their server when parsing liquid file. So you want to manually modify that element using JavaScript

<div id="my-element"></div>

<script>
const myElement = document.getElementById('my-element');

var year = ''
if (location.hostname == 'stackoverflow.com') {
  year = 'good'
} else {
  year = 'nood'
}

myElement.innerText = `This is ${year}`

</script>
TwistedOwl0
Related