バリエーションのサイズを変更したらそれに伴って重量も変更したい

[あゆわら]

現在Narrativeにて開発をしております。

行き詰まってしまい質問をさせていただきました。

バリエーションのサイズを変更した際に、商品説明の重量部分をそのサイズに対応した

重量に変更したいと考えております。

サイズと型番は公式（https://help.shopify.com/ja/manual/online-store/themes/os/customize/show-sku ）にあった方法で対応できたのですが、同じように重量も変更しようとしたら、初めは正しく表示されているのですが、サイズを切り替えると、undefined　になってしまいます。

どのようにすればいいかご教示いただけますと幸いです。

現在の状況：

サイズ切り替え前

サイズ切り替え後

試したこと：

custom.jsに下記記述を追加

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[data-product-json]')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = "shopify-section-" + product.closest('[data-section-id]').dataset.sectionId;
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-weight');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.weight_in_unit;
            }
          });
        });
        count += 1;
      });
    });
  }
});

カスタマイズにカスタムliquidを追加して記述記述しいます。

{% assign current_variant = product.selected_or_first_available_variant %}
<P></P>
<table>
    <thead>
        <tr>
            <th colspan="2" scope="col">仕様</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>サイズ</th>
            <td class="txt"><span class="variant-option1">
                    {% if current_variant.option1 == "Default Title"%}
                    W {{ product.metafields.my_fields.size_w.value }} x H {{product.metafields.my_fields.size_h.value}}
                    x D {{product.metafields.my_fields.size_d.value}}
                    {% else %}
                    {{ current_variant.option1 }}
                    {% endif %}
                </span></td>
        </tr>
      <tr>
            <th>重さ</th>
            <td class="txt"><span class="variant-weight">{{ current_variant.weight_in_unit }}</span></td>
        </tr>
    <tr>
        <tr>
            <th>素材</th>
            <td class="txt">{{ product.metafields.my_fields.sozai }}</td>
        </tr>
        <tr>
            <th>内容物</th>
            <td class="txt">{{ product.metafields.my_fields.naiyoubutu }}</td>
        </tr>
        <tr>
            <th>特徴</th>
            <td class="txt"> {{ product.metafields.my_fields.tokutyou }}</td>
        </tr>
        <tr>
            <th>型番</th>
            <td class="txt"><span class="variant-sku">{{ current_variant.sku }}</span></td>
        </tr>
    </tbody>
</table>
<table>
    <thead>
        <tr>
            <th colspan=2 scope="col">特記事項</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="特記事項" colspan=2 class="txt">
                <ul>
                    <li>{{ product.metafields.my_fields.tokkizikou }}</li>
                    <li>限定生産品です。突然の品切れによりご用意できない場合もあります。その際はご容赦ください。</li>
                    <li>改良のため、仕様を変更する場合があります。</li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>


<style>
    body {
        font-family: "Open Sans", sans-serif;
        line-height: 1.6;
    }

    table {
        border-collapse: collapse;
        margin: 0 auto;
        padding: 0;

        table-layout: auto !important;
        color: #7E7E7E;
    }

    table tr {
        background-color: #fff;
        padding: .35em;
        border-bottom: 1px dotted #727272;
    }

    table tr:last-child {
        border-bottom: 2px solid #8B8B8B;
    }

    table th,
    table td {
        padding: 1em 10px 1em 1em;

    }

    tbody th {
        color: #626262;
        width: 30%;

    }

    .txt {
        text-align: left;
        font-size: .85em;
    }

    .price {
        text-align: right;
    }

    @media screen and (max-width: 300px) {
        table {
            border: 0;
            width: 100%
        }

        table th {
            display: block;
            border-right: none;
            border-bottom: 2px solid #727272;
            padding-bottom: .6em;
            margin-bottom: .6em;

        }

        table thead {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

        table tr {
            display: block;
            margin-bottom: 2em;
            border-bottom: 2px solid #727272;
        }

        table td {
            border-bottom: 1px solid #bbb;
            display: block;
            font-size: .8em;
            text-align: right;
            position: relative;
            padding: .625em .625em .625em 4em;
            border-right: none;
        }

        table td::before {
            content: attr(data-label);
            font-weight: bold;
            position: absolute;
            left: 10px;
        }

        table td:last-child {
            border-bottom: 0;
        }
    }
</style>
<!--
{{ product.metafields.my_fields.img1_slidetitle.value }}
-->