Ad
Assigning Liquid To Javascript Variable
var first = 'one',
second = 'two.png';
image = first + second;
console.log('js image: ' + image);
image = '{{ image | asset_url }}';
console.log('liquid image: ' + image);
Produces in the console:
js image: onetwo.png
liquid image:
I cannot get the code to output the code from the liquid filter. I have tried using {% raw %}
and looked at a few SO questions (Shopify: Using variables from {% schema %} in Javascript, Using javascript variables in Shopify liquid, Using asset_url within a .js.liquid file) to no avail.
What am I doing wrong here? I am expecting to get:
liquid image: onetwo.png?123456789
Even removing asset_url
:
image = '{{ image }}';
Still produces:
liquid image:
Ad
Answer
After chatting with @Subhrajyoti Das there is a hacky way of doing it.
Create the full string with dummy text where the actual filename is:
assetString = '{{ 'filename' | asset_url }}'
This produces:
cdn.shopify.com/s/files/0/0000/0000/0000/t/00/assets/filename?0000000000
Then use string replacement to replace 'filename' with the asset variable:
image = assetString.replace("filename", image);
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad