Shopify - 显示重量的 Jquery 函数问题

Question

你们今天好吗？

在我的产品页面 (product.liquid) 上编码时，我需要您的帮助。需要在变体单选按钮内显示重量 + 重量转换单位。

product.liquid 上的 Jquery 变体函数：

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 = '<option value="' + variant.id + '">' + variant.title + '</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 += '<div class="swatch clearfix" data-option-index="' + i + '">';
        options += '<div class="header">' + product.options[i] + ':</div>';
        options += '<div class="variant-items">';
        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 += '<div data-value="' + value + '" class="swatch-element '+is_square+' '+product_swatch_size+' '+(is_color ? "color" : "")+' ' + (is_color ? "color" : "") + valueHandle + (variant.available ? ' available ' : ' soldout ') + '">';
            
            if (is_color) {
              options += '<div class="tooltip">' + value + '</div>';
            }
            options += '<input id="' + forText + '" type="radio" name="option-' + i + '" value="' + value + '" ' + (j == 0 ? ' checked ' : '') + (variant.available ? '' : ' disabled') + ' />';

            if (is_color) {
              if(vimg && product_swatch_setting == '2') {
                options += '<label for="' + forText + '" class="swatch-image" style="overflow:hidden;"><img src="' + vimg + '" class="variant-image" style="max-width:100%;" /><img class="crossed-out" src="' + assetUrl + 'soldout.png" /></label>';
              }else{
                options += '<label for="' + forText + '" style="background-color: ' + valueHandle + '; background-image: url(' + filePath + valueHandle + '.png)"><img class="crossed-out" src="' + assetUrl + 'soldout.png" /></label>';
              }
            } else {
              options += '<label class="' + value + '" for="' + forText + '">' + '<span class="variant-button-top"></span>' + variant.weight + '<span class="variant-button-bottom"></span>' + '<img class="crossed-out" src="' + assetUrl + 'soldout.png" /></label>';
            }
            options += '</div>';
            if (variant.available) {
              $('.product-page-area .swatch[data-option-index="' + i + '"] .' + valueHandle).removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
            }
            optionValues.push(value);
          }
        }
        options += '</div>';
        options += '</div>';
      }
      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 = '<input type="hidden" name="id" value="' + product.variants[0].id + '">';
      layout.find('form.product-form').append(variant_field);
    }
    {% endif %}
  });

在这一行：

+ '<span class="variant-button-top"></span>' + variant.weight + '<span class="variant-button-bottom"></span>' +

我想使用：variant.weight | weight_with_unit：variant.weight_unit

但它不起作用。即使我使用：+ variant.weight + variant.weight_unit + 它返回未定义。

我想返回变体重量和变体转换单位。

你能帮帮我吗？提前谢谢！

Answer 1

在您的情况下，主题使用{{product | json }} 将 JSON 数据转换为 javascript 代码，可以遗憾地说，但 JSON 错过了变体重量单位，您无法在循环中获得相同的数据。

要克服这种情况，您需要使用产品句柄获取 JSON 数据，该数据包含重量单位以及其他数据。

我希望这对您将来遇到类似问题的其他开发人员有所帮助。

Answer 2

如果您为变体分配了权重，请使用 Liquid 来显示它。您可以在 Liquid 中进行简单的数学运算。跳过所有 Javascript 废话，直接使用 Liquid。它就是为此而生的。根据您在此处描述的内容，您无需动态编写此客户端的脚本。