# バリエーションを選択した際に切り替わるメタフィールドの設置について

**URL:** <https://community.shopify.com/t/topic/335819>\
**Category:** 技術的なQ＆A\
**Tags:** javascript\
**Created:** [July 1, 2024, 6:59am UTC](https://community.shopify.com/t/topic/335819 "2024-07-01T06:59:00Z")\
**Posts on this page:** 1\
**Page:** 1

## AI-generated summary

商品ページでバリエーション選択時にメタフィールド（納期情報）が切り替わらない問題が発生しています。

**背景:**
- テーマ: Dawn
- Dawn 14.0までは`global.js`の`renderProductInfo()`関数で正常に動作していた
- テーマアップデート後、スクリプトの変更により機能しなくなった

**実装内容:**
- バリエーション毎に異なる納期情報のメタフィールドを設置
- `fetch`でバリエーションIDに基づいて商品情報を取得
- DOMParserで取得したHTMLから該当要素を抽出し、価格・SKU・納期情報などを更新
- カスタムコードとして「リードタイムメタフィールド」の切り替え処理を追加していた

**現状:**
コードの一部が文字化けまたは破損しており、具体的なエラー内容や解決策は未提示。テーマアップデートに伴うスクリプト変更への対応方法を求めている状況と推測されます。

<div class="post-metadata">

**Author:** ![Anonymous\_c7caf5cd49ac18a03ba7e37fe7b23705](https://avatars.discourse-cdn.com/v4/letter/a/e79b87/32.png) [@Anonymous\_c7caf5cd49ac18a03ba7e37fe7b23705](https://community.shopify.com/u/Anonymous_c7caf5cd49ac18a03ba7e37fe7b23705)\
**Post date:** [July 1, 2024, 6:59am UTC](https://community.shopify.com/t/topic/335819/1 "2024-07-01T06:59:00Z")

</div>

お世話になります。株式会社リブグラフィと申します。

表題の件について、商品ページにバリエーション毎に異なる納期情報のメタフィールドを設置しているのですが、

テーマアップデート後のスクリプトにて変更があったようで、別のバリエーションを選択した時に納期情報が切り替わらなくなってしまいました。テーマはDawnを使用しています。

14.0までのglobal.jsでは、下記のようにしておりました。

```auto
renderProductInfo() {
    const requestedVariantId = this.currentVariant.id;
    const sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section;

    fetch(
      `${this.dataset.url}?variant=${requestedVariantId}&section_id=${
        this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section
      }`
    )
      .then((response) => response.text())
      .then((responseText) => {
        // prevent unnecessary ui changes from abandoned selections
        if (this.currentVariant.id !== requestedVariantId) return;

        const html = new DOMParser().parseFromString(responseText, 'text/html');
        const destination = document.getElementById(`price-${this.dataset.section}`);
        const source = html.getElementById(
          `price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`
        );
        const skuSource = html.getElementById(
          `Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`
        );
        const skuDestination = document.getElementById(`Sku-${this.dataset.section}`);
        // リードタイムメタフィールド追記＿1 //
        const variantUnitSource = html.getElementById(`variant-unit-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
        const variantUnitDestination = document.getElementById(`variant-unit-${this.dataset.section}`);
        // リードタイムメタフィールド追記＿1終わり //
        const inventorySource = html.getElementById(
          `Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`
        );
        const inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`);

        const volumePricingSource = html.getElementById(
          `Volume-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`
        );

        this.updateMedia(html);

        const pricePerItemDestination = document.getElementById(`Price-Per-Item-${this.dataset.section}`);
        const pricePerItemSource = html.getElementById(
          `Price-Per-Item-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`
        );

        const volumePricingDestination = document.getElementById(`Volume-${this.dataset.section}`);
        const qtyRules = document.getElementById(`Quantity-Rules-${this.dataset.section}`);
        const volumeNote = document.getElementById(`Volume-Note-${this.dataset.section}`);

        if (volumeNote) volumeNote.classList.remove('hidden');
        if (volumePricingDestination) volumePricingDestination.classList.remove('hidden');
        if (qtyRules) qtyRules.classList.remove('hidden');

        if (source && destination) destination.innerHTML = source.innerHTML;
        // リードタイムメタフィールド追記＿2 //
        if (variantUnitSource && variantUnitDestination) variantUnitDestination.innerHTML = variantUnitSource.innerHTML;
        // リードタイムメタフィールド追記＿2終わり //
        if (inventorySource && inventoryDestination) inventoryDestination.innerHTML = inventorySource.innerHTML;
        if (skuSource && skuDestination) {
          skuDestination.innerHTML = skuSource.innerHTML;
          skuDestination.classList.toggle('hidden', skuSource.classList.contains('hidden'));
        }

        if (volumePricingSource && volumePricingDestination) {
          volumePricingDestination.innerHTML = volumePricingSource.innerHTML;
        }

        if (pricePerItemSource && pricePerItemDestination) {
          pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML;
          pricePerItemDestination.classList.toggle('hidden', pricePerItemSource.classList.contains('hidden'));
        }

        const price = document.getElementById(`price-${this.dataset.section}`);

        if (price) price.classList.remove('hidden');

        if (inventoryDestination) inventoryDestination.classList.toggle('hidden', inventorySource.innerText === '');

        const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`);
        this.toggleAddButton(
          addButtonUpdated ? addButtonUpdated.hasAttribute('disabled') : true,
          window.variantStrings.soldOut
        );

        publish(PUB_SUB_EVENTS.variantChange, {
          data: {
            sectionId,
            html,
            variant: this.currentVariant,
          },
        });
      });
  }

```

14.0から15.0での変更点について、もしご存じであればご教示いただけますと幸いです。

何卒よろしくお願いいたします。