Javascript does not work with Liquid

Highlighted
New Member
39 0 0

Hi

I cannot link the site I am under NDA - can someone please tell me if this is right?  will not work, if I remove the liquid it works. 

 

<script type="text/javascript">
jQuery(document).ready(function() {
    $.fancybox(
		'<h2>{{ settings.popup_title }}</h2><p>{{ settings.popup_content }}</p>',
		{
             'autoDimensions'	: false,
			'width'         		: 350,
			'height'        		: 'auto',
			'transitionIn'		: 'none',
			'transitionOut'		: 'none'
		}
	);
});
</script>

 

 

 

0 Likes
Shopify Partner
14 0 0

Hi,

Is this code in a ".liquid" file or is it loaded as ".js" asset?

If it is an asset without the ".liquid" extension i doubt it would be parsed, it would have helped you had shown at least what happens...

0 Likes
Shopify Staff
Shopify Staff
5826 0 265

 

USE THE JON FILTER!!!

http://wiki.shopify.com/Json

Even if you use a .js.liquid as file extension, or are inside a .liquid template or snippet, and even if your JavaScript code is sound — you say it is, I'll take your word —the chances of the JavaScript breaking because of new lines or single quotes in your lightbox content is fairly high.

Use the json filter like so:

'<h2>' + {{ settings.popup_title | json }} + '</h2><p>' + {{ settings.popup_content | json }} + '</p>',

Also, look at the content of your JavaScript file in your browser!

The content of your JavaScript file will show you right away if your Liquid tags have returned anything.

Finally, your browser's JavaScript console will also tell you about any JavaScript error...

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
New Member
39 0 0

Thank you so much - that did the trick and I learned some good info.

0 Likes