How can I display variant weight and unit in product.liquid using jQuery?

Technical Q&A
1

Hello everyone, how are you all today?

I need your help with coding on my product page (product.liquid). Need to display the weight + weight converted unit inside the variant radio buttons.

Jquery variant function on product.liquid:

jQuery(function($) {
        {% if product.available and product.variants.size >= 1 %}
        var product = {{product | json}};
        var layout = $('.product-page-area');
        if (product.variants.length >= 1) { //multiple variants
          for (var i = 0; i < product.variants.length; i++) {
            var variant = product.variants[i];
            var option = '';
            layout.find('form.product-form > select').append(option);
          }
          new Shopify.OptionSelectors("product-selectors", {
            product: product,
            onVariantSelected: selectCallback,
            enableHistoryState: true
          });

          //start of quickview variant;
          var filePath = asset_url.substring(0, asset_url.lastIndexOf('/'));
          var assetUrl = asset_url.substring(0, asset_url.lastIndexOf('/'));
          var options = "";
          for (var i = 0; i < product.options.length; i++) {
            options += '';
            options += '
' + product.options[i] + ':
';
            options += '';
            var is_color = false;
            var is_square = 'square';
            if (/Color|Colour/i.test(product.options[i])) {
              is_color = true;
            }
            if (swatch_color_type == '2') {
              is_color = false;
              is_square = '';
            }
            var optionValues = new Array();
            for (var j = 0; j < product.variants.length; j++) {
              var variant = product.variants[j];
              var value = variant.options[i];
              if(variant.featured_image && product_swatch_setting == '2') {
                var img = variant.featured_image.src.lastIndexOf(".");
                var vimg = variant.featured_image.src.slice(0, img) + "_50x50_crop_center" + variant.featured_image.src.slice(img);
              }
              var valueHandle = convertToSlug(value);
              var forText = 'swatch-' + i + '-' + valueHandle;
              if (optionValues.indexOf(value) < 0) {
                //not yet inserted
                options += '
';
                
                if (is_color) {
                  options += '
' + value + '
';
                }
                options += '';

                if (is_color) {
                  if(vimg && product_swatch_setting == '2') {
                    options += '';
                  }else{
                    options += '';
                  }
                } else {
                  options += '';
                }
                options += '
';
                if (variant.available) {
                  $('.product-page-area .swatch[data-option-index="' + i + '"] .' + valueHandle).removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
                }
                optionValues.push(value);
              }
            }
            options += '
';
            options += '
';
          }
          if(swatch_color_type == '1' || swatch_color_type == '2') {
            layout.find('form.product-form .product-options > select').after(options);
            layout.find('.swatch :radio').change(function() {
              var optionIndex = $(this).closest('.swatch').attr('data-option-index');
              var optionValue = $(this).val();
              $(this)
              .closest('form')
              .find('.single-option-selector')
              .eq(optionIndex)
              .val(optionValue)
              .trigger('change');
            });
          }
      
          if (product.available) {
            Shopify.optionsMap = {};
            Shopify.linkOptionSelectors(product);
          }
          //end of quickview variant
        } else { //single variant
          layout.find('form.product-form .product-options > select').remove();
          var variant_field = '';
          layout.find('form.product-form').append(variant_field);
        }
        {% endif %}
      });

On this line:

+ '' + variant.weight + '' +

I want to use: variant.weight | weight_with_unit: variant.weight_unit

But it does not work. Even if i use: + variant.weight + variant.weight_unit +
It returns undefined.

I don’t have coding skills to solve this. I’m learning as i encounter problems but this one will require some help.

I want to return the variant weight and the variant converted unit.

Can you give me a hand? Thank you in advance!

2

For anyone else looking for how to display variant weight correctly:

{{ variant.weight | weight_with_unit: variant.weight_unit }}

will display the weight in the units that are set at the variant level. For example, if the variant has weight in grams, it will show the weight in grams. This will work even if different variants of the parent product are using different units.

Example usage in more detail:

{%- for variant in product.variants -%}

{%- # Show data only if weight is not zero, ie data has been entered -%}
{%- if variant.weight != 0 -%}

{{ variant.weight | weight_with_unit: variant.weight_unit }}

{%- endif -%}

{%- endfor -%}

The data-variant-id is something that could be used with Javascript to show/hide variant data as the user selects different variants.