what's the difference between .js and .js.liquid in shopify?

Question

In the assets section, there are files with .js and .js.liquid names.

What is the difference between the 2, which one should I use if I want to include a js file into a theme?

This is inside a .js.liquid file right now. I would like to construct a string made up of liquid variable. when I append this string inside a DOM element, it doesn't seem to show up.

var someString = '';
  {%for line in order.line_items%}
  someString += 'q='+{{line.quantity}}+'&p='+{{line.product.id}}+'&pp='+{{line.price}}+'&w='+{{line.grams}}+'&i='+{{line.product.featured_image|product_img_url|url_param_escape}}+'&n='+{{line.product.title|url_param_escape}}+'&';
  {%endfor%}

$('body').append(someString);

Answer 1

You can use liquid in .js.liquid files, but .js files are javascript only.

If you're including a regular js file, use the .js extension. If you've got liquid in the file as well, you'll need to use .js.liquid.

EDIT:

I don't think order can be accessed in a .js.liquid file. See here:

The order object can be accessed in order email templates, the Thank You page of the checkout, as well as in apps such as Order Printer.

Also see this discussion on the Shopify forums:

You can only use Liquid filters and the global settings object in liquidified assets.

It works like this: whenever you edit a .css.liquid of a .js.liquid file, or whenever you edit your theme settings, a new .css or .js file is created and then stored on our assets servers. Updating your shop in any other way will not update those files...

Given the above, Shopify cannot expose store information (that is likely to change) in those files.