CODEWITHSUNDEEP
sassshopifyliquidshopify-app
user11066242
user11066242

Reputation: 233

Unable to print liquid variable values in Shopify

I want to print the weight of variants in lbs and the quantity of variants of the products in the products page in Shopify. Here are the few things I am trying

This is the code inside js file:

Able to print the weight in grams:

 $('#variant-weight').text(variant_weight);

But I want to print in lbs something like this

$('#variant-weight').text({{ variant.weight | weight_with_unit: variant.weight_unit }});

For the above code I am not getting any output.

Also I want to print the quantity which is left, but not able to get the desired output. Here is the code:

$('.variant-sku').text(variant.inventory_quantity);

Upvotes: 1

Views: 1961

Answers (1)

drip
drip

Reputation: 12943

You are miss matching JS and LIQUID wrongly.

Yes you can add liquid in JS files if the files have an extension of .js.liquid but in your case this is not doing you any good since you don't have direct access to the variant object.

Instead of using {{ variant.weight | weight_with_unit: variant.weight_unit }} in the JS, add this in the liquid files.

For example (assuming that you):

<div id="variant-weight" data-weight="{{ variant.weight | weight_with_unit: variant.weight_unit }}"></div>

And in the JS you can get data value if you need it.

PS:

Please note that once again you don't have direct access to the variant object. You must be in the product.variants loop or get something like product.first_available_variant.weight instead. And if you are in the variants loop please don't use an ID but a class instead.

Upvotes: 1

Related Questions